9.14 web基础知识

Posted 2021-01-06 wed学习者

1.补充

   margin的margin：0 auto；可以解决元素的居中

2.css层叠的问题

      css的两个性质

            1.继承性：就是给父级设置的属性，同样也发生在了他的子代身上

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

                  A，选不中，走继承关系，（font，color，text）继承的权重是0 ，！impont不起作用

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

                 B，选中了

                       a，权重问题，谁的权重大走谁的样式

                       b，权重相同，谁在后选谁

                       c，纯标签和类没有可比性，纯类和id也没可比性。

3.标准文档流：浏览器分为块级和行级元素，以从上往下从左往右的形式以此排版。这就是标准文档流

             1.   浮动folat

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

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

                                      第一个加了folat，脱离了标准文档流，对于浏览器来说第二个元素就变成了标准文档                                流中的第一个，于是就会把第二个排在第一位。而第一个任然存在，所以就叠加了。

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

                            C，浮动元素会文字环绕

扩展：是元素脱离标准流的方法

            1.浮动float

             2.绝对定位 position：absolute

             3.固定定位 position：fixed；     fixed固定的

浮动带来的坏处

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

清除浮动

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

           2.给父级添加overflow：hidden;

           3.给浮动元素的后面添加一空div添加样式为clear：both；

伪类选择器

      只要选择器后面带:,都可以说他是伪类选择器

 

        a:link{}（正常颜色）  a:hover{} （鼠标悬浮） a:visited{}（访问过后的颜色）  a:active{}  （鼠标点击的那一刻）p:after{} p:before{}

        四种状态的顺序不能变，必须是（正常颜色，访问过后的颜色，鼠标悬浮，鼠标点击的时候）

元素 和伪类选择器的区别

伪元素有两个冒号 如p::after{}  伪类选择器有一个冒号p:hover{}