CSS4.0

1. 盒子模型

1.1 看透网页布局的本质

1. 网页基本上都是盒子box
2. 利用CSS设置好盒子样式，然后摆放到相应位置
3. 往盒子里面装内容

1.2 盒子模型的组成

1.3 边框(border)

border : border-wight || border-style || border-color

边框的属性(只记住主要的3个)

border-style: solid;||border-style: dashed;||border-style: dotted;

边框的颜色

border-color: pink;

边框的简写

border: 1px solid red; 没有顺序

边框分开写法

border-top: 1px solid red;只设置上边框

只设置一条边的时候的简写：

border: 1px solid blue;
border-top: 1px solid red;

这里用到了样式的重叠性

1.4 表格的细线边框

border-collapse:collapse;

标题要高一点的话单独拎出来：

1.5边框影响盒子的实际大小

边框会额外増加盒子的实际大小。因此我们有两种方案解决：

1.测量盒子大小的时幌不量边框

2.如果测量的时候包含了边框，则需要 width/ height.减去边宽度

1.6 内边距(padding)

padding属性用于设置内边距

内边距简写方法

padding:5px 10px 20px 30px

内边距也会影响盒子的大小

当我们给盒子指定 padding值之后，发生了2件事情：

内容和边框有了距离，添加了内边距。

2.padding影响了盒子实际大小

也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子

解决方案： 如果保证盒子跟效果图大小保持一致，则让 width/ height减去多出来的内边距大小即可

新浪导航案例- padding影响盒子好处

如果盒子本身没有指定 width/ heighth属性，则此时 padding不会撑开盒子大小

1.7外边距(margin)

margin属性用于设置外边距，即控制盒子和盒子之间的距离

和padding一样的简写

外边距的典型应用

外边距可以让块级盒子水平居中，但是必须满足两个条件：

①盒子必须指定了宽度（ width)

②盒子左右的外边距都设置为auto。

.header { width:960px; margin:0 auto;}

==注意：==以上方法是让块级元素水平居中，==行内元素或者行内块元素水平居中给其父元素添加text-align:center即可

1.8 外边距合并

1.使用 margin定义块元素的垂直外边距时，可能会出现外边距的合并

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

塌陷解决方案

1.9 清除内外边距

*{
    padding:0;清除内边距
    margin:0;清除外边距
}

这也是我们css的第一行代码

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转換为块级和行内块元素就可以了

2.PS 基本操作

3. 综合案例

小总结

1. 布局为啥用不同盒子我只想用div?
   标签都是有语义的，合理的地方用合理的标签。比如产品标题就用h,大量文字段洛就用
   
2. 为啥用辣么多类名？
   类名就是给每个盒子起了一个名字，可以更好的找到这个盒子选取盒子更容易后期维护也方便
   
3. 到底用 margin还是 padding?
   大部分情況两个可以混用，两者各有优缺点，但是根据实际情兄，总是有更简单的方法实现
   
4. 自己做没有思路？
   布局有很多种实现方式，同学们可以开始先模仿我的写法，然后再做出自己的风格

4. 圆角边框

在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。

border- radius属性用于设置元素的外边框园角。

• 参数值可以为数值或百分比的形式

• 如果是正方形，想要设置为个圆，把数值修改为高度或者宽度的半即可，或者直接写为50%

• 如果是个矩形，设置为高度的一半就可以做

• 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角

5.盒子阴影(重点)

CSS3中新増了盒子阴影，我们可以使用box- shadow属性为盒子添加阴影

注意

1. 默认的是外阴影（ outset,但是不可以写这个单词，否则导致阴影无
   
2. 盒子阴影不占用空间，不会影响其他盒子排列。

6.文字阴影