目錄
- 一、盒子模型的幾個關鍵詞
- 二、盒子有尺寸，用CSS寫法為寬度（width）和高度（height）
- 三、盒子有邊框，用CSS寫法為上下左右邊框（border）
- 3.1邊框線型 border-style
- 3.2邊框顏色
- 3.3邊框的復合屬性
- 3.4單獨控制上下左右邊框
- 3.4.1上邊框 border-top
- 3.4.2下邊框 border-bottom
- 3.4.3左邊框border-left
- 3.4.4右邊框border-right
- 四、盒子有內邊距，用CSS寫法為上下左右內邊距（padding）
- 4.1padding的復合屬性
- 4.2單獨控制上下左右邊框
- 4.2.1上邊內邊距 padding-top
- 4.2.2底邊內邊距 padding-bottom
- 4.2.3左邊內邊距 padding-left
- 4.2.4右邊內邊距 padding-right
- 五、盒子有外邊距，用CSS寫法為外邊距（margin）
- 5.1margin的復合屬性
- 5.2單獨控制上下左右邊框
- 5.2.1上邊外邊距 margin-top
- 5.2.2下邊外邊距 margin-bottom
- 5.2.3左邊外邊距 margin-left
- 5.2.4左邊外邊距 margin-left
- 六、盒子模型實體
- 七、如何隱藏一個元素
一、盒子模型的幾個關鍵詞
內容(content)、填充(padding通俗講就是內邊距)、邊框(border)、邊界(margin通俗講就是外邊距)，
用圖片來演示一下
簡單用畫圖工具演示一下就是
二、盒子有尺寸，用CSS寫法為寬度（width）和高度（height）
定義盒子的寬度和高度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1{
width: 200px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="box1">
Hello, I am box1
</div>
</body>
</html>
運行結果
注意：只有塊元素才可以設定寬度和高度，行內元素無法設定寬度和高度，
三、盒子有邊框，用CSS寫法為上下左右邊框（border）
3.1邊框線型 border-style
引數：
none : 無邊框 dotted : 點線邊框 dashed : 虛線邊框 solid : 實線邊框 double : 雙線邊框
3.2邊框顏色
檢索或設定物件的邊框顏色，
語法：
border-color : color
3.3邊框的復合屬性
語法：
border : border-style||border-width|| border-color
例如我要設定 p標簽的邊框為： 線型實線 ， 寬度20px ， 顏色為紅色
p { border: solid 20px red; }
3.4單獨控制上下左右邊框
3.4.1上邊框 border-top
檢索或設定物件的上邊框，這是一個復合屬性，
語法：
border-top: border-style||border-width||border-color
例如我要設定 p標簽的上邊框為： 線型實線 ，寬度20px ， 顏色為紅色，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1{
width: 200px;
height: 100px;
border-top: solid 20px red;
}
</style>
</head>
<body>
<div id="box1">
Hello, I am box1
</div>
</body>
</html>
運行效果
3.4.2下邊框 border-bottom
檢索或設定物件的下邊框，這是一個復合屬性，
語法：
border-bottom :border-style||border-width||border-color
比如我要設定 p標簽的下邊框為： 寬度2px ， 線型實線 ， 顏色為紅色 ，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1{
width: 200px;
height: 100px;
border-bottom: 20px solid red;
}
</style>
</head>
<body>
<div id="box1">
Hello, I am box1
</div>
</body>
</html>
運行效果
3.4.3左邊框border-left
3.4.4右邊框border-right
左邊框 border-left、右邊框 border-right同上
四、盒子有內邊距，用CSS寫法為上下左右內邊距（padding）
4.1padding的復合屬性
檢索或設定物件四邊的內邊距，換句話說，也就是邊框與內容之間的距離，
語法：
padding :length
例如我要邊框與內容之間的距離為50px
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1{
width: 200px;
height: 100px;
border: 20px solid red;
padding: 50px;
}
</style>
</head>
<body>
<div id="box1">
Hello, I am box1
</div>
</body>
</html>
運行效果
注意：
如果只提供一個，將用于全部的四條邊，
如果提供兩個，第一個用于上－下，第二個用于左－右，
如果提供三個，第一個用于上，第二個用于左－右，第三個用于下，
如果提供全部四個引數值，將按上－右－下－左的順序作用于四邊，
4.2單獨控制上下左右邊框
4.2.1上邊內邊距 padding-top
檢索或設定物件的上邊內邊距，
語法：
padding-top :length
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1{
width: 200px;
height: 300px;
border: solid 20px red;
padding-top: 100px;
}
</style>
</head>
<body>
<div id="box1">
Hello, my padding-top is 50px
</div>
</body>
</html>
運行結果
4.2.2底邊內邊距 padding-bottom
檢索或設定物件的下邊內邊距，
語法：
padding-right:length
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1{
width: 200px;
height: 200px;
border: solid 20px red;
padding-bottom: 100px;
}
</style>
</head>
<body>
<div id="box1">
Hello, my padding-bottom is 100px
Hello, my padding-bottom is 100px
Hello, my padding-bottom is 100px
Hello, my padding-bottom is 100px
Hello, my padding-bottom is 100px
Hello, my padding-bottom is 100px
</div>
</body>
</html>
運行結果
4.2.3左邊內邊距 padding-left
4.2.4右邊內邊距 padding-right
左邊內邊距padding-left、右邊內邊距padding-right同上
五、盒子有外邊距，用CSS寫法為外邊距（margin）
5.1margin的復合屬性
檢索或設定物件四邊的外邊距，
語法：
margin:length
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1{
width: 350px;
height: 200px;
border: solid 20px red;
padding: 2px;
margin: 50px;
}
</style>
</head>
<body>
<div id="box1">
I didn't say anything. I just walked away.
You're the light, you're the night
You're the color of my blood
You're the cure, you're the pain
You're the only thing I wanna touch
Never knew that it could mean so much, so much
You're the fear, I don't care
'Cause I've never been so high
Follow me to the dark
Let me take you past our satellites
</div>
</body>
</html>
運行結果
注意：
如果只提供一個，將用于全部的四條邊，
如果提供兩個，第一個用于上－下，第二個用于左－右，
如果提供三個，第一個用于上，第二個用于左－右，第三個用于下，
如果提供全部四個引數值，將按上－右－下－左的順序作用于四邊，
外邊距在不同瀏覽器的效果會有很大不同，建議盡量少用，
5.2單獨控制上下左右邊框
5.2.1上邊外邊距 margin-top
檢索或設定物件的上邊外邊距，
語法：
margin-top :length
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1{
width: 350px;
height: 200px;
border: solid 20px red;
padding: 2px;
margin-top: 50px;
}
</style>
</head>
<body>
<div id="box1">
I didn't say anything. I just walked away.
You're the light, you're the night
You're the color of my blood
You're the cure, you're the pain
You're the only thing I wanna touch
Never knew that it could mean so much, so much
You're the fear, I don't care
'Cause I've never been so high
Follow me to the dark
Let me take you past our satellites
</div>
</body>
</html>
運行結果
5.2.2下邊外邊距 margin-bottom
檢索或設定物件的下邊外邊距，
語法：
margin-bottom :length
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1{
width: 350px;
height: 200px;
border: solid 20px red;
padding: 2px;
margin-bottom: 50px;
}
#box2{
width: 350px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id="box1">
I didn't say anything. I just walked away.
You're the light, you're the night
You're the color of my blood
You're the cure, you're the pain
You're the only thing I wanna touch
Never knew that it could mean so much, so much
You're the fear, I don't care
'Cause I've never been so high
Follow me to the dark
Let me take you past our satellites
</div>
<div id="box2">
</div>
</body>
</html>
運行結果
5.2.3左邊外邊距 margin-left
5.2.4左邊外邊距 margin-left
左邊外邊距 margin-left、左邊外邊距 margin-left同上
六、盒子模型實體
要把頁面布局好，需要注意：
- 頁面由很多個盒子，從上往下堆積，外層的這些盒子是獨立的，
- 我們布局的時候，外層的盒子最好不要設定浮動，也不要設定為絕對定位，
- 盒子一般不設定高度，它的高度一般由內容來撐高，
- 每個外層的盒子需要設定寬度（這個寬度叫版心），并且要將這些盒子在水平方向居中，
- 把每個模塊外層的容器設定為相對定位，可以作為里面每個元素定位的參考，
- 把外層容器設定為相對定位之后，它也不會脫離標準流，不會影響布局，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wrapper{
background-color: green;
width: 1200px;
margin: 0 auto;
margin-bottom: 4px;
}
#box1{
width: 200px;
height: 300px;
border:solid 20px red;
padding-left: 100px;
}
#box2{
width:100px;
height: 100px;
background-color: seagreen;
cursor: move;
/* display: none; *//*元素隱藏后，不占位置*/
/*visibility: hidden;*/ /*這種隱藏也會占著位置*/
/*opacity: 0;*/ /*通過設定不透明度去隱藏一個元素，元素隱藏后，位置還占著*/
}
#box3{
width:100px;
height: 100px;
background-color:darkgoldenrod;
cursor: move;
}
</style>
</head>
<body>
<div class="wrapper">
1
</div>
<div class="wrapper">
2
</div>
<div class="wrapper">
3
</div>
<div class="wrapper">
4
</div>
<div class="wrapper">
5
</div>
<div class="wrapper">
6
</div>
<div id="box1">
<div id="box2"></div>
<div id="box3"></div>
</div>
</body>
</html>
附加：如何隱藏一個元素？
七、如何隱藏一個元素
看上面的代碼和注釋就知道了！把注釋去掉，拿去運行運行！希望可以幫到你哈哈哈
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/159560.html
標籤：AI
上一篇：復制虛擬機的網卡配置的3種方式
下一篇：前端基礎演算法題解法