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{}

        

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

原文地址:https://www.cnblogs.com/mo123/p/9651182.html