CSS網頁布局
阿新 • • 發佈:2017-09-20
分類 布局 文檔流 hidden font inline code left overflow
一.主要內容
1.布局分類;131 121
2.display屬性排版
3.float屬性排版(橫向多列布局)
4.防止父類盒子塌陷
二.標準文檔流:
a>組成
塊級元素(block)
內聯元素(inline)
b>display屬性值:block、inline、inline-block、none。
值block:將元素設置為塊狀元素
值inline:將元素設置為行內元素
值inline-block:擁有兩種特性。
補充: visibility:hidden; 屬性和 display:none; 屬性相似。
c>folat屬性值:left、right、none.
值left:左浮動
值right:右浮動
值none:不浮動
d>clear屬性值:left、right、both、none。
值left:左側不允許出現float
值right:右側不允許出現float
值both:兩側不允許出現float
值none:(默認)允許出現float
e>防止父類塌陷
1)浮動元素後面加空div
2)設置父元素的高度
3)父級添加overflow(溢出)屬性
值visible:默認值,內容不會被修剪,會呈現在盒子之外。
值hiddle:內容會被修剪,並且其余內容是不可見的。
值scroll:內容會被修剪,但是瀏覽器會顯示滾動條以便查看其余內容。
值auto:如果內容被修剪,則瀏覽器會顯示滾動條以便查看其余的內容。
#father{verflow:hidden;border:1px #000 solid;}
4)父級添加偽類after
.fathter:after{
content:‘ ‘; /*在clear類後面添加內容為空*/
display:block; /*把添加的內容轉化為塊元素*/
clear:both; /*清除這個元素兩邊的浮動*/
}
CSS網頁布局