1. 盒子模型
1.1 盒子模型簡介
1.1.1 概述
- Margin(外邊距)
清除邊框外的區(qū)域甸各，外邊距是透明的。 - Border(邊框)
圍繞在內(nèi)邊距和內(nèi)容外的邊框焰坪。 - Padding(內(nèi)邊距)
清除內(nèi)容周圍的區(qū)域趣倾，內(nèi)邊距是透明的。 - Content(內(nèi)容)
盒子的內(nèi)容某饰，顯示文本和圖像儒恋。
示意圖：
[圖片上傳失敗...(image-3d161-1655303476642)]
1.1.2 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蜀</title>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
</style>
</head>
<body>
<h2 style="text-align:center">盒子模型演示</h2>
<p>CSS盒模型本質(zhì)上是一個(gè)盒子，封裝周圍的HTML元素黔漂，它包括：邊距诫尽，邊框，填充炬守，和實(shí)際內(nèi)容牧嫉。</p>
<div>這里是盒子內(nèi)的實(shí)際內(nèi)容。有 25px 內(nèi)間距减途，25px 外間距酣藻、25px 綠色邊框。</div>
</body>
</html>
- 顯示結(jié)果
image.png
1.2 margin
1.2.1 margin 屬性
margin屬性可以有一到四個(gè)值鳍置。
- 1個(gè)值（四周）
margin:25px;
說明：所有的4個(gè)邊距都是25px
- 2個(gè)值（上下辽剧、左右）
margin:25px 50px;
說明：
上下邊距為25px
左右邊距為50px
- 3個(gè)值（上、左右墓捻、下）
margin:25px 50px 75px;
說明：
上邊距為25px
左右邊距為50px
下邊距為75px
- 4個(gè)值（上抖仅、右、下砖第、左）
margin:25px 50px 75px 100px;
上邊距為25px
右邊距為50px
下邊距為75px
左邊距為100px
1.2.2 margin相關(guān)屬性
margin-left
margin-left:50px|2cm
margin-right
margin-right:50px|2cm
margin-top
margin-top:50px|2cm
margin-bottom
margin-bottom:50px|2cm
1.3 padding
1.3.1 padding 屬性
四個(gè)值和margin相同
1.3.2 padding 相關(guān)屬性
padding-left
padding-left:50px|2cm
padding-right
padding-right:50px|2cm
padding-top
padding-top:50px|2cm
padding-bottom
padding-bottom:50px|2cm
1.4 border
1.4.1 border屬性
border: 25px solid green;
三個(gè)參數(shù)分別為：邊框?qū)挾瘸仿吙蝾愋停吙蝾伾?/p>
1.4.2 border的相關(guān)屬性
border-width
border-style:solid;
border-width:5px;
border-width單獨(dú)使用無效梧兼，需要border-style一起使用
border-style
border-style:none;
border-style:dotted;
border-style:dashed;
border-style:solid;
border-style:double;
border-style:groove;
border-style:ridge;
border-style:inset;
border-style:outset;
border-style:hidden;
border-style: dotted dashed solid double;
[圖片上傳失敗...(image-e3b223-1655303476642)]
[圖片上傳失敗...(image-9b5ff6-1655303476642)]
border-color
p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}
4. 輪廓 outline
說明：
- 是繪制于元素周圍的一條線
- 在border外部放吩，（緊貼border，不受margin影響。）
4.1 簡單使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蜀</title>
<style>
p
{
border:2px solid blue;
outline:green dotted thick;
}
</style>
</head>
<body>
<p style="text-align:center"><b>注意:</b> 周圍的綠圈</p>
</body>
</html>
- 結(jié)果顯示
[圖片上傳失敗...(image-1458e8-1655303476642)]
4.2 outline-style
- 語法
outline-style:dotted;
outline-style:dashed;
outline-style:solid;
outline-style:double;
outline-style:groove;
outline-style:ridge;
outline-style:inset;
outline-style:outset;
- 結(jié)果顯示
[圖片上傳失敗...(image-eb78da-1655303476642)]
4.3 outline-width
- 語法
outline-width: thin|thick|10px
- 示例
p.one
{
outline-style:solid;
outline-width:thin;
}
p.two
{
outline-style:dotted;
outline-width:5px;
}
4.4 outline-color
outline-color:#00ff00|green;
image.png
