盒模型

盒模型

盒模型的组成部分

content 内容

padding 内边距

border 边框

margin 外边距

============================

子盒子

box-sizing（宽高的设置范围）

取值：

1、border-box：设置的宽高是边框盒的尺寸

2、content-box：设置的宽高是内容盒的尺寸（默认值）

background-clip （背景图或背景色的剪切范围）

取值：

1、border-box（默认值）：边框盒子

2、padding-box：填充盒子

3、content-box：内容盒子

例子：


适用场景

主题网页的单选或者多选前面的圆或正方形的样式

常见问题

header固定位置

header宽度100%

又添加了左右的padding因此出现横向滚动条

解决方式：
改变当前标签盒子的计算方式

即：box-sizing：border-box；

=============================

outline轮廓

取值：

厚度 样式 颜色

特点：outline 不占像素，并且无法进行单独设置某一条边的样式。

其它适用场景

input、a标签的焦点框

=============================

取值单位

固定尺寸、绝对尺寸

px：像素

相对尺寸

em：当前标签字体大小的倍数

rem：根元素字体大小的倍数（HTML）

%：包含块宽度的百分比

=============================

盒模型中的auto值

水平方向

常规流块盒水平方向的居中

1、给当前标签固定宽

2、设置margin：auto