CSS 盒子

CSS 盒子

1 居中

块级

外边距可以让块级盒子水平居中,但是必须满足的2个条件:

1. 盒子必须指定宽度
2. 盒子左右外边距设置auto

行内/行内块

需要给父元素添加text-align:center

2 外边距合并

2.1 垂直外边距合并

上下相邻两个块元素,如果上面元素有下边距margin-bottom,下面元素有上边距margin-top,则他们之间垂直间距是取两个值较大者

2.2 嵌套块元素塌陷

垂直外边距塌陷
两个嵌套的父子块元素,父子元素都有上边距,此时父元素会塌陷较大的外边距值.
解决办法

1. 为父元素定义上边框(血肉分离,不再纠葛)
   a. border:1px solid transparent
2. 为父元素定义内边距(血肉分离,不再纠葛)
   a. padding:1px
3. 为父元素添加overflow:hidden
   a. 溢出隐藏
4. 浮动,固定,绝对定位的盒子不会有塌陷问题

2.3 清除内外边距

* {
   		padding:0;
 		margin:0;
}

3 盒子阴影

用法

box-shadow: h-shadow v-shadow blur spread color inset
程度/位置单位都为px

值	描述
h-shadow	(必要项)水平位置;正值为右,负值为左
v-shadow	(必要项)垂直位置;正值为下,负值为上
blur	(可选) 模糊程度
spread	(可选) 阴影大小
color	(可选) 阴影颜色
inset/outset	(可选)内部/外部阴影

补充文字阴影:
text-shadow: h-shadow v-shadow blur color