页面盒子模型

盒子模型

1. 页面中的每一个标签，都可看做是一个“盒子”，通过盒子的视角更方便的进行布局
2. 浏览器在渲染（显示)网页时，会将网页中的元素看做是一个个的矩形区域，也形象的称之为盒子

CSS中规定每个盒子分别由:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)构成，这就是盒子模型

具体构建步骤：

• 从外到内:先宽高背景色，放内容，调节内容的位置;控制文字细节

内容的宽度和高度

作用：利用width和height属性默认设置是盒子内容区域的大小

属性： width / height

常见取值：数字+px

边框（border）

边框会改变盒子的宽高

连写

属性名: border

属性值:单个取值的连写，取值之间以空格隔开

• 如: border : 10px solid red;

快捷键:bd + tab

单方向设置

场景:只给盒子的某个方向单独设置边框

属性名: border -方位名词

• border-right： 10px solid red;

属性值:连写的取值

拆分写法

作用	属性名	属性值
边框粗细	border-width	数字+px
边框样式	border-style	实线solid、虚线dashed 、点线dotted
边框颜色	border-color	颜色取值

细线边框

border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

border-collapse:collapse

collapse单词是合并的意思

border-collapse: collapse;表示相邻边框合并在一起

内边距（padding）

padding也会改变盒子的宽高

连写

四值padding：上-- 右 --下- -左

三值padding：上-- 左右 --下

两值padding：上下–左右

顺时针转一圈，如果不够看对面

盒子模型（自动内减）

给盒子设置border或padding时，盒子会被撑大，如果不想盒子被撑大

解决方法①:手动内减

操作:自己计算多余大小，手动在内容中减去

缺点:项目中计算量太大，很麻烦

解决方法②∶自动内减

操作:给盒子设置属性box-sizing : border-box;即可

优点:浏览器会自动计算多余大小，自动在内容中减去

外边距

使用方法与padding基本一致

版心居中代码

margin:0 auto;

外边距折叠现象-合并现象

场景:垂直布局的块级元素，上下的margin会合并

结果:最终两者距离为margin的最大值

解决方法:

避免就好

只给其中一个盒子设置margin即可

外边距折叠现象-塌陷现象

场景:互相嵌套的块级元素，子元素的margin-top会作用在父元素上

结果:导致父元素一起往下移动

解决方法:

1. 给父元素设置border-top或者padding-top (分隔父子元素的margin-top)
2. 给父元素设置overflow: hidden
3. 转换成行内块元素
4. 设置浮动

行内元素的垂直内外边距

如果想要通过margin或padding改变行内标签的垂直位置,无法生效

行内标签的margin-top和bottom 不生效

行内标签的padding-top或botttom不生效

要改变可使用line-height