一,CSS 盒子模型
1,content内容部分有CSS宽和高两个属性决定。
2,padding内边距
内边距由padding样式来设置。padding样式可以分成padding-left,padding-right,padding-top,padding-bottom和padding五个属性。
padding内边距:
padding值可以通过复合写法设置成一个两个和四个值。
2,border边框
不设置padding时,边框紧挨着content内容:
当设置padding时,边框挤奶padding内边距:
3,margin外边距
外边距是指盒子与盒子之间的距离。margin跟padding类似有五个属性,也支持复合写法。
4,margin叠加和传递
(1)margin叠加当两个盒子同时添加上下外边距时,会出现叠加问题。
左右排列:
(2)margin传递
margin传递的问题只会出现在嵌套的结构中,且只有margin-top才会有传递问题,其他三个方面时没有问题的。
当子标签添加margin-top值时,会将值传递给父标签,有时不想将值传递给父标签时可以用父标签设置padding-top来替代子标签的margin-top值。
二,块与内联
1,独占一行
2,支持所有样式
3,不设置宽时,等于父标签的宽度:
不写宽,只设置内边距时,等于父标签减去子标签的内边距:
CSS 进阶
最新推荐文章于 2024-06-24 18:50:43 发布