3.前端CSS—盒子模型和浮動
目錄
一、CSS盒子模型
HTML文件中的每個元素都被描繪成矩形盒子，這些矩形盒子通過一個模型來描述其佔用空間，這個模型稱為盒子模型。
盒子模型通過四個邊界來描述：margin（外邊距），border（邊框），padding（內填充），content（內容區域），如圖所示：
<style>
div {
background-color: rgb(30, 33, 184);
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
</style>
顯示效果：紅色邊框實際是沒有的
1.1 content(內容區域)
盒子的內容，顯示文字和影象。CSS中的width和height屬性直接作用的區域。
width：指的是內容的寬度，而不是整個盒子真實的寬度。
height：指的是內容的高度，而不是整個盒子真實的高度。
1.2 padding(內填充)
padding即內邊距，padding的區域是有背景顏色的。且背景顏色和內容區域的顏色一致。
內邊距的距離：邊框到內容之間的距離。
1.padding有四個方向，所以能夠分別描述四個方向的padding。
2.padding描述方法分兩種：（1）小屬性；（2）綜合屬性（空格隔開）
小屬性設定——控制每個方向的寬度
/* 小屬性設定 控制每個方向上的寬度*/
padding-top: 30px;
padding-right: 30px;
padding-left: 30px;
padding-bottom: 30px;
綜合屬性設定——用空格隔開，順時針方向設定
/* 綜合屬性，用空格隔開 順時針方向 上右下左*/
padding: 20px 30px 40px 50px;
沒有設定四個值的時候
/*只設置了三個值：上 左右 下*/
padding: 20px 30px 40px;
/*只設置兩個值：上下 左右*/
padding: 35px 45px;
/*只設置一個值：上下左右*/
padding: 20px;
一般搭建網站要清除預設的padding，但是這樣寫效率低，可參考（css-reset 程式碼）
<style type="text/css">
*{
padding: 0;
margin: 0;
}
</style>
1.3 border(邊框)
border是邊框的意思，邊框有三要素：粗細、線性、顏色。
值 | 描述
none | 無邊框
dotted | 點狀虛線邊框
dashed | 矩形虛線邊框
solid | 實線邊框
三要素的特性：
border: 5px solid blue;
- 如果顏色不寫（blue），預設是黑色；
- 如果粗細不寫（5px），預設是不顯示的。
- 如果只寫了線性樣式（solid），預設上右下左（順時針）3px的寬度，預設是黑色
/*基礎3要素*/
border-width: 5px;
border-style: solid;
border-color: red;
/*3要素進階*/
border-width: 5px 10px; /* 上下：5px 左右：10px */
border-style: solid dotted dashed double ; /* 順時針：上:實線邊框 右:點狀虛線 下:矩狀虛線 左:雙線 */
border-color: red green red; /*上:紅 左右:綠 下:紅*/
按照方向設定border樣式
/*按照方向去分*/
/*上*/
border-top-width: 10px;
border-top-color: red;
border-top-style: solid;
/*右*/
border-right-width: 10px;
border-right-color: red;
border-right-style: solid;
/*下*/
border-bottom-width: 10px;
border-bottom-color: red;
border-bottom-style: solid;
/*左*/
border-left-width: 10px;
border-left-color: red;
border-left-style: solid;
按照方向設定可以設定
border-left: 10px solid red;
設定border樣式為空
/*清除border*/
border: none;
/*設定一邊的border沒有樣式*/
border-right: none;
border-top: 0;
1.4 margin(外邊距)
margin： 外邊距，指的是元素與元素之間的距離。
margin特性：
-
margin 的4個方向
-
margin會改變實際大小，背景色不會渲染到margin區域 這個區域會以空白顯示，但是也屬於盒子的一部分
-
margin是添自身的,如果哪個想要改變自己的位置，就給誰新增margin html的部分標籤自帶margin padding p body ul
margin垂直方向塌陷問題及解決：
兩個兄弟盒子設定垂直方向的margin時，以較大的margin值為準，這種現象稱為“塌陷”。
<head>
<meta charset="UTF-8">
<title>margin的塌陷</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box1{
width: 300px;
height: 200px;
background-color: red;
margin-bottom: 20px;
}
.box2{
width: 400px;
height: 300px;
background-color: green;
margin-top: 50px;
}
</style>
</head>
這裡的margin-bottom: 20px沒有起作用，只有下面的margin-top: 50px起作用了，上面的20只是嵌到了50中所以最終顯示效果就是50px。
解決：浮動的盒子垂直方向不會塌陷，可以解決margin塌陷問題.
<head>
<meta charset="UTF-8">
<title>margin的塌陷</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.father{
width: 400px;
overflow: hidden;
}
.box1{
width: 300px;
height: 200px;
background-color: red;
margin-bottom: 20px;
float: left;
}
.box2{
width: 400px;
height: 300px;
background-color: green;
margin-top: 50px;
float: left;
}
</style>
</head>
<body>
<div class="father">
<!--
浮動的盒子垂直方向不塌陷
-->
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
水平方向上的margin是不會塌陷的。
盒子的水平居中
/*水平居中盒子*/
margin: 0 auto;
/*水平居中另一種表示*/
margin-left: auto;
margin-right: auto;
二、塊級元素、行內元素和行內塊級元素的轉換關係
在css選擇器內，可以通過display屬性對塊級元素、行內元素、行內塊元素進行轉換，從而調整顯示效果。
display的功能：1.控制HTML元素的顯示和隱藏 2.塊級元素與行內元素的轉換。
2.1 display:inline 轉化為行內元素
通過display:inline將div這種塊級元素轉化為了行內元素，div內的內容在一行內顯示。
<style type="text/css">
.box1{
display: inline; /* 通過inline將塊級元素轉化為行內元素 */
width: 200px;
height: 40px;
border: 1px solid red;
}
<body>
<div class="box1">內容</div>
<div class="box1">內容</div>
</body>
2.2 display:block 轉化為塊級元素
<span>是行內元素，行內元素的特點就是元素的高度、寬度及邊距不可設定，display:block轉化為塊級元素後，span內的內容分行顯示，且高度、寬度設定生效。
<style type="text/css">
span{
background-color: yellow;
width: 100px; /* 給行內元素設定高度寬度是不起作用的 */
height: 40px;
display: block; /* block將行內元素轉化為塊級元素 */
}
<body>
<span>alex</span>
<span>alex</span>
</body>
2.3 display：inline-block 轉化為行內塊級元素
把<div>這個塊級元素轉化為了行內塊級元素。box1的元素都在一行上；元素的高度、寬度等都可設定。
<style type="text/css">
.box1{
display: inline-block; /* 通過inline-block將塊級元素轉化為行內塊級元素 */
width: 200px;
height: 40px;
border: 1px solid red;
}
</style>
<body>
<div class="box1">內容</div>
<div class="box1">內容</div>
<div class="box2">內容</div>
</body>
2.4 display:none 隱藏當前的標籤
display：none隱藏標籤不佔位置。在此需要注意和visibility:hidden進行區分。
img{
width: 300px;
height: 300px;
display:none; /* 隱藏當前的標籤 不佔位置 */
}
img{ /* 行內塊級元素，可以設定高度和寬度，也都在一行內展示 */
width: 300px;
height: 300px;
/*display: none; /* 隱藏當前的標籤 不佔位置 */ */
visibility:hidden; /* 隱藏當前的標籤 佔位置 */
}
三、浮動
3.1 浮動定義
將元素從普通的佈局排版中拿走，其他盒子在定位時會當作該元素不存在進行定位，可以理解為不在一個平面上，
3.2 浮動的作用
使元素脫離文件流，按照指定的方向發生移動，遇到父級的邊界或者相鄰的浮動元素就會停下來。
文件流：元素在排列的時候有預設開始位置以及他們所佔的區域。
浮動的目的：為了實現指定的佈局，讓指定元素定位在指定位置，並且可以設定浮動後的行級元素的寬高，最初的設計就是用來實現文字環繞。
浮動的副作用：會導致父級標籤塌陷的問題，
四、清除浮動
4.1 給父盒子設定高度
4.2 內牆法
在浮動元素最後加一個空的塊元素，且塊元素不浮動，設定其屬性為clear：both，以此來清除別人對我的浮動影響。
.clear{
clear: both;
}
4.3 偽元素清除法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.c1{
background-color: red;
height: 100px;
width:100px;
float: left;
}
.c2{
background-color:aqua;
height:100px;
width: 100px;
float: right;
}
.c3{
background-color:pink;
height:200px;
}
.cc{
/* height: 100px; */
}
.clearfix:after{
/*以下三句是必須要寫的*/
content:'';
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="cc clearfix">
<div class="c1"></div>
<div class="c2"></div>
</div>
<div class="c3"></div>
</body>
</html>
4.4 overflow:hidden
box是父級元素的屬性。
.box{
width: 400px;
overflow: hidden;
}
4.5 overflow溢位
overflow屬性規定當內容溢位元素框時發生的事情。
這個屬性定義溢位元素內容區的內容會如何處理。如果值為 scroll，使用者代理會提供一種滾動機制。可能導致元素放得下也會用滾動條。
<style type="text/css">
div{
width: 300px;
height: 300px;
border: 1px solid red;
overflow: auto; /* 內容變多時出現滾動條 */
}
</style>
| 名稱 | 描述 |
|---|---|
| visible | 預設值。內容不會被修剪，會呈現在元素框之外。 |
| hidden | 內容會被修剪，並且其餘內容是不可見的。 |
| scroll | 內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘的內容。 |
| auto | 如果內容被修剪，則瀏覽器會顯示滾動條以便檢視其餘的內容。 |
| inherit | 規定應該從父元素繼承 overflow 屬性的值。 |