CSS选择符及盒模型

一.选择符

1.类型选择符（标签选择符）

特点：能选中当前结构里面（全部同名）标签。
应用：统一某一标签样式时或清除某一标签默认样式时。

2.id选择符

特点：（唯一性！）在同一个页面里面，一个id名只能使用一次。
应用：来划分网页外围结构

3.类选择符（class选择符）

特点:
①:一个元素可以有多个类名,类名可以重复出现 eg:<div class="名称1 名称2 名称3 名称4..."></标签>
②:可以制定一类样式.

4.群组选择符

（以逗号分隔的方式,把多个选择器组成一组,给整组添加样式）

5.包含选择符

( 通过父元素找子元素 ，中间通过空格隔开)

6.通配符

*{ }

（* 选择页面中所有的元素！）

注：写CSS样式的时候，先将*{margin:0;padding:0;}写在样式表里，为了将页面上所有元素的默认外边界和填充都清除。

7.伪类选择符

①初始状态                  ：link{}

②访问过的状态           ：visited{}

③鼠标滑过时的状态    ：hover{}

④鼠标按下时的状态    ：active{}

细节：a:①②④一般用在超链接上，而③除了可以用在超链接上，还能给其他元素添加

b.当四个超链接伪类选择器联合使用时，必须要遵循书写顺序，正确顺序是①②③④，顺序错误会无效。

二.盒模型

1.padding用法：

①padding是为了调整 子元素 在 父元素里面位置关系。

②padding的特点：padding值会把盒子撑大。如果想让盒子保持原有大小，需要在宽高的基础上减掉padding值。

③padding的取值不能为负。

2.margin的用法：

①margin控制的是 同级元素 之间的位置关系。

②margin不会对盒子本身的宽高造成影响。

③margin可以设置负值。

④margin:0 auto;  （让当前元素在父元素里面左右居中。）

margin常出现的bug:

a:当父元素和第一个子元素都没有设置浮动的情况下，如果给第一个子元素添加(margin-top)  会错误的把margin-top加在父元素上面。

b: 上下相邻两个元素之间的margin值，不会叠加，按照最大值去设置。

3.拓展：

盒子在网页真正所占据的空间应为：

宽度：（width + padding-left/right + border-left/right + margin-left/right）

高度：（height+ padding-top/bottom + border-top/bottom + margin-top/bottom）  

                                                                                                        

                                                                                                                        逆战冲冲冲