标准文档流及脱离标准文档流的方法和float浮动用法

1.标准文档流

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

  浮动 float:left/right;

  效果:元素都加浮动,后面的元素会紧跟这前面的元素并排排列。

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

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

    行级元素加了float,脱离标准流,块不像块,行不像行,能设置宽高,能并排排列。

    Display就没有任何意义了。

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

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

2.使元素脱离标准流的方法

  1.        浮动 float

  2.        绝对定位position:absolute

  3.        固定定位position:fixed;    fixed固定的

  浮动带来的坏处

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

清除浮动

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

2.        给父级添加overflow:hidden;

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

4.  给浮动元素的父级添加一个类clearfix

伪类选择器  

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

a:link{}  a:hover{}  a:visited{}  a:active{}  p:after{} p:before{}

a的四个顺序不能改变

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

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

备注
  Margin:0auto;和text-align:center;
  Margin居中是对自身  text-align是对元素内部的文本居中的
  Visibility:hidden;和display:none;
  Visibility隐藏了之后还占据空间   display隐藏后不占据空间

猜你喜欢

转载自www.cnblogs.com/Shinigami/p/9655933.html