CSS盒模型、內間距和外間距
阿新 • • 發佈:2018-12-21
盒模型
所有的元素都是在頁面中顯示成一個方塊,類似一個盒子
把元素叫做盒子,設定對應的樣式分別為:盒子的邊框(border),盒子中的內容與盒子邊框之間的間距(內間距),盒子與盒子之間的間距(外間距)
盒子的實際大小是:
盒子的寬度 = 內容寬度 + 左右邊框 + 左右內邊距(padding)
盒子的高度 = 內容高度 + 上下邊框 + 上下內邊距(padding)
如果要增加內邊距和邊框的大小,又不想改變盒子的大小,可以使用:
box-sizing: border-box;
塊級元素,行內元素,行內-塊元素
塊級元素的特點:
<!--塊級元素獨佔一行。 如果不設定寬度,那麼它的預設寬度是父級元素的寬度。 支援所有的樣式。--> .box1{ width: 100px; height: 100px; background: green; margin: 20px; padding: 20px; }
行內元素:
<!--行內元素不獨佔一行。
行內元素不支援設定寬高,寬高是由內容撐開的。
程式碼換行,盒子會產生間距。
盒子都是並行在一行的。
只可以設定左右margin值。
padding四周都可以設定。
子元素是行內元素的,父元素可以設定text-align和line-height設定水平和垂直居中
-->
.span1{
background: deeppink;
font-size: 50px;
}
行內塊元素
<!--支援塊元素的全部樣式,也有行內元素的特性 如果沒有設定寬高,寬高由內容決定 程式碼換行,盒子會產生間距 子元素是行內塊元素的話,父元素可以設定text-align和line-height設定水平和垂直居中-->
display用來設定元素以什麼型別顯示
常用的屬性值有: none: 元素隱藏且不佔位置 line: 以行內元素顯示 block:以塊元素顯示 inline-block:以行內塊元素顯示 .box{ width: 100px; height: 100px; <!--元素以行內元素顯示--> display: line; <!--元素以塊元素顯示--> display: block; <!--元素以行內塊元素顯示--> display: inline-block; <!--讓元素隱藏,並且隱藏元素不會再佔位--> display: none; }
CSS內邊距padding
<!--設定元素的內邊距(padding),讓內容和元素邊框(border)有一定的距離-->
.odiv1{
width: 200px;
height: 200px;
background: red;
<!--在使用padding的時候,會改變元素本來的大小。如果只設置一個值,那麼他會同時改變上下左右的內邊距-->
padding: 20px;
}
<div class="odiv1"> 文字內容 </div>
CSS外邊距margin
<!--設定元素的外邊距,是讓當前元素和四周的元素產生距離,預設各元素的外邊距是0,即兩個div是貼合在一起的-->
div{
width: 200px;
height: 200px;
}
.box1{
background: red;
<!--設定元素box1的下外邊距,讓box1的下方和box2的上方有20px的距離-->
margin-bottom: 20px;
<!--如果設定兩個值得話,那麼第一個值代表上下,第二個值代表左右,padding同理-->
//margin-bottom: 20px 50px;
<!--用外邊距設定元素水平居中,不能垂直居中-->
//margin: auto;
<!--margin還可以設定負值,使當前元素和另一元素邊框合併,或者覆蓋另一元素-->
//margin-top: -100px;
}
.box2{
background: blue;
}
<div class="box1"><div>
<div class="box2"></div>