方法一
手动做减法，剪掉border/padding尺寸
盒子模型
约 807 字大约 3 分钟
2025-06-15
盒子模型组成
内容区域
width和height绘制的区域
div {
width: 100px;
height: 100px;
}border
设置全局
border-styleOptionaldashed/solid/dotted
线条样式，默认solid
border-colorOptionalrgb/十六进制/英文
线条颜色
border-widthOptionalnumber
线条粗细
设置单方向
- border-top
- border-right
- border-left
- border-bottom
padding
设置内容与盒子边缘之间的距离
padding.css
div {
/* 设置四个方向*/
padding: 30px;
}
h1 {
/* 单独设置一个方向内边距 */
padding-top: 20px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 20px;
}| 取值个数 | 方向 |
|---|---|
| padding: 10px | 四个方向都是10px |
| padding: 20px 30px | 上下、左右 |
| padding: 30px 10px 30px | 上30px、左右10px、下30px |
| padding 10px 20px 30px 30px | 上、右、下、左 |
盒子尺寸
默认情况下：盒子尺寸=内容尺寸+border尺寸+padding尺寸
给盒子加border/padding会撑大盒子
方法二
box-sizing: border-box
margin
div {
/* margin: 10px */
/* 块级元素水平居中 */
margin: 0 auto;
}
h1 {
/* 单独设置一个方向内边距 */
margin-top: 20px;
margin-right: 20px;
margin-bottom: 40px;
margin-left: 20px;
}清除默认样式
手动清除边距时
警告
消耗DOM性能，请勿使用
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}提示
推荐指定标签，如
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{
margin: 0;
padding: 0;
}
li {
list-style: none;
}溢出隐藏
overflowOptionalhidden/scroll/auto
线条颜色
hidden：溢出隐藏scroll：溢出滚动（显示滚动条）auto：溢出滚动（溢出时才显示滚动条）
外边距问题
合并
场景：垂直排列的兄弟，上下margin会合并
效果：margin高的生效
塌陷
场景：父子级的标签，子级的添加上外边距会产生塌陷问题
效果：导致父级一起向下移动
注意
不建议转为行内块元素，需设置line-height可显示内边距
方法一
取消子级的margin，父级设置padding
方法二
父级设置overflow:hidden
方法三
父级设置border-top
盒子美化
圆角
提示
圆形：宽高一致，border-radius值为50%
胶囊形状：border-radius值为形状高度的一半
border-radiusOptional数值/百分比
设置元素外边框为圆角
| 取值个数 | 示例 | 含义 |
|---|---|---|
| 一个值 | border-radius: 10px; | 四个角均为10px |
| 四个值 | border-radius: 10px 20px 40px 80px; | 左上：10px；右上：20px；右下：40px；左下：80px |
| 三个值 | border-radius: 10px 40px 80px; | 左上：10px；右上+左下：40px；右下：80px |
阴影
注
x轴偏移量和 y轴偏移量必须书写
偏移量数值正负参考直角坐标系(上左为负)
默认为外阴影，内阴影需要添加inset
box-shadow: x轴偏移量 y轴偏移量 模糊半径 扩散半径 颜色 内外阴影垂直居中
vertical-alignOptionalbaseline/top/middle/bottom
默认基线baseline对齐
img对齐后下方有空隙
1.修改垂直居中值默认值baseline
2.转换为块元素