14-CSS基礎-盒模型
14-CSS基礎-盒模型
盒模型
邊框屬性
- 什麼邊框?
- 邊框就是環繞在標籤寬度和高度周圍的線條
- 邊框屬性的格式
- 連寫(同時設定四條邊)
- border: 邊框的寬度 邊框的樣式 邊框的顏色;
- 示例程式碼
<style>
.box{
width: 100px;
height
background-color: red;
border: 5px solid blue;
/*border: 5px solid;*/
/*border: 5px blue;*/
/*border: solid blue;*/
}
</style>
- 快捷鍵:
- bd+ border: 1px solid #000;
- 注意點:
- 連寫格式中顏色屬性可以省略, 省略之後預設就是黑色
- 連寫格式中樣式不能省略, 省略之後就看不到邊框了
- 連寫格式中寬度可以省略, 省略之後還是可以看到邊框
- 按方向連寫(分別設定四條邊)
- border-top: 邊框的寬度 邊框的樣式 邊框的顏色;
- border-right: 邊框的寬度 邊框的樣式 邊框的顏色;
- border-bottom: 邊框的寬度 邊框的樣式 邊框的顏色;
- border-left: 邊框的寬度 邊框的樣式 邊框的顏色;
- 示例程式碼
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
border-top:5px solid blue;
border-right:10px dashed green;
border-bottom:15px dotted purple;
border-left:20px double pink;
}
</style>
- 快捷鍵:
- bt+ border-top: 1px solid #000;
- br+ border-right: 1px solid #000;
- bb+ border-bottom: 1px solid #000;
- bl+ border-left: 1px solid #000;
- 按要素連寫(分別設定四條邊)
- border-width: 上 右 下 左;
- border-style: 上 右 下 左;
- border-color: 上 右 下 左;
- 示例程式碼
<style>
.box{
width: 500px;
height: 500px;
background-color: red;
border-width: 5px 10px 15px 20px;
border-style: solid dashed dotted double;
border-color: blue green purple pink;
/*border-color: blue green purple;*/
/*border-color: blue green;*/
/*border-color: blue;*/
}
</style>
- 注意點:
- 這三個屬性的取值是按照順時針來賦值, 也就是按照上右下左來賦值, 而不是按照日常生活中的上下左右
- 這三個屬性的取值省略時的規律
- 上 右 下 左 > 上 右 下 > 左邊的取值和右邊的一樣
- 上 右 下 左 > 上 右 > 左邊的取值和右邊的一樣 下邊的取值和上邊一樣
- 上 右 下 左 > 上 > 右下左邊取值和上邊一樣
- 非連寫(方向+要素)
- border-top-width: ;
- border-top-style:;
- border-top-color:;
- border-right-width:;
- border-right-style:;
- border-right-color:;
- border-bottom-width:;
- border-bottom-style: ;
- border-bottom-color:;
- border-left-width:;
- border-left-style:;
- border-left-color:;
- 示例程式碼
<style>
.box{
width: 500px;
height: 500px;
background-color: red;
border-top-width: 5px;
border-top-style: solid;
border-top-color: blue;
border-right-width: 10px;
border-right-style: dashed;
border-right-color: green;
border-bottom-width: 15px;
border-bottom-style: dotted;
border-bottom-color: purple;
border-left-width: 20px;
border-left-style: double;
border-left-color: pink;
}
</style>
- 注意點:
- 同一個選擇器中如果設定了多個邊框屬性, 後面的會覆蓋前面的
.box3{
border: 5px solid red;
border-right:5px dashed red;
}
內邊距屬性
- 什麼是內邊距?
邊框和內容之間的距離就是內邊距 - 格式
- 單獨設定四條邊
- padding-top: ;
- padding-right: ;
- padding-bottom: ;
- padding-left: ;
- 示例程式碼
<style>
div{
width: 98px;
height: 90px;
border: 1px solid #000;
background-color: red;
}
.box1{
padding-top: 20px;
padding-right:40px;
padding-bottom:80px;
padding-left:160px;
}
</style>
- 同時設定四條邊
- padding: 上 右 下 左;
- 示例程式碼
<style>
div{
width: 98px;
height: 90px;
border: 1px solid #000;
background-color: red;
}
.box1{
/*padding:20px 40px 80px 160px;*/
/*padding:20px 40px 80px;*/
/*padding:20px 40px;*/
padding:20px;
}
</style>
- 注意點:
- 這三個屬性的取值省略時的規律
- 上 右 下 左 > 上 右 下 > 左邊的取值和右邊的一樣
- 上 右 下 左 > 上 右 > 左邊的取值和右邊的一樣 下邊的取值和上邊一樣
- 上 右 下 左 > 上 > 右下左邊取值和上邊一樣
- 給標籤設定內邊距之後, 標籤佔有的寬度和高度會發生變化
- 給標籤設定內邊距之後, 內邊距也會有背景顏色
外邊距屬性
- 什麼是外邊距?
- 標籤和標籤之間的距離就是外邊距
- 格式
- 單獨設定四條邊
- margin-top: ;
- margin-right: ;
- margin-bottom: ;
- margin-left: ;
- 示例程式碼
<style>
.box1{
margin-top:20px;
margin-right:40px;
margin-bottom:80px;
margin-left:160px;
}
</style>
- 同時設定四條邊
- margin: 上 右 下 左;
- 示例程式碼
<style>
.box1{
margin:20px 40px 80px 160px;
/*margin:20px 40px 80px;*/
/*margin:20px 40px;*/
/*margin:20px;*/
}
</style>
- 注意點:
- 這三個屬性的取值省略時的規律
- 上 右 下 左 > 上 右 下 > 左邊的取值和右邊的一樣
- 上 右 下 左 > 上 右 > 左邊的取值和右邊的一樣 下邊的取值和上邊一樣
- 上 右 下 左 > 上 > 右下左邊取值和上邊一樣
- 外邊距的那一部分是沒有背景顏色的
- 外邊距合併現象
- 預設佈局的垂直方向上外邊距是不會疊加的, 會出現合併現象, 誰的外邊距比較大就聽誰的
- 示例程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外邊距合併現象</title>
<style>
span{
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid #000;
}
div{
height: 100px;
border: 1px solid #000;
}
.hezi1{
margin-right:50px;
}
.hezi2{
margin-left:100px;
}
.box1{
margin-bottom:50px;
}
.box2{
margin-top:100px;
}
</style>
</head>
<body>
<span class="hezi1">我是span</span><span class="hezi2">我是span</span>
<div class="box1">我是div</div>
<div class="box2">我是div</div>
</body>
</html>
- margin-top問題
- 如果兩個盒子是巢狀關係, 那麼設定了裡面一個盒子頂部的外邊距, 外面一個盒子也會被頂下來
- 如果外面的盒子不想被一起定下來,那麼可以給外面的盒子新增一個邊框屬性
- 在企業開發中, 一般情況下如果需要控制巢狀關係盒子之間的距離, 應該首先考慮padding, 其次再考慮margin(margin本質上是用於控制兄弟關係之間的間隙的)
- 示例程式碼
<style>
.big{
width: 500px;
height: 500px;
background-color: red;
/*不設定邊框, big也會被small的頂部外邊距頂下去*/
border: 5px solid #000;
}
.small{
width: 200px;
height: 200px;
background-color: blue;
margin-top:150px;
margin-left:150px;
}
</style>
- text-align:center;和margin:0 auto;區別
- text-align: center; 是設定盒子中儲存的文字/圖片水平居中
- margin:0 auto;是讓盒子自己水平居中
- 示例程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>53-盒子居中和內容居中</title>
<style>
.father{
width: 800px;
height: 500px;
background-color: red;
/*文字圖片會居中*/
/*text-align: center;*/
/*盒子自身會居中*/
margin:0 auto;
}
.son{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="father">
我是文字<br/>
<div class="son"></div>
</div>
</body>
</html>
盒模型
- 什麼是CSS盒模型?
- CSS盒模型僅僅是一個形象的比喻, HTML中的標籤都是盒模型
- CSS盒模型指那些可以設定寬度高度/內邊距/邊框/外邊距的標籤
- 這些屬性我們可以用日常生活中的常見事物——盒子作一個比喻來理解，所以HTML標籤又叫做盒模型
- 示例程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>48-CSS盒子模型</title>
<style>
span,a,b,strong{
display: inline-block;
width: 100px;
height: 100px;
border: 6px solid #000;
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<span>我是span</span>
<a href="#">我是超連結</a>
<b>我是加粗</b>
<strong>我是強調</strong>
</body>
</html>
- 盒模型寬度和高度
- 內容的寬度和高度
- 就是通過width/height屬性設定的寬度和高度
- 元素的寬度和高度
- 寬度 = 左邊框 + 左內邊距 + width + 右內邊距 + 右邊框
- 高度 同理可證
- 規律
- 增加了padding/border之後元素的寬高也會發生變化
- 如果增加了padding/border之後還想保持元素的寬高, 那麼就必須減去內容的寬高 - 元素空間的寬度和高度
- 寬度 = 左外邊距 + 左邊框 + 左內邊距 + width + 右內邊距 + 右邊框 + 右外邊距
- 高度 同理可證
box-sizing屬性
- CSS3中新增了一個box-sizing屬性, 這個屬性可以保證我們給盒子新增padding和border之後, 盒子元素的寬度和高度不變
- box-sizing取值
- content-box
- 元素的寬高 = 邊框 + 內邊距 + 內容寬高
- border-box
- 元素的寬高 = width/height的寬高
- 增加padding和border之後要想保證盒子元素的寬高不變, 系統會自動減去一部分內容的寬度和高度
- 示例程式碼
<!--增加padding/border之後元素寬高會變大-->
<style>
.box1{
width: 200px;
height: 200px;
background-color: blue;
float: right;
border: 20px solid #000;
padding: 20px;
}
</style>
<!--增加padding/border之後元素寬不會變大-->
<style>
.box1{
box-sizing: border-box;
width: 200px;
height: 200px;
background-color: blue;
float: right;
border: 20px solid #000;
padding: 20px;
}
</style>