CSS学习笔记（六）边框属性与盒子属性

文章目录

一、边框属性
二、内边框属性
三、外边框属性
四、盒子模型
五、盒子box-sizing属性
六、盒子模型练习
七、盒子居中和内容居中
八、清空默认边框
九、行高和字号
十、还原字体和字号（）利用Adobe fw）

一、边框属性

1、边框：环绕在标签宽度和高度周围的线条。

2、格式：
（1）连写
A、同时设置四条边的边框

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

B、分别设置四条边

border-top: 边框的宽度 边框的样式 边框的颜色(bt+)
border-right: 边框的宽度 边框的样式 边框的颜色(br+)
border-bottom: 边框的宽度 边框的样式 边框的颜色(bt+)
border-left: 边框的宽度 边框的样式 边框的颜色(bl+)

注意：连写格式中颜色可省略，省略之后默认为黑色；样式不可省，省略之后看不见边框；宽度可省略，省略之后还是可以看见边框的。

border-width: 上 右 下 左;
border-style: 上 右 下 左;
border-style: 上 右 下 左;(按顺时针(上，右，下，左)赋值)
这三个属性的取值省略时的规律：
上右下左>上右下>左边的取值和右边一样
上右下左>上右>左边=右边，下边=上边
上右下左>上>右=下=左=上

（2）非连写

border-left-width: 20px;
border-left-style: double;
border-left-color: pink;

3、边框练习（快捷键）
div.box$*6即生成6个div，每个div都有直接的类名，div1，div2…

二、内边框属性

1、内边距：边框和内容之间的距离。

2、格式：
（1）非连写：

padding-top:
padding-right:
padding-bottom:
padding-left:

注意：给标签设置内边距之后，标签占有的宽度和高度会发生变化。(内边距也会有背景颜色)
（2）连写：（规律同边框属性）

padding: 上 右 下 左;

三、外边框属性

1、外边框：标签与标签之间的距离。

2、格式：
（1）非连写：

margin-top:
margin-right:
margin-bottom:
margin-left:

（2）连写：

margin: 上 右 下 左;

注意：外边框的那一部分时没有背景颜色的。

3、外边框合并现象：
（1）在默认布局的垂直方向上，默认情况下外边距不会叠加，会出现合并现象，谁的外边框比较大就听谁的。
（2）在默认布局的水平方向上，默认情况下外边距会叠加。

四、盒子模型

1、CSS盒子模型：一个形象比喻，HTML中所有标签都为盒子。在HTML中所有标签都可以设置宽/高度（指定可以存放内容的区域）、内边距、边框、外边框。

2、内容的宽度和高度：通过标签的width/height属性设置的宽度和高度。

3、元素的宽度和高度：
宽度=左边框+左内边框+width+右内边框+右边框
高度（同理）

4、元素空间的宽度和高度：
宽度=左外边距+左边框+左内边框+width+右内边框+右边框+右外边距
高度（同理）

五、盒子box-sizing属性

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

2、box-sizing取值：

content-box:
元素宽高=边框+内边距+内容宽高
border-box:
元素宽高=width属性

六、盒子模型练习

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

2、如果外边的盒子不像被一起顶下来，那么可以给外边的盒子添加一个边框属性，一般先考虑padding（用于控制父子关系），再考虑margin（用于控制兄弟关系）。

3、在嵌套关系和盒子中，我们可以利用margin: 0 auto;（只对水平方向有效，垂直方向只能利用像素去居中）的方式来让里面的盒子在外面的盒子中水平居中。

七、盒子居中和内容居中

1、让盒子自己水平居中：margin: 0 auto;

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

八、清空默认边框

1、在企业开发中，为了更好的控制/计算盒子的宽高，一般要清空默认边框（外边距+内边距）。

2、格式：

*{margin: 0;padding: 0;
}

3、通配符选择器会遍历当前界面的所有标签，所以性能不好，企业开发中可以直接从网址中拷贝。

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldest,legend,input,textarea,p,block,quote,th,td{margin: 0;padding: 0;
}

九、行高和字号

1、CSS所有行都有自己的行高；行高和盒子高不是同一个概念。

2、格式：line-height: 50px;

3、规律
（1）文字在行高中是默认垂直居中的。
（2）要想一行文字在盒子中垂直居中，那么只需设置这行文字的行高等于盒子的高即可。
（3）要想多行文字在盒子中垂直居中，只能通过设置padding来让文字居中。

十、还原字体和字号（）利用Adobe fw）

1、在企业开发中，如果一个盒子存储的是文字，那么一般情况下会以盒子左边的内边距为基准，因为右边的内边距有误差（因为右边如果放不下一个文字，那么文字会换行显示，所以文字和内边距之间的距离就有了误差）。

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

3、文章界面的编写顺序：
（1）清空所有边框。
（2）从外到内，从上到下编写网页。