css佈局系列1——盒模型佈局
明確基本概念
網頁的佈局類似於在一個大盒子中擺放各不相同的小盒子。在佈局之前,首先要明確幾個概念:
1. 塊元素:在頁面中獨佔一行,高度預設被內容(子元素)撐開,寬度預設為父元素的100%,也即auto(width和height的預設值不是0,而是auto)。
2. 內聯(行內)元素:在頁面中不獨佔一行,只佔自身內容的大小,不能設定寬和高。
3. 文件流:網頁是一個多層結構,一層摞著一層。我們通過螢幕看到的網頁就是網頁的最頂部,而文件流是最底下的一層。塊元素和行內元素都擺放在文件流中(在不開啟浮動、絕對定位和固定定位的時候)。
盒模型
下圖很好的解釋了盒模型:
盒模型水平方向上的佈局
水平方向上的佈局必須要滿足等式:margin-left
border-left
+padding-left
+width
+padding-right
+border-right
+margin-right
=父元素內容區的寬度水平方向上的佈局必須滿足該等式。如果該等式不滿足,稱為過度約束。如果發生過度約束,等式將自動進行調整,調整規則為:
如果上述等式中屬性的屬性值中沒有為auto的,則預設調整margin-right的值以使等式成立。
【舉例】屬性值中沒有auto
.box1{ width:800px; height:100px; background-color: aqua; } .box2{ width:100px; height:100px; background-color: coral; margin-left:100px; }
如果上述等式中屬性的屬性值中有auto的,要分情況考慮:
【說明】以上屬性值可以為auto的屬性有三個:分別是margin-left,margin-right,width
1、如果有一個屬性值為auto的,則預設調整值為auto屬性的屬性值。
【舉例】margin-left為auto
.box1{ width:800px; height:100px; background-color: aqua; } .box2{ width:100px; height:100px; background-color: coral; margin-left:auto; /*margin-left調整為auto*/ margin-right:200px; }
2、如果有其中一個外邊距和width的屬性值為auto,則width的值調整至最大,外邊距的值調整為0 。
【舉例】margin-left和width調整為auto
.box1{
width:800px;
height:100px;
background-color: aqua;
}
.box2{
width:auto; /*寬度也調整至auto*/
height:100px;
background-color: coral;
margin-left:auto; /*margin-right調整至auto*/
margin-right:200px;
}
3、如果三個值都為auto,則將width的值調整為最大,將外邊距的值調整為0。
【舉例】margin-left,margin-right,width都為auto
.box1{
width:800px;
height:100px;
background-color: aqua;
}
.box2{
width:auto; /*寬度也調整至auto*/
height:100px;
background-color: coral;
margin-left:auto; /*margin-right調整至auto*/
margin-right:auto; /*margin-left調整至auto*/
}
4、如果width的值固定,兩個外邊距的值為auto,則調整margin-left和margin-right同樣的大小,使元素水平居中。 一般用來做元素水平居中的效果。
【舉例】寬度固定,外邊距為auto
.box1{
width:800px;
height:100px;
background-color: aqua;
}
.box2{
width:200px; /*寬度固定*/
height:100px;
background-color: coral;
margin-left:auto; /*margin-right調整至auto*/
margin-right:auto; /*margin-left調整至auto*/
}
盒模型垂直方向上的佈局
由於垂直方向上,父元素的高度預設被子元素撐開,所以垂直方向上的佈局並不複雜。
與盒模型佈局有關的三個屬性
1、overflow
在垂直方向上佈局,如果子元素的高度超過父元素的高度,子元素會溢位,overflow的作用就是用來設定父元素如何處理溢位的子元素。
可選值:
visiable:
預設值 子元素會從父元素中溢位,在父元素外部的位置顯示。hidden:
溢位的內容會被裁剪,不顯示。scroll:
生成兩個滾動條,通過滾動條來顯示完整內容。auto:
根據需要生成滾動條。
除此之外,還可以設定overflow-x
,overflow-y
。
2、visibility
visibility用來設定元素的顯示狀態。
可選值:
visible:
預設值,元素在頁面中正常顯示。hidden:
元素在頁面中隱藏不顯示,但是依然佔據頁面的位置。
3、display
display用來顯示元素顯示的型別。
可選值:
inline:
將元素設定為塊元素。block:
將元素設定為塊元素。inline-block:
行內塊元素,既不會獨佔一行,也可以設定寬和高。【小細節】如果兩個相鄰的行內塊元素,兩個塊元素中間會有一個空隙,是空格導致的,如果把兩個元素之間的所有空格刪掉,就不會有空隙了。儘量不使用這個值。table:
將元素設定為一個表格。none:
元素不在頁面中顯示。
注意:visibility:hidden
和display:none
的顯著區別
display:none和visibility:hidden,都能夠將元素隱藏。但是visibility:hidden隱藏的元素在頁面中仍佔據著位置,也就是說該元素後面的元素會給這個設定visibility:hidden的元素空出位置。而display:none隱藏的元素不會再佔據著頁面的位置。
使用重置樣式表(reset stylesheets)清除瀏覽器的預設樣式
通常情況下,瀏覽器都會自動為元素設定一些預設樣式,這些預設樣式會影響頁面的佈局。所以在編寫網頁的時候必須要去除瀏覽器的預設樣式(PC端的頁面)。
去除瀏覽器預設樣式需要在頁面中引入以.css結尾的重疊樣式表文件。
去除預設樣式的方法:這裡分享兩個適合學習時候用的。在工作中具體會不會用?用哪種?取決於公司。
- reset.css 2011年版本:直接去除了瀏覽器的預設樣式
- normalize.css 2018年版本:對瀏覽器的預設樣式進行了統一
兩種方式的具體區別點這裡。
【注意】在引入重置樣式表的時候,要在其他引入的css檔案之前和<style>
標籤之前引入重置樣式表!!!
程式設計小白一直在學習,一直在路上。寫文章的目的純粹為了總結個人所學,如有不妥之處,望大家批評指正,我將虛心接受。希望我的分享也能給看到這篇文章的你一點收穫。