CSS2

一、盒子模型

盒子模型的组成以及注意事项

（1）border 边框

　　①样式

　　border-style：solid(实线)

　　border-style:  dashed (虚线)

　　border-style:  dotted(点线)

　　②颜色

　　border-color:   

　　③宽高

　　border-width

　　④边框简写

　　border: 1px solid red;(无顺序)

　　　　1)边框分开写法

　　border-top:  5px solid pink;(上边框);

　　border-bottom: 5px dotted red(下边框);

　　boder-left:  5px solid blue;

　　border-right: 5px solid blue;

　　　　2)边框合并:border-collapse:collapse

　　　　3)`边框会影响盒子实际大小(测量时要去除边框大小)

（2）content 内容

（3）padding内边距(盒子边框与内容的距离)

　　padding-left,padding-right,padding-bottom,padding-top

　　简写:padding:1px 2px 3px 4px(上右下左)

　　　　padding:1px 2px 3px (上左右下)

　　　　padding:5px

　(4)当我们给盒子指定padding值之后,发生了2件事

　　①内容和边框有了距离,添加了内边距

　　②padding影响实际大小

　　　　有了高度、宽度会撑大盒子

（5）margin外边距

　　 ①作用:

　　　　控制盒子与盒子之间的距离

　　　　margin-left,margin-right,margin-top,margin-bottom

　　②简写

　　　　和padding一样

　　　　margin:一个数值(上下左右一样)

　　　　margin:x y z h;(上右下左)

　　　　margin:x y z(上左右下)

　　(6)   ①让块级元素水平居中:margin: 0 auto;

　　　　②行内元素,行内块元素

　　　　　　让父元素用text-align:center

　　(7)外边距合并(垂直塌陷解决方案)

　　①给父元素设置边框(transparent)

　　②定义内边距 padding

        ③overflower:hidden;

　　(8)清除内外边距

　　①让* {padding和margin}都设置为0

　　②行内元素时* {设置左右边距为0}

二、PS的基本操作(未下载)

文件→打开

视图→标尺

Ctr+R:可以打开

三、圆角边框

border-radius:10px;

border-radius:x y z h;(上左,上右,下右,下左)

border-radius:x y (对角线 上左下右x，上右下左y)

四、盒子阴影

box-shadow:h-ahadow v-ahadow 

bo-shadow:x(水平移动) y(垂直移动) z(模糊距离) h(阴影的尺寸)

盒子阴影不占空间

五、文字阴影

使用text-shadow属性将阴影

text-shadow:水平移动  垂直移动  模糊距离