一、CSS盒模型（Box Model）
所有的HTML元素都可以被认为是盒子。CSS盒模型代表网站的设计和布局。 它由外边距(margin)，边框(border)，内边距（填充）(padding)和实际内容组成。
属性以相同的顺序工作：顶部(top)，右侧(right)，底部(bottom)和左侧(left)。
属性工作顺序为
顺时针，以上右下左的顺序。
下图展示了盒模型：
不同部分的说明：
-
Margin(外边距) - 清除边框外的区域，外边距是透明的。（四个值：上 右 下 左；两个值：第一个值上下 第二个值左右） -
Border(边框)- 围绕在内边距和内容外的边框。（大小 样式 颜色） -
Padding(内边距) - 清除内容周围的区域，内边距是透明的。（四个值：上 右 下 左；两个值：第一个值上下 第二个值左右） -
Content(内容) - 盒子的内容，显示文本和图像。
为了正确设置元素在所有浏览器中的
宽度和高度，你需要知道盒模型是如何工作的。
如果把盒子模型看作是一个生活中的快递，那么内容部分等同于你买的实物，内边距等同于快递盒子中的泡沫，边框等同于快递盒子，外边距等同于两个快递盒子之间的距离。
二、认识盒模型
1、元素的总宽度
网页的每个元素都是一个盒子。
CSS通过盒模型来确定一个元素的大小以及如何放置它们。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
使用盒模型时，了解元素的总宽度是如何计算的非常重要。
当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和边距。
例如，带有填充(padding)的盒的总宽度将是宽度加上填充左侧(padding-left)和填充右侧(padding-right)的总和。
这是另一个有边距(margin)，边框(border)和填充(padding)的盒。
总宽度是左右边距，左右边框，左右填充以及内容的实际宽度的总和。
当您使用CSS设置元素的宽度和高度属性时，可以设置内容区域的宽度和高度。
在盒模型中
设置背景颜色时，将覆盖内容区域以及填充区域(padding)。
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
2、元素的总高度
元素的总高度的计算方式与宽度相同。
下面的例子与有关填充(padding)，边框(border)和边距(margin)的计算方式相同。
总而言之，
总元素高度 = 高度(height) + 顶部填充(padding-top) + 底部填充(padding-bottom) + 顶部边框(border-top) + 底部边框(border-bottom) + 顶部边距(margin-top) + 底部边距(margin-bottom)
知识点普及：遇到内容div想居中与外部div中，可以使用 margin : 0 auto 这样会根据内部div宽度自动填充左右两侧的margin值以达到居中效果
三、CSS边框
1、border属性
语法：border: border-width | border-style | border-color（每个属性之间用空格隔开）
CSS的border属性允许您自定义HTML元素的边框。
为了向元素添加边框，您需要指定边框的大小，样式和颜色。
下面的示例显示了如何向段落添加宽度为5px的纯绿色实线边框。
HTML代码：
<p>我要中彩票10个亿！</p>CSS代码：
p {
padding: 10px;
border: 5px solid green;
}执行结果：
2、border-style属性
border-style的默认值是none，它没有定义边界。
边框样式属性支持各种样式：点状(dotted)，虚线(dashed)，双线(double)，solid(实线)。下面的例子说明了它们之间的区别。
HTML代码：
<head>
<link rel="stylesheet" href="盒子.css">
</head>
<body>
<p class="none">我会暴富，会开心，会幸福</p>
<p class="solid">我会暴富，会开心，会幸福</p>
<p class="dotted">我会暴富，会开心，会幸福</p>
<p class="dashed">我会暴富，会开心，会幸福</p>
<p class="double">我会暴富，会开心，会幸福</p>
<p class="groove">我会暴富，会开心，会幸福</p>
<p class="ridge">我会暴富，会开心，会幸福</p>
<p class="inset">我会暴富，会开心，会幸福</p>
<p class="outset">我会暴富，会开心，会幸福</p>
<p class="hidden">我会暴富，会开心，会幸福</p>
</body>CSS代码：
p.none {border-style: none;}
p.solid {border-style: solid;}
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.hidden {border-style: hidden;}执行结果：
在CSS中，可以使用以下属性为
不同的边指定不同的边框：
-
border-top-style： 上边框-
border-right-style： 右边框-
border-bottom-style： 下边框-
border-left-style： 左边框
例如，设置p元素的上边框为虚线边框：
p{ border-top-style : dashed;}
执行结果如下：
3、border-width属性
border宽度
border的属性可以单独设置。 border-width属性指定边框的宽度。
HTML代码：
<p class="first">
我会暴富
</p>
<p class="second">
我会暴美
</p>CSS代码：
p.first {
padding: 10px;
border-style: solid;
border-width: 2px;
}
p.second {
padding: 10px;
border-style: solid;
border-width: 5px;
}执行结果：
4、border-color属性
可以使用颜色名称关键字，RGB或十六进制值定义元素的边框颜色。
HTML代码：
<p class="first">
<strong>我会暴富</strong> 一定的
</p>
<p class="second">
<strong>我会暴富</strong> 一定的
</p>
<p class="third">
<strong>我会暴富</strong> 一定的
</p>CSS代码：
p.first {
padding: 10px;
border-style: solid;
border-width: 2px;
border-color: blue;
}
p.second {
padding: 10px;
border-style: solid;
border-width: 2px;
border-color: #FF6600;
}
p.third {
padding: 10px;
border-style: solid;
border-width: 2px;
border-color: rgb(0, 153, 0);
} 执行结果：
四、CSS宽度和高度
将一个<div>元素的总宽度和高度设置为100px：
这里注意不要和
盒模型的总宽度和高度弄混了哦~
HTML代码：
<div>我的宽和高都是100px哦~</div>CSS代码：
div {
border: 5px solid green;
width: 90px;
height: 90px;
}执行结果：
注意： div的总宽度和高度将是90px + 5px（border）+ 5px（border）= 100px;
1、宽度和高度的度量单位
元素的宽度和高度也可以使用百分比来分配。
在下面的例子中，元素的宽度以百分比分配，高度以像素为单位。
HTML代码：
<div>
该元素的总宽度是 <strong>100%</strong> 而总高度是
<strong>100px</strong> .
</div>CSS代码：
div {
border: 5px solid green;
width: 100%;
height: 90px;
}执行结果：
2、最小和最大尺寸
要设置元素的最小和最大高度或者宽度，可以使用以下属性：
-
min-width - 元素的最小宽度 -
min-height- 元素的最小高度 -
max-width- 元素的最大宽度 -
max-height - 元素的最大高度
在下面的例子中，我们将不同段落的最小高度和最大宽度设置为100px。
HTML代码：
<p class ="first">本段的<strong>最小高度</strong>设置为100px。</p>
<p class ="second">本段的<strong>最大宽度</strong>设置为100px。</p>CSS代码：
p.first {
border: 5px solid green;
min-height: 100px;
}
p.second {
border: 5px solid green;
max-width: 100px;
}执行结果：
扫一扫
1633
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
