縮寫
Margin元素和Padding元素的縮寫方法进统。
值遵從上右下左的順時針順序來縮寫狰右。
E.G.
padding-top: 20px;
padding-right: 30px;
padding-bottom: 20px;
padding-left: 30px;
簡寫為：padding: 0px 20px 30px 10px;
或者 padding: 20px(上下)30px（左右）;背景縮寫
background-color: white;
background-image: url(image/1.gif);
background-repeat: repeat-x;
簡寫為
background: white url(image/1.gif) repeat-x;
Margin外邊距
1.兩個塊之間,上下的外邊距會被疊加
2.父子級包含的情況下,子級塊的margin-top會傳遞給父級
縮寫: margin: top right bottom left;
font
- size最小為12px，并盡量保證數(shù)值為偶數(shù)析孽。
- family 中文默認(rèn)為宋體
塊元素的特點
每個塊級元素都從新的一行開始穆役，并且其后的元素也另起一行胡桃。
元素的高度食绿、寬度侈咕、行高以及頂和底邊距都可設(shè)置。
元素寬度在不設(shè)置的情況下器紧，是它本身父容器的100%（和父元素的寬度一致）耀销，除非設(shè)定一個寬度。
行內(nèi)元素（內(nèi)聯(lián)元素）的特點
- 和其他行內(nèi)元素都在一行上铲汪；
- 元素的高度熊尉、寬度及頂部和底部邊距不可設(shè)置；
- 元素的寬度就是它包含的文字或圖片的寬度掌腰，不可改變狰住。
display： inline-block的特性
- 可以使塊元素在一行內(nèi)顯示。
- 可以使行內(nèi)元素支持寬高設(shè)置齿梁。
- 換行被解析（換行的空格會占據(jù)寬度）
- 不設(shè)置寬度的時候催植，其寬度由內(nèi)容撐開（行內(nèi)元素特性）
float的特性
- 可以使塊元素在一行內(nèi)顯示
- 可以使行內(nèi)元素支持寬高
- 換行不被解析
- 不設(shè)置寬度的時候，其寬度由內(nèi)容撐開（行內(nèi)元素特性）
- 會讓元素脫離文檔流 飄在文檔流上方
- 但是文檔流的文字不會被浮動元素所遮擋
元素加了浮動之后士飒，會脫離文檔流查邢，按照指定方向移動，直到碰到一個父級元素的邊界或者另一個浮動為止酵幕。
清浮動
- 給父級元素也加浮動（缺點扰藕，父級無法居中，且父級也脫離文檔流芳撒，若父級上面還有父級會造成更多麻煩）
- 給父級增加display：inline-block（缺點邓深，無法居中，但不脫離文檔流）
- 在浮動元素下方增加一個空的div并設(shè)置以下樣式（缺點笔刹，丑芥备，影響html的可讀性）
div{ height: 0px; font-size: 0px; clear: both; } - 在浮動元素下方增加換行，并增加clear屬性<br clear=“all”/ >(但不符合W3C標(biāo)準(zhǔn))
W3C標(biāo)準(zhǔn)：結(jié)構(gòu)舌菜、樣式萌壳、行為，三者必須分離 - 使用偽元素：after
div:after{ content: ""; display: block; clear: both; } - 兼容ie6日月、7的設(shè)置
1.給父級元素設(shè)置
div:after{ zoom: 1; }
2.使用偽元素：after
div:after{ content: ""; display: block; clear: both; } - 給浮動元素的父級增加overflow： hidden袱瓮；（由于ie6、7的兼容性爱咬，最好配合使用zoom: 1;）
文字不折行且溢出部分省略的代碼
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
