CSS中將每一個元素都設置為了一個矩形的盒子,便于方便的頁面布局。
盒子的組成部分
- 內容區,內邊距,邊框,外邊距。
邊框必須指定的三個樣式
- border-width:邊框的寬度;
- 如果指定了4個值,會分別設置給:上,右,下,左。(順時針方向)
- 三個值:上,左右,下;
- 兩個值:上下,左右;
- 另外兩個樣式同理。
- border-color:邊框的顏色;
- border-style:邊框的樣式;
大部分瀏覽器中,邊框寬度 和 顏色都有默認值,而邊框的樣式默認值都為none;
使用border設置邊框
同時設置4個邊框
不區分 樣式,顏色,寬度 的順序。
可以使用border-top:,border-right:,border-bottom:,border-left:;分別設置四個邊框。
內邊距(padding),指的是盒子的內容區與盒子邊框之間的距離。
內邊距會影響盒子的可見框大小,元素的背景會延伸到內邊距。
一共有四個方向的內邊距,可以通過:
- padding-top
- padding-right
- padding-bottom
- padding-left
來設置四個方向的內邊距
盒子的大小由 內容區,內邊距和邊框共同決定。
使用padding可以同時設置四個邊框的樣式,規則和border一致。
外邊距指的是當前盒子與其它盒子之間的距離。
它不會影響可見框大小,會影響盒子的位置。四個外邊距:
- margin-top
- margin-right
- margin_bottom
- margin_left
上外邊距,左外邊距 改變自己位置。(向左向上看齊)
下外邊距,右外邊距 改變別人位置。外邊距可以為 負值,使元素反方向移動。
margin還可以設置為auto:
- 單獨設置左,右為auto時為最大值;
- 同時設置左右為auto時水平居中。
- 垂直方向設置為auto,外邊距默認為0;(一般不用垂直方向)
相鄰的垂直外邊距的重疊
垂直方向的,相鄰,外邊距,重疊。(即取較大值,而非取和)父子元素的垂直外邊距相鄰時,子元素的外邊距會給父元素。
解決方法:
- 使其不相鄰:加邊框,內邊距。
- 直接使用父元素內邊距調整位置(父元素本身形狀會受影響)
瀏覽器的默認樣式
瀏覽器為了在頁面中沒有樣式時,也可以有一個比較好的顯示效果,
所以為很多的元素都設置了一些默認的margin和padding,
而它這些默認樣式,正常情況我們是不需要使用的。
往往在編寫樣式之前需要將瀏覽器中的默認的margin和padding統統去掉。
*{
margin:0;
padding:0;
}
內聯元素垂直padding不會影響布局,只會單純調整大小,相鄰的直接覆蓋。
文檔流
一個文檔就是網頁。(網頁即html文檔)
網頁是多層結構,文檔流就是最下面那層的地基。
塊元素 只有在文檔流中才會獨占一行(自上向下排列)。
當元素的高度或寬度的值為auto時,此時指定內邊距不會影響可見框的大小,而是會自動修改寬度,以適應內邊距。(高度被內容撐開)