CSS 常見(jiàn)樣式
塊級(jí)元素和行內(nèi)元素
塊級(jí)元素
HTML（超文本標(biāo)記語(yǔ)言）中元素大多數(shù)都是“塊級(jí)”元素或行內(nèi)元素。塊級(jí)元素占據(jù)其父元素（容器）的整個(gè)空間，因此創(chuàng)建了一個(gè)“塊”。通常瀏覽器會(huì)在塊級(jí)元素前后另起一個(gè)新行。MDN
div，atricle，ol，ul, p, audio, footer, form, h1, h2, h3, h4, h5, h6, header, hr, video等。
行內(nèi)元素
一個(gè)行內(nèi)元素只占據(jù)它對(duì)應(yīng)標(biāo)簽的邊框所包含的空間。行內(nèi)元素
b, i, code, img, br, button, input, label, select, textarea, span, strong, em等
區(qū)別
一般情況下，行內(nèi)元素只能包含數(shù)據(jù)和其他行內(nèi)元素。
而塊級(jí)元素可以包含行內(nèi)元素和其他塊級(jí)元素。這種結(jié)構(gòu)上的包含繼承區(qū)別可以使塊級(jí)元素創(chuàng)建比行內(nèi)元素更”大型“的結(jié)構(gòu)。
格式
默認(rèn)情況下，行內(nèi)元素不會(huì)以新行開(kāi)始，而塊級(jí)元素會(huì)新起一行。
塊級(jí)元素會(huì)獨(dú)占一行，默認(rèn)情況下寬度自動(dòng)填滿其父元素寬度。
行內(nèi)：行內(nèi)元素不會(huì)獨(dú)占一行，相鄰的行內(nèi)元素會(huì)排在同一行。其寬度隨內(nèi)容的變化而變化。
行內(nèi)元素：
設(shè)置寬度width 無(wú)效。
設(shè)置高度height 無(wú)效，可以通過(guò)line-height來(lái)設(shè)置。
設(shè)置margin 只有左右margin有效，上下無(wú)效。
設(shè)置padding 只有左右padding有效，上下則無(wú)效。范圍是增大了，但是對(duì)元素周圍的內(nèi)容是沒(méi)影響的。
實(shí)例：
CSS 繼承
每個(gè) CSS 屬性定義 的概述都指出了這個(gè)屬性是默認(rèn)繼承的 ("Inherited: Yes") 還是默認(rèn)不繼承的 ("Inherited: no")。這決定了當(dāng)你沒(méi)有為元素的屬性指定值時(shí)該如何計(jì)算值。
當(dāng)元素的一個(gè) 繼承屬性 （inherited property ）沒(méi)有指定值時(shí)，則取父元素的同屬性的 計(jì)算值 computed value 。只有文檔根元素取該屬性的概述中給定的初始值（initial value）（這里的意思應(yīng)該是在該屬性本身的定義中的默認(rèn)值）。MDN
不可繼承的
盒模型-布局
margin, border, padding
width, max-width, min-width
height, max-height, min-height
定位
float, clear, overflow
position (top,right,bottom,left)
z-index
所有背景屬性
background (color,image,position)
文本屬性
vertical-align (垂直居中：行內(nèi)、替換元素)
text-decoration (文本屬性)
text-shadow (文本陰影)
white-space (對(duì)空白字符的處理)
unicode-bidi (css處理文本方向)
可繼承的
文本屬性
font(size,weight,family)
line-height
text-indent
text-align
word-spacing
letter-spacing
text-transform
direction(文字方向)
其他
color
cursor
水平居中
塊級(jí)元素
塊級(jí)元素 width 有值時(shí)
div{
margin: 0 auto;
}
否則塊級(jí)元素的寬度會(huì)被拉伸為父級(jí)容器的寬度
行內(nèi)元素
設(shè)置 element{text-align: center;}
CSS 實(shí)現(xiàn)三角形
div{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid colors;
}
文本溢出...實(shí)現(xiàn)
單行文本溢出：
text-overflow: ellipsis;
p {
white-space: nowrap; //不換行
overflow: hidden; //溢出隱藏
text-overflow: ellipsis; //溢出顯示...
}
px, em, rem
px像素（Pixel）。相對(duì)長(zhǎng)度單位。像素px是相對(duì)于顯示器屏幕分辨率而言的。
px 在縮放頁(yè)面時(shí)無(wú)法調(diào)整那些使用它作為單位的字體、按鈕等的大小。
em 的使用是相對(duì)于其父級(jí)的字體大小的，em的值并不是固定的。不建議使用。
rem 始終是基于根元素 html 的。建議使用。
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
body 字體大小為 12px ，line-height 為1.5 * 12px
后面就是 font-family , 通過(guò)給定一個(gè)有先后順序的，由字體名或者字體族名組成的列表來(lái)為選定的元素設(shè)置字體。 屬性的值用逗號(hào)隔開(kāi)。瀏覽器會(huì)選擇列表中第一個(gè)該計(jì)算機(jī)上有安裝的字體。
\5b8b\4f53 是宋體。
一般字體引用可以不加引號(hào)，如果字體名包含了空格、數(shù)字或者符號(hào)（如連接符）則需加上引號(hào)，避免引發(fā)錯(cuò)誤。
字體的選定不是在發(fā)現(xiàn)用戶計(jì)算機(jī)上安裝的列表中的第一個(gè)字體時(shí)停止。相反，對(duì)字體的選擇是逐字進(jìn)行的。也就是說(shuō)即使某個(gè)字符周圍都在某個(gè)字體中可以顯示，但該字符在當(dāng)前的字體文件中沒(méi)有適合的圖形，那么會(huì)繼續(xù)嘗試列表中靠后的字體。
MDN
一般都不使用中文名稱，而是使用英文名稱，主要是規(guī)避亂碼的風(fēng)險(xiǎn)。還有一些中文字體，直接使用中文名稱作為CSS font-family的屬性值是沒(méi)有效果的，如“思源黑體”， “蘭亭黑體”等，需要使用對(duì)應(yīng)的英文字體名稱才可以。張?chǎng)涡?/a>
