CSS 盒子模型

CSS 盒子模型

盒子模型

作用：布局网页，摆放盒子和内容

盒子尺寸和背景色

属性名	作用
width	宽度
height	高度
background-color	背景色

盒子模型 — 组成

内容区域 — width & height

内边距 — padding

边框线 — border

外边距 — margin

div {
    margin: 50px;
    border: 5px solid skyblue;
    padding: 20px;
    width: 200px;
    height: 200px;
    background-color: aqua;
}

边框线

四个方向

属性名：border

属性值：边框线粗细 线条样式 颜色（不区分顺序）

属性值	线条样式
solid	实线
dashed	虚线
dotted	点线

单方向边框线

属性名：border + 方位名词

属性值：边框线粗细 线条样式 颜色（不区分顺序）

属性名	说明
border-top	上边框线
border-bottom	下边框线
border-left	左边框线
border-right	右边框线

内边距

作用：设置内容与盒子边缘之间的距离

• 属性名

四个方向：padding

单个方向：padding + 方位名词

属性名	说明
padding-top	上边框线
padding-bottom	下边框线
padding-left	左边框线
padding-right	右边框线

提示：添加 padding 会撑大盒子

• padding 多值写法

取值个数	示例	含义
一个值	padding: 10px	四个方向一致
四个值	padding: 10px 20px 40px 80px	上 、右 、下 、左
三个值	padding: 10px 20px 80px	上 、左右 、下
两个值	padding: 10px 80px	上下 、左右

记忆: 从上开始顺时针赋值，当前方向没有数值则与对面取值相同

尺寸计算

默认情况：盒子尺寸 = 内容尺寸 + border尺寸 + padding尺寸

结论：给盒子加 border / padding 会撑大盒子

解决方法

手动做减法，减掉 border / padding 的尺寸

内减模式：box-sizing: border-box

div {
    width: 200px;
    height: 200px;
    background-color: blue;
    padding: 20px;
    box-sizing: border-box;
}

外边距

作用：拉开两个盒子之间的距离

属性名：margin

属性值：与 padding 属性值的写法一致

注意：外边距不会撑大盒子

版心居中

左右 margin 值伪 auto

div {
    width: 800px;
    height: 200px;
    background-color: blue;
    margin: 0 auto;	/* 版心居中 */
}

清除默认样式

作用: 清除标签的默认样式

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 去掉列表的项目符号 */
li {
    list-style: none;
}

元素溢出

作用：控制溢出元素的内容的显示方式

属性名：overflow

属性值	效果
hidden	溢出隐藏
scroll	溢出滚动（无论是否溢出，都显示滚动条位置）
auto	溢出滚动（溢出才显示滚动条位置）

外边距问题

合并现象

场景：垂直排列的兄弟元素，上下 margin 会合并

现象：取两个 margin 中的较大值生效

.one {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    margin-bottom: 50px;
}

.two {
    width: 100px;
    height: 100px;
    background-color: violet;
    margin-top: 20px;
}

外边距塌陷

场景：父子级标签，子级添加上边距会产生塌陷问题

现象：导致父级一起向下移动

.father {
    width: 200px;
    height: 200px;
    background-color: aqua;
}

.son {
    width: 100px;
    height: 100px;
    background-color: violet;
    margin-top: 50px;
}

解决方法

• 方法一

.father {
    width: 200px;
    height: 200px;
    background-color: aqua;
    padding-top: 50px;
    box-sizing: border-box;
}

.son {
    width: 100px;
    height: 100px;
    background-color: violet;
    /* margin-top: 50px; */
}

• 方法二

.father {
    width: 200px;
    height: 200px;
    background-color: aqua;
    overflow: hidden;
}

.son {
    width: 100px;
    height: 100px;
    background-color: violet;
    margin-top: 50px;
}

• 方法三

.father {
    width: 200px;
    height: 200px;
    background-color: aqua;
    border-top: 1px solid black;
}

.son {
    width: 100px;
    height: 100px;
    background-color: violet;
    margin-top: 50px;
}

行内元素 — 内外边距问题

场景：行内元素添加 margin 和 padding ，无法改变元素垂直位置

解决方法：给行内元素添加 line-height 可以改变垂直位置

span {
    /* 行高可以改变垂直位置 */
    line-height: 50px;
}

圆角

作用：设置元素的外边框为圆角

属性名：border-radius

属性值：属性值+px / 百分比

提示：属性值是圆角半径

多值写法

取值个数	示例	含义
一个值	border-radius: 10px	四个角一致
四个值	border-radius: 10px 20px 40px 80px	左上 、右上 、右下 、左下
三个值	border-radius: 10px 20px 80px	左上 、右上+左下 、右下
两个值	border-radius: 10px 80px	左上+右下 、右上+左下

记忆：从左上角开始顺时针赋值，当前角没有数值则与对角取值相同

正圆形状

给正方形盒子设置圆角属性值为 宽高的一半 / 50%

img {
    width: 200px;
    height: 200px;
    border-radius: 100px;
    /* border-radius: 50% */
}

胶囊形状

给长方形盒子设置圆角属性值为 盒子高度的一半

div {
    width: 200px;
    height: 80px;
    background-color: skyblue;
    border-radius: 40px;
}

盒子阴影

作用：给元素设置阴影效果

属性名：box-showdow

属性值：X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影

div {
    width: 200px;
    height: 80px;
    background-color: skyblue;
    box-shadow: 2px 5px inset;
}

注意：

• X轴偏移量 和 Y轴偏移量是必须属性值
• 默认是外阴影，内阴影需要添加 inset