CSSpart3

shift+alt可以同时输入n行 

一、盒子模型

1.边框border

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色

1.复合写法：border：1px solid red；没有顺序

border-top/bottom/left/right：1px solid red；

2.层叠性：下面的会覆盖上面的代码，先大后小。

3.表格的细线边框

border-collapse：collapse；相邻边框合并在一起。

4.边框会影响盒子实际大小

• 测量盒子大笑的时候不量边框
• 测量的时候包含了边框，则需要width/height减去边框宽度

5.内边距padding（是盒子的）

padding-left/right/top/bottom

复合属性

值的个数	表达意思
padding：5px；	上下左右都是5像素内边距
padding：5px 10px；	上下5px，左右10px
padding：5px 10px 20px；	上5，左右10，下20
padding：5px 10px 20px 30px；	上5 右10 下20 左30 顺时针

•  内容和边框有了距离，添加了内边距
• padding影响了盒子实际大小。如果盒子已经有了宽度和高度，此时再指定内边框会撑大盒子。

解决方法

• 保证盒子跟效果图大小一致，width/height减去多出来的内边距大小
• 如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小
• （因为p是块级元素 所以和父级一样宽 是块级元素独占一行的特点 不是继承 高度宽度不能继承）

6.外边距margin

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

margin-left/right/top/bottom

复合写法和padding是一样的

典型应用（让块级盒子水平居中），先满足：

• 盒子必须制定宽度width
• 盒子左右边距设置为auto

.header {width：960 ； margin：0 auto}

margin：auto也行

行内元素或者行内块元素水平居中给其父亲元素添加text-align：center即可。

7.外边距合并

（1）相邻块元素垂直外边距的合并

（2）嵌套块元素垂直外边距的塌陷

8.清除内外边距

网页元素很多都带有默认的内外边距，不同浏览器默认的不一致。

一般是CSS的第一行代码

* {

padding：0；

margin：0；

}
 行内元素尽量只设置左右内外的编剧，不设置上下的。转换为块级和行内块元素就可以设置了。

无序列表去掉li前面的小圆点：

list-style：none；

二、PS操作

 

三、圆角边框

border-radius：length；

半径radius

四、盒子阴影

box-shadow : h-shadow v-shadow blur spread color inset

值	描述
h-shadow	必选，水平阴影的位置，允许负值（水平移动）
v-shadow	必选，垂直阴影的位置，允许负值
blur	可选，模糊距离（虚的还是实的）
spread	可选，阴影的尺寸（范围大小）
color	可选，阴影的颜色
inset	可选，将外部阴影（outset）改为内部阴影

：hover  原本没有阴影，鼠标放上去出现

五、文字阴影

text-shadow：h-shadow/v-shadow/blur/color