盒子模型 Box Model
盒子模型有元素的内容 边框 内边距 外边距
CSS盒子模型、浮动、定位
边框 内边距 外边距 ps基本操作
边框border
border:border-width border-style border-color;
/*综合使用*/
border的样式 border-style
none:没有
solid:实线
dashed:短线
dotted:点
上下左右的分别边框
border-top border-bottom border-left border-rigth;
css中,border-collapse:collapse 表示相邻边框合并在一起。
内边距padding
内容距离边框的距离
padding-left padding-right padding-top padding-bottom
指定padding后,内容和边框有了距离,添加了内边距
盒子变大
padding的复合写法
值的个数 | 意义 |
---|---|
1个值 | 上下左右边距 |
2个值 | 上下,左右 |
3个值 | 上,左右,下 |
4个值 | 上,右,下,左 |
外边距margin
设置盒子与盒子,盒子其他的边距
块级盒子水平居中
让块级盒子水平设置
外边距的塌陷
margin bottom 和margin top 只存在垂直外边距的问题,
嵌套两个元素之间会存在margin 塌陷的问题
解决方法
1.给父元素添加border
2 给父元素添加 padding
3给父元素overflow 添加hidden
盒子阴影
box-shadow:h-shadow vshadow blur spread color inset;