塊級(jí)元素和行內(nèi)元素分別有哪些必尼?動(dòng)手測(cè)試并列出4條以上的特性區(qū)別
- 塊級(jí)元素:div h1 h2 h3 h4 h5 h6 p hr form ul dl ol pre table li dd dt tr td th
- 行內(nèi)元素:em strong span a br img button iput label select textarea code script
-
塊級(jí)元素單獨(dú)占據(jù)一整行垫言,行內(nèi)元素占據(jù)的位置只有自身文本寬度的空間
寬高只對(duì)塊級(jí)元素有效
3. margin和padding對(duì)塊級(jí)元素有效,margin對(duì)行內(nèi)元素只有左右有效酌心,padding對(duì)行內(nèi)元素會(huì)改變背景和邊框玖翅,但不會(huì)占據(jù)空間悍及。
- 塊級(jí)元素可以包含塊級(jí)和行內(nèi)元素唐全,行內(nèi)元素只能包含文本和行內(nèi)
什么是 CSS 繼承? 哪些屬性能繼承埃跷,哪些不能?
- CSS繼承:了解CSS繼承首先需要了解文檔樹(shù)(HTML DOM),文檔樹(shù)由HTML元素構(gòu)成弥雹,文檔樹(shù)和家族樹(shù)類似垃帅,也有祖先、后代缅糟、父親挺智、孩子祷愉、兄弟的概念窗宦。CSS繼承其實(shí)就是特定的CSS屬性向下傳遞到子孫元素。
- 需要注意二鳄,不是所有的CSS屬性都會(huì)被子類所繼承赴涵。
不可繼承的:display、margin订讼、border髓窜、padding、background欺殿、height寄纵、min-height、max-height脖苏、width程拭、min-width、max-width棍潘、overflow恃鞋、position、left亦歉、right恤浪、top、bottom肴楷、z-index水由、float、clear赛蔫、table-layout砂客、vertical-align、page-break-after濒募、page-bread-before和unicode-bidi鞭盟。
所有元素可繼承:visibility和cursor。
內(nèi)聯(lián)元素可繼承:letter-spacing瑰剃、word-spacing齿诉、white-space、line-height、color粤剧、font歇竟、font-family、font-size抵恋、font-style焕议、font-variant、font-weight弧关、text-decoration盅安、text-transform、direction世囊。
終端塊狀元素可繼承:text-indent和text-align别瞭。
列表元素可繼承:list-style、list-style-type株憾、list-style-position蝙寨、list-style-image。
表格元素可繼承:border-collapse嗤瞎。
如何讓塊級(jí)元素水平居中墙歪?如何讓行內(nèi)元素水平居中?
塊級(jí)元素水平居中:margin: auto;
行內(nèi)元素水平居中:text-align: center;
用 CSS 實(shí)現(xiàn)一個(gè)三角形
單行文本溢出加 ...如何實(shí)現(xiàn)?
h3 {
white-space: nowrap; 不要折行
overflow: hidden; 超出隱藏
text-overflow: ellipsis; 超出表示為...
}
px, em, rem 有什么區(qū)別
- px: 固定單位
- 百分比(寬高?文字大斜雌妗虹菲?line-height? position?)
- em: 相對(duì)單位,相對(duì)于父元素字體大小
- rem: 相對(duì)單位弃秆,相對(duì)于根元素(html)字體大小
- vw vh: 相對(duì)單位届惋,1vw 為屏幕寬度的1%
解釋下面代碼的作用?為什么要加引號(hào)? 字體里\5b8b\4f53代表什么?
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
字體大小12px,行高1.5倍菠赚,字體為 'Hiragino Sans GB','\5b8b\4f53',sans-serif脑豹。因?yàn)樽煮w里有空格,所以加引號(hào)衡查。\5b8b\4f53 宋體瘩欺。
作業(yè)2
<a >code1</a>
<a >code2</a>
<a >code3</a>
<a >code4</a>
<a >code5</a>