文章目录
一.盒子模型概述
HTML中的盒子模型是一种用于描述和布局元素的概念。每个 HTML 元素都可以被表示为一个矩形的盒子，这个盒子包括四个部分：内容区域、内边距、边框和外边距。
- 内容区域（content area）：盒子的实际内容，例如文本、图像或其他元素。
- 内边距（padding）：内容区域和边框之间的空白区域。可以使用 CSS 属性设置内边距的大小。
- 边框（border）：包围内容区域和内边距的线条。可以使用 CSS 属性设置边框的样式、宽度和颜色。
- 外边距（margin）：边框和相邻元素之间的空白区域。可以使用 CSS 属性设置外边距的大小。
这些部分的组合形成了一个完整的盒子，它们的大小和位置可以通过 CSS 属性进行调整。盒子模型是用于控制元素在页面上的布局和定位的重要概念，它影响到元素的尺寸、位置和与其他元素的关系。
盒子模型的尺寸
二.边框
boder-color
#所有边框为同色
boder-color:#颜色
#语法中设置的颜色会按照顺时针顺序显示即：上,右，下，中，边框颜色
boder-color: red blue pink yellow
boder-width
#所有边框粗细都是5像素值
boder-width:5px
#语法中设置的像素会按照顺时针顺序显示即：上,右，下，中
boder-width:5px 6px 7px 8px
boder-style
#所有边框种类都是实线
boder-style：solid
#语法中设置的像素会按照顺时针顺序显示即：上,右，下，中
boder-style：solid dotted dashed double
|--------|------|
| none | 没有边框 |
| solid | 实线边框 |
| dotted | 点状边框 |
| hidden | 隐藏边框 |
| dashed | 虚线边框 |
| double | 双线边框 |
[boder-style 属性值]
案例：
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{ /**针对所有的盒子模型设置样式，div时盒子模型的一种**/
width: 300px;
border: 1px solid rebeccapurple;
}
h2{background-color: red;}
#d1{background-color: aquamarine;}
#d2{background-color: antiquewhite;}
#d3{background-color: rebeccapurple;}
/**结构伪类选择器：选择所有子元素div中的第一个子元素div**/
div:nth-last-of-type(1) input{border: 3px solid black;}
div:nth-last-of-type(2) input{border: 3px dashed red;}
div:nth-last-of-type(3) input{border: 3px dotted blue;}
</style>
</head>
<body>
<div class="box">
<h2>会员登录</h2>
<form action=#"">
<div id="d1">
<strong class="name">姓名:</strong>
<input type="text"/>
</div>
<div id="d2">
<strong class="name">邮箱：</strong>
<input type="text"/>
</div>
<div id="d3">
<strong class="name">电话</strong>
<input type="text"/>
</div>
</form>
</div>
</body>
</html>
拓展：
- 盒子居中代码---前提：必须对盒子设置宽度
css
.box{margin:0 auto;}- 盒子高度和盒子行高一致则盒子中文本内容将垂直居中对齐。
css
h2{
font-size: 15px;
height: 35px;
line-height: 35px;
}
三.外边框
- 设置所有div元素的下外边距
css
/**设置所有div元素的下外边距**/
div{margin-bottom: 10px;}
- 设置h2元素的上下外边框
css
h2{ /**设置h2的下外边框**/
margin-bottom: 0px;
/**设置h2的上外边框**/
margin-top: 0px;
}
四.内边距
- 归零代码：清除盒子的所有边距
内外边框有各自的默认边距，为防止边距之间冲突，可使用归零代码先清除再单独设置边距
css
<style type="text/css">
/**归零代码：清楚盒子的所有边距**/
*{
margin: 0px;
padding: 0px;
}
</style>
案例：设置内边距使会员登录字样缩进
css
<style type="text/css">
/**归零代码：清楚盒子的所有边距**/
*{
margin: 0px;
padding: 0px;
}
.box{
width: 298px;
border: 1px solid red;
margin: 0px auto;
}
h2{
font-size: 16px;
background-color: pink;
height: 35px;
line-height: 35px;
color: blue;
padding-left: 10px;
}
</style>
五.弹性布局设置
box-sizing是CSS的一个属性，用来设置盒子模型的计算方式。在标准的CSS盒子模型中，当设置一个元素的宽度或高度时，实际显示的宽度或高度会增加边框和内边距的宽度，从而导致元素整体变得更大。
而通过设置box-sizing属性为"border-box"，可以修改盒子模型的计算方式，使得盒子中内容设置的宽度和高度按照盒子的宽度和高度自行改变。这样一来，元素的内容区域的宽度和高度就不会受到边框和内边距的影响，保持和设置的一致。
|--------------|----------------------|
| content-box： | 盒子的总尺寸依然按照默认公式计算 |
| border-box | 根据盒子的总尺寸弹性布局盒子内容的总尺寸 |
[box-sizing属性值]
案例：
- 未设置盒子内容边框时，盒子高度-宽度和内容高度-宽度一致，内容将与盒子紧密贴合
css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin: 0px; padding: 0px;}
#father{
width: 100px; height: 100px;
border: 10px solid rebeccapurple;
}
#son{
width: 100px; height: 100px; background-color: cornflowerblue ;
}
</style>
</head>
<body>
<div id="father">
<div id="son"></div>
</div>
</body>
</html>
- 盒子中的内容设置边框后将无法适应盒子的宽度和高度 ，从而超出盒子边界
css
#son{
width: 100px; height: 100px; background-color: cornflowerblue ;
border: 5px solid black;
}
- 设置弹性布局后
css
#son{
box-sizing: border-box;
}