方法一
手动做减法,剪掉border/padding尺寸
约 807 字大约 3 分钟
2025-06-15
width和height绘制的区域
div {
width: 100px;
height: 100px;
}border-styleOptionaldashed/solid/dotted
线条样式,默认solid
border-colorOptionalrgb/十六进制/英文
线条颜色
border-widthOptionalnumber
线条粗细
设置内容与盒子边缘之间的距离
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会撑大盒子
方法一
手动做减法,剪掉border/padding尺寸
方法二
box-sizing: border-box
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.转换为块元素