网页的布局方式及浮动元素

网页布局方式其实就是浏览器是如何对网页中的元素进行排版的
1.标准流(文档流、普通流)排版方式

1.1  其实浏览器默认排版方式就是标准流排版方式
1.2 CSS中将元素分为三类,分别为块级元素、行内元素
行内块级元素
1.3 在标准流中有两种排版方式,一种是垂直排版一种是水平排版

垂直排版,如果元素是块级元素,那么就会垂直排版
水平排版,如果元素是行内元素、行内块级元素、那么就会水平排版
  1. 浮动流的排版方式
2.1  浮动流是 一种“半脱离标准流”的排版方式
2.2  浮动流只有一种排版方式,那就是水平排版, 它只能设置某个元素左对齐或者右对齐

注意点:

1.浮动流中没有居中对齐,也就是没有center这个值
2.margin:0 auto; 这个不能使用的

特点:

1.浮动流中不区分块级元素、行内元素、行内块级元素,无论块级元素、行内元素、行内块级元素都是水平排版
2. 在浮动流中无论是块级元素、行内元素、行内块级元素都可以设置宽高
3.综上所述:浮动流中的元素和标准流中的行内块级元素很像

3.定位流排版方式

  1. 浮动元素脱标
    4.1 浮动元素脱标就是脱离标准流

       当某一个元素浮动之后,那么这个元素看上去就像被标准流中删除了一样,这个就是浮动元素脱标
    

4.2 浮动元素脱标的影响

    如果前面一个元素浮动了,而后面的一个元素没有浮动,那么这个时候前面的一个元素就会盖住后面的一个元素。

4.3 浮动元素的排序规则:

1.1 相同方向上的浮动元素,先浮动的元素会显示在前面,后浮动的元素会显示在后面
1.2 不同方向上的浮动元素,左浮动会找左浮动,右浮动会找右浮动
1.3 浮动元素浮动之后的位置,有浮动元素浮动之前在标准流中的位置决定的
  1. 浮动元素的贴靠现象

     5.1 如果父元素的宽度能够显示所有浮动的元素,那么浮动的元素会并排显示
     5.2  如果父元素的宽度不能显示所有浮动元素,那么会从最后一个元素开始往前贴靠
     5.3 如果贴靠了前面所有浮动元素之后都不能显示,最终会贴靠到父元素的左边或者右边
    
  2. 浮动元素的字围现象

     可以用来做图文混排的效果,没有浮动的元素会给浮动元素让位置
    

7.开发中什么时候使用标准流什么时候使用浮动流?

垂直方向使用标准流,水平方向使用浮动流
对于一个复杂的界面
7.1 从上到下布局
7.2 从外向内布局
7.3 水平方向可以划分为一左一右再对左边或者右边进行进一步布局
  1. 浮动元素的高度问题

     在标准流中,内容的高度可以撑起父元素的高度,在浮动流中,浮动的元素不可以撑起父元素的高度的
    
  2. 清楚浮动的方式

方式一:

给前面一个父元素设置高度

方式二:给后面的盒子添加clear属性

none:默认取值,按照浮动元素的排序规则来排序(左浮动找左浮动,右浮动找右浮动)
left: 不要找前面的左浮动元素
right:不要找前民的右浮动元素
both:不找左也不找右浮动

方式三:隔墙法

1.外墙法

2.1 在两个盒子中间添加一个额外的块级元素
2.2 给这个额外添加的块级元素设置clear:both;属性

2.内墙法

 2.1 在第一个盒子的所有有子元素的最后添加一个额外的块级元素
2.2 给这个额外添加的块级元素设置clear:both;属性

注意点:

在开发中能不设置高度就不设置高度
当我们给某个元素添加clear属性之后,那么这个属性
的margin属性就会失效

外墙法:
外墙法可以让第二个盒子使用margin-top属性
不可以让第一个盒子使用margin-bottom属性

内墙法:
 内墙法可以让第一个盒子使用margin-bottom属性
也可以让第二个盒子使用margin-top属性

区别:
外墙法不能够撑起第一个盒子的高度,内墙法可以撑起第一个盒子的高度

10.伪元素选择器


你可能感兴趣的:(网页的布局方式及浮动元素)