H5前期知识点总结9月14日

Posted 2021-01-06 diwangkaige

9.14

★知识补充

margin的问题：margin：0 auto；可以解决元素在网页的居中问题（记得设置宽度）

1、css层叠样式表的问题

CSS的两个性质

（1）继承性

（2）层叠性

        a：选不中，走继承性（font系列 color text）继承性的权重为0

       ★如果这个元素有多个父级元素设置了这样的属性，走就近原则

        b：选中了

       ★权重的问题，谁的权重大，就选谁的样式

　　★权重相同，谁在后选谁，因为覆盖了

　　★纯标签和类没有可比性，纯类和ID也没有可比性

2、标准文档流

浏览器的排版是根据元素的特征（块和行级），从上往下，从左到右排版，这就是标准文档流。

★浮动 float：left/right;

   效果：元素都加浮动，后面的元素会跟前面的元素并排排列

   A:只要加了float，这个元素就会脱离标准文档流

   行级元素加了float，脱离了标准文档流，块不像块，行不像行，能设置宽高，能并排排列，则也不用再给行级标签加display了，没有意义了

　B：浮动的元素会贴靠在一起

　C:浮动的元素会文字环绕

★拓展知识点 使元素脱离标准流的方法

1、浮动 float

2、绝对定位 position=absolute；

3、固定定位 position=fixed；（fixed：固定的）

★浮动带来的坏处：撑不起父级元素的高度

★清除浮动（的坏处）：

（1）给浮动的父级元素添加高度

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

（3）给浮动元素的后面添加一个空的div标签 添加样式为 clear：both；

（4）给浮动元素的父级添加一个类，叫做“clearfix”

    这个类写的样式属性有

    .clear：after{

　　　　　　　content:"";

　　　　　　　display:block;

　　　　　　　clear:both;

  　　　　　　  height:0;

　　　　　　　visibility:hidden;

　　　　　　}

★伪类选择器：只要后面带冒号:都可以说是伪类选择器

★伪元素和伪类选择器的区别

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

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

★超链接a的伪类选择器

a:link    正常的颜色

a:visited      访问过后的颜色

a:hover      鼠标悬浮

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

a的四种状态的顺序不能变