html+盒子+边距,盒子模型、边框、边距

一：边框属性

1. 边框：就是环绕在标签宽度和高度周围的线条

2. 如何设置边框属性

2.1 连写(同时设置四条边的边框)

border：边框的宽度 样式 颜色；

快捷键：

bd + border: 1px solid #000;

注意点：

1.连写格式中颜色属性可以省略，省略之后默认为黑色

2.连写格式中样式不能省略，省略之后就看不到边框了

3.连写格式中宽度可以省略，省略之后还是可以看到边框

2.2 连写

border-top: 边框的宽度 样式 颜色

border-left: 边框的宽度 样式 颜色

border-right: 边框的宽度 样式 颜色

border-bottom: 边框的宽度 样式 颜色

2.3 连写(分别设置四条边框)

border-width: 上 右 下 左

border-style: 上 右 下 左

border-color: 上 右 下 左

注意点:

1.顺序是按照上右下左的顺序,按照顺时针赋值的

2.上右下左 > 上 右 下 > 左边的取值和右边的一样

3.上右下左 > 上 右 > 左边的取值和右边的一样,下边的取值和上边一样

4.上右下左 > 上 所有边颜色盒上边一样

3.非连写(方向+要素)

border-top-width:1px;

border-top-color: red;

border-top-style:solid;

内边距：

边框和内容之间的距离就是内边距

格式：

4.1 非连写 padding-top:

padding-right:

padding-left:

padding-bottom:

4.2 连写方式

padding: 上 右 下 左

和边框的属性是一样的

注意点:

给标签设置完内边距之后,标签占有的宽度和高度会发生变化

内边距也会有背景颜色的

外边距

就是标签和标签之间的距离

给一个标签设置外边距的方式：

5.1 非连写方式

单独设置标签的上右下左

margin-top:

margin-left:

margin-right:

margin-bottom:

5.2 连写方式

margin: 上 右 下 左;

省略编写的方式和边框以及内边距一样

注意点:外边距的那一部分是没有颜色的

在默认布局的垂直方向上，默认情况下外边距是不会叠加的，会出现合并现象，谁的外边距比较大就听谁的

什么是CSS的盒子模型

在html中所有的标签都可以设置 宽度/高度 == 指定可以存放内容的区域

6.1 内容的宽度和高度

就是通过标签的width和height属性设置的宽度和高度

6.2 元素的宽度和高度

宽度 = 左边框 + 左内边距 + width +内右边距 + 有边框

高度同理

6.3 元素空间的宽度和高度

宽度 = 左外边距 + 左边框 +左内边距 + width + 右内边距 + 右边框 + 右外边距

高度同理

规律：

1.增加了padding之后，元素的宽度也会发生变化

2.如果增加了padding之后，还想保持元素的宽高，那就要减少内容的宽高

3.CSS3中新增了一个box-sizing属性，这个属性可以保证我们给盒子新增padding和border之后，盒子元素的宽度和高度不变

4.box-sizing属性是如何保证增加padding和border之后盒子元素的宽度和高度不变，原理：增加padding和border之后，要想保证盒子元素的宽高不变，那么必须减去一部分内容的宽高

box-sizing：content-box;是默认的取值，保持宽高不变时，可以取值box-sizing: border-box;

注意点：

1.如果两个盒子是嵌套关系，那么设置了里面的一个盒子的顶部的外边距外面的一个盒子也会被顶下来

2.如果不想被一起顶下来，那么可以给外面的盒子添加一个边框属性

3.实际开发中，一般首先考虑padding 其次再考虑 margin margin本质上是用于兄弟关系之间的间隙的

4.在嵌套关系的盒子中，我们可以使用 margin ：0 auto；的方式来让里面的盒子在外面的盒子中水平居中

5. margin:0 auto;只对水平方向有效,对垂直方向无效

盒子居中和内容居中

text-align:center; 和 margin:0 auto;之间的区别?

text-align:center;的作用：设置盒子中存储的文字、图片水平居中

margin： 0 auto； 让盒子自己水平居中

8.系统默认会给我们自动加上边距，所以在编写html时我们需要清空一下边距：

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,

fieldset,legend,input,textarea,p,blockquote,th,td

{

margin:0; padding:0

}

行高和字号

行高和盒子的高度不是同一个概念：

行高是某一行内容的高度

盒子高度：是整个盒子模型的高度

9.1 文字在行高中默认是垂直居中的

9.2 在开发中，经常讲盒子的高度和行高设置为一样，简而言之：要想 一行文字 在盒子中垂直居中，那么只需要将行高等于盒子的高度即可

9.3 开发中，如果一个盒子中有多行文字，那么就不能设置行高来实现文字垂直居中，只能通过padding来让文字居中

10.还原字体和字号

开发中，如果一个盒子中存储的是文字，那么一般情况下我们会以盒子左边的内边距为基准，不会以右边的右边距为基准，因为这个右边的内边距又误差

右边的内边距的误差从何而来？因为右边如果放不下一个文字，那么文字就会换行显示，所以文字和内边距之间的差距就有误差

顶部的内边距并不是边框到文字顶部的距离，而是边框到行高顶部的距离

91D801FE-2E5C-4E5E-BAF3-D54AF6DD3C8F.png