盒模型
盒模型
盒模型的组成部分
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