盒子模型 Box Model

盒子模型 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

内容距离边框的距离

扫描二维码关注公众号，回复： 12423278 查看本文章

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;