CSS第三天——border、padding、margin与出现的问题、水平居中、插入图片背景图片、css准备工作、圆角、盒子与文字阴影

盒子

内容、边框、内边距、外边距

边框 border

宽度：　　border-width
样式：　　border-style：solid　　实线
　　　　　　　　　　 ：dashed　虚线
　　　　　　　　　　 ：dotted　 点线
颜色：　　border-color

综合：　　border：宽　　样式　　颜色

取消边框：border：none / 0
不同方向：border-left / right / top / bottom
细线表格（合并边框）：
　　　　　border-collapse：collapse

内边距 padding

拉开 内容到盒子边缘 的距离
不同方向：　　　padding-left / right / top / bottom
取值个数相同：　四个方向取值一样　　　　1
　　　　　　　　上下　　左右　　　　　　2
　　　　　　　　上　　左右　　下　　　　3
　　　　　　　　上　右　下　左　　　　　4
　注：加多少 减多少

外边距 margin

盒子与盒子之间的距离
不同方向：　　margin-left / right / top / bottom
取值个数相同：　四个方向取值一样　　　　1
　　　　　　　　上下　　左右　　　　　　2
　　　　　　　　上　　左右　　下　　　　3
　　　　　　　　上　右　下　左　　　　　4

注：　行内元素的内外边距、垂直无效，水平有效

水平居中

margin：0　　auto
　　　　上下
　　　　块级盒子居中，必须有固定的宽度
text-align：center
　　　　盒子里面文字、行内、行内块居中

插入图片 和 背景图片 的区别

插入图片：　内容，占位，移动用内外边距
背景图片：　装饰小图标，不占位，移动用position定位

CSS准备工作

清空默认样式：

* {margin:0;padding:0;}

清除li的默认样式：

li {list-style:none;}

清除超链接a的默认样式：

a {text-decoration:none;}

处理图片底部留白：

img {vertical-align:middle;}

让em不倾斜：

em {font-style:normal;}

外边距对盒子影响

1、并列垂直外边距合并
　　上盒子，下外边距　　下盒子，上外边距　　只显示大的那个
　　只设置一个即可
2、父子级：子级设上外边距，父级也跟掉下来
解决：父级 设 　　border-top：1px solid transparent
　　　父级　　　padding-top：1px　　　　有高度减1px
　　　父级　　　overflow：hidden
　　　浮动，绝对、相对定位

圆角 border-radius

border-radius　　　　一般在5—20之间
正圆：　　　　正方形　　　　50%
胶囊：　　　　长方形　　　　高度的一半
取值个数相同：　四个方向取值一样　　　　1
　　　　　　　　上下　　左右　　　　　　2
　　　　　　　　上　　左右　　下　　　　3
　　　　　　　　上　右　下　左　　　　　4
　　　　　　　　
　　　　　　　　上　　右
　　　　　　　　　　□（四边形）
　　　　　　　　左　　下

盒子阴影 box-shadow

box-shadow：水平　垂直　模糊距离　阴影大小　颜色　内 / 外阴影
　　　　　　　　　　　　　　　　　　　　　　　　　inset

文字阴影 text-shadow

text-shadow：水平　垂直　模糊距离　阴影大小　颜色　内 / 外阴影
　　　　　　　　　　　　　　　　　　　　　　　　　inset

注：阴影可以设多个，之间用逗号隔开