补充和拓展

1.补充

margin的margin:0 auto;会解决元素的居中

2.CSS层叠的问题

CSS有两个性质

  1.继承性

  2.层叠性 选择器的是一种选择能力

    A,选不中,走继承性(font-color text)继承性的权重性的权重是

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

    B,选中

      a),权重的问题,权重大,就选谁的样式

      b),权重相同,谁在后选谁

      c),纯标签和类没有可比性,纯类和id也没有可比性

  3.标准文档流

  浏览器的排版是根据元素的特征(块和行级),从上到下,从左到右排版,这就是标准文档浏

只要加了float,这个元素就会脱离文档流

第一个加了float,脱离了标准文档流,对于浏览器来说,第二个元素就变成了标准文档流中的第一个,于是就会把它排在第一位,有第一个依然存在。

行级元素加了float,脱离标准流,块不像块,行不像行,能设置宽高,并能排列。Display就会没有任何意义

B,浮动的元素会文字环绕(文字环绕图片一周)

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

C,浮动的元素会紧紧贴靠在一起

       a).权重的问题,权重大,就选谁的样式        b).权重相同,谁在后选谁        c).纯标签和类没有可比性,纯类喝id也没有可比性        3.标准文档流       浏览器的排版是根据元素的特征(块和行级),从上到下,从左到右排版,这就是标准文档流,     浮动:float:left/right    效果:元素都加浮动,后面的元素会紧跟着前面的元素并排排列

只要加了float,这个元素就会脱离文档流 第一个加了float,脱离了标准文档流,对于浏览器来说,第二个元素就变成了标准文档流中的第一个,于是就会把它排在第一位,有第一个依然存在。

行级元素加了float,脱离标准流,块不像块,行不像行,能设置宽高,能并排排列。Display就会没有任何意义。 B,浮动的元素会紧紧贴靠在一起、 C,浮动的元素会文字环绕(文字环绕图片一周) 拓展:使元素脱离标准流的方法      1.浮动 float      2.绝对定位:position:absolute;      3固定定位: position:fixed(固定的); 浮动带来的坏处      1.给元素加了浮动,撑不起父级的高度 清除浮动      1.给浮动的父元素添加高度      2.给父级添加overflow:hidden;      3.给浮动元素的后面添加一个空的div 添加样式为clear:both;

     4.给浮动元素的父级添加一个clearfx 这个类写的样式属性有:

伪类选择器(第九种选择器) 只要选择器后面带:都可以说他是伪类选择器

    伪元素

auto自适应 float浮动 display显示 block

原文地址:https://www.cnblogs.com/xyangjie/p/9656236.html