塊級(jí)元素和行內(nèi)元素分別有哪些拟蜻？測(cè)試特性區(qū)別
- 塊級(jí) block-level
form ul dl ol pre table
li dd dt tr td th
- 行內(nèi) inline-level
button input label select textarea
code script
特性區(qū)別：
- 塊級(jí)元素可以包含行內(nèi)元素熊昌，行內(nèi)元素只能放行內(nèi)元素
<div class="test">
<p>塊元素</p>
<span>行內(nèi)元素</span>
</div>
<span>行內(nèi)元素1</span><a href="">行內(nèi)元素2</a>
- 寬高設(shè)置--塊級(jí)元素設(shè)置有效，行內(nèi)設(shè)置無效
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
}
span,a{
width: 100px;
height: 100px;
border: 1px solid blue;
}
</style>
<div>這是一塊級(jí)元素</div>
<span>行內(nèi)元素1</span><a href="">行內(nèi)元素2</a>
- 塊級(jí)元素占據(jù)空間是一整行憨颠，行內(nèi)元素占據(jù)空間是自身胳徽，多行可以并列排行
<div>這是一塊級(jí)元素</div>
<span>行內(nèi)元素1</span><a href="">行內(nèi)元素2</a>
- 塊級(jí)元素設(shè)置padding和margin，行內(nèi)元素對(duì)上下的padding和margin是不生效的
<div class="test">
<p>塊元素</p>
<span>行內(nèi)元素</span>
</div>
<span>行內(nèi)元素1</span><a href="">行內(nèi)元素2</a>
- 寬高設(shè)置--塊級(jí)元素設(shè)置有效爽彤，行內(nèi)設(shè)置無效
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
margin: 10px 30px;
}
span,a{
width: 100px;
height: 100px;
border: 1px solid blue;
margin: 100px 30px;
}
</style>
<div>這是一塊級(jí)元素</div>
<span>行內(nèi)元素1</span><a href="">行內(nèi)元素2</a>
什么是 CSS 繼承? 哪些屬性能繼承养盗，哪些不能？
css繼承: 父級(jí)元素設(shè)置樣式适篙，其子級(jí)元素的樣式會(huì)和父級(jí)元素一樣往核。
- 可以被繼承:
font-family：規(guī)定元素的字體系列
font-weight：設(shè)置字體的粗細(xì)
font-size：設(shè)置字體的尺寸
font-style：定義字體的風(fēng)格
text-indent：文本縮進(jìn)
text-align：文本水平對(duì)齊
line-height：行高
word-spacing：增加或減少單詞間的空白（即字間隔）
letter-spacing：增加或減少字符間的空白（字符間距）
text-transform：控制文本大小寫
direction：規(guī)定文本的書寫方向
color：文本顏色
list-style: 列表樣式 - 不可以被繼承
display：規(guī)定元素應(yīng)該生成的框的類型
vertical-align：垂直文本對(duì)齊
text-decoration：規(guī)定添加到文本的裝飾
text-shadow：文本陰影效果
white-space：空白符的處理
盒模型屬性：width、height嚷节、margin 聂儒、margin-top虎锚、margin-right、margin-bottom衩婚、margin-left窜护、border、border-style非春、border-top-style柱徙、border-right-style、border-bottom-style奇昙、border-left-style护侮、border-width、border-top-width储耐、border-right-right羊初、border-bottom-width、border-left-width什湘、border-color凳忙、border-top-color、border-right-color禽炬、border-bottom-color涧卵、border-left-color、border-top腹尖、border-right柳恐、border-bottom、border-left热幔、padding乐设、padding-top、padding-right绎巨、padding-bottom近尚、padding-left
背景屬性：background、background-color场勤、background-image戈锻、background-repeat、background-position和媳、background-attachment
定位屬性：float格遭、clear、position留瞳、top拒迅、right、bottom、left璧微、min-width作箍、min-height、max-width前硫、max-height胞得、overflow、clip开瞭、z-index
如何讓塊級(jí)元素水平居中懒震？如何讓行內(nèi)元素水平居中?
塊元素水平居中設(shè)置 margin: 0 auto;
行內(nèi)元素水平居中 text-align: center;
用 CSS 實(shí)現(xiàn)一個(gè)三角形
小三角
.to{
width: 0;
height: 0;
border-top: 30px red solid;
border-right: 30px transparent solid;
border-bottom: 30px transparent solid;
border-left: 30px transparent solid;
}
大三角
.tri{
width: 0;
height: 0;
border-top: 30px red solid;
border-right: 30px red solid;
border-bottom: 30px transparent solid;
border-left: 30px transparent solid;
}
單行文本溢出加 ...如何實(shí)現(xiàn)?
white-space: nowrap; // 文本不折行
overflow: hidden; // 溢出隱藏
text-overflow: ellipsis; // 隱藏部分用 ...顯示
px, em, rem 有什么區(qū)別
px 固定像素
em 相對(duì)單位罩息，相對(duì)于父元素字體大小
rem 相對(duì)單位嗤详，相對(duì)于根元素（html）字體大小
解釋下面代碼的作用?為什么要加引號(hào)? 字體里\5b8b\4f53代表什么?
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
給body添加字體大小為12px行高是字體的1.5倍 ，順序查找本地電腦字體庫瓷炮，如果沒有則使用默認(rèn)字體葱色。
引號(hào)是因?yàn)橛⑽淖煮w中間有空格，不加引號(hào)可能導(dǎo)致瀏覽器不能實(shí)別字體產(chǎn)生亂碼娘香。
字體\5b8b\4f53 是用Unicode表示（宋體）字體 苍狰，為了避免直接寫中文可能會(huì)產(chǎn)生亂碼，保險(xiǎn)的方式就是將字體名稱用Unicode來表示烘绽。
