9.14

备注：margin：0 auto：做网页常用的居中方式（会解决元素的居中/前提是给这个元素设计宽度）

一、CSS层叠样式表

1.继承性

2.层叠性：选择器的一种选择能力，谁的权重大就选谁。

A、选不中，走继承性（font-color-text）继承性的权重为0

a、有多少父级都设置了这样的样式，走就近原则。

B、选中

a、权重的问题，权重大，就选谁的样式。class的权重为10 ，ID为100，普通标签为1，所以在同一标签多种起名属性的样式中，选权重最大的标签样式。

b、权重相同，谁在后选谁的样式。比如：在同种标签属性的多种样式中，谁离所想改变的内容最近就选谁。

c、纯标签与类无可比性、纯类与ID也无可比性。

二、标准文档流

1.浏览器的排版是根据元素的特征（块和行级）以上往下，从左往右排版。

2.浮动（float：left、right）

A、效果：元素都加浮动，后面的元素紧跟前面的元素并排排列。只要加了float，这个元素就会脱离标准文档流。

备注：a、第一个加了float，脱离标准文档流，对于浏览器来说第二个元素就变成了标准文档流中的第一个，于是就会把他们排在第一位，而第一个依然存在，所以会叠加。

          b、 行级元素加了float，脱离标准流，块不像块，行不像行，能设置宽高，能并排排列，dispaly就没意义了。

B、浮动的元素会紧紧的贴靠在一起。

C、浮动的元素会文字环绕。

拓展：使元素脱离标准流的方法。

1.浮动：float

2.绝对定位：position：absolute；

3.固定定位：position：fixed；

浮动带来的坏处

1.给元素加了浮动，撑不起父级的高度。

清除浮动

1.给浮动父级元素添加高度

2.给父级元素添加overflow：hidden；

3.给最后的浮动元素后面添加一个空的div添加样式为<div  style="clear:both;"></div>

4.常用的方法（伪类选择器）

给浮动元素的父级添加一个class=“clearfix”,这个类的样式属性有：

clearfix:after{                                           <ul     class="clearfix">

                    content:"';                                         li*7

                    display:block;

                    clear:both;

                   height:0;

                   visibility:hidden;       

伪类选择器：只要选择器后面带；都可以叫伪类选择器。

a:link{}----正常的属性

a:visited{}-----访问过后的样式

a:hover{}---鼠标悬浮

a:active{}-----激活鼠标点击的那一刻

p:after{}-----属性值

a:before{}----属性值

伪元素与伪类选择器的区别

伪元素有两个冒号如：p::after{}

伪类选择器有一个冒号：p:hover{}

        

 

 

 

 

 

 

 

 

 

---恢复内容结束---