W3C標(biāo)準(zhǔn)
- 結(jié)構(gòu)化標(biāo)準(zhǔn)語言
HTML/XML - 表現(xiàn)標(biāo)準(zhǔn)語言
CSS - 行為標(biāo)準(zhǔn)語言
DOM/JavaScript
盒子模型
盒子模型
盒子3D模型
盒子模型尺寸
布局類型
CSS定位規(guī)則
- 標(biāo)準(zhǔn)文檔流(normal flow)
塊級元素/行級元素 - 浮動
- 絕對定位
布局
- 自動居中布局
{
width: ***;
margin:auto;
}
浮動布局
?塊級元素橫向布局
?float：
??1.元素會左移或右移，直到觸碰到容器。
??2.設(shè)置了浮動的元素，仍舊處于標(biāo)準(zhǔn)文檔流。
??3.元素設(shè)置了浮動而沒有設(shè)置寬度時，元素的寬度會隨著內(nèi)容的變化而變化。
??4.元素設(shè)置浮動后會對緊隨其后的元素造成影響，也會對父包含塊造成影響。
?清除float：
??1.clear:both/clear:left/clear:right(緊鄰其后的元素)
??2.width:100%(或固定寬度) + overflow:hidden絕對定位布局
?1.靜態(tài)定位
?2.相對定位
??特點：1.相對于自身原有位置進行偏移 2.仍處于標(biāo)準(zhǔn)文檔流中 3.隨即擁有偏移屬性和z-index屬性
?3.絕對定位
??特定：1.建立以包含塊為基準(zhǔn)的定位 2.完全脫離了標(biāo)準(zhǔn)文檔流 3.隨即擁有偏移屬性和z-index屬性
??未設(shè)置偏移量時：1.無論是否存在已定位祖先元素，都保持在元素初始位置 2.脫離標(biāo)準(zhǔn)文檔流 3.元素寬度未設(shè)定時，寬度隨內(nèi)容變化
??設(shè)置偏移量時：
???偏移基準(zhǔn)：1.無已定位祖先元素，以<html>為偏移參照 2.有已定位祖先元素時，以距其最近的已定位祖先元素為偏移參照基準(zhǔn)
?position屬性:
??static/relative/absolute/fixed
