网页布局方式

1. 网页布局方式

   1.什么是网页的布局方式?

   网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的

1.标准流(文档流/普通流)排版方式

1.1其实浏览器默认的排版方式就是标准流的排版方式

1.2在CSS中将元素分为三类, 分别是块级元素/行内元素/行内块级元素

1.3 在标准流中有两种排版方式, 一种是垂直排版, 一种是水平排版

垂直排版, 如果元素是块级元素, 那么就会垂直排版

水平排版, 如果元素是行内元素/行内块级元素, 那么就会水平排版

2.浮动流排版方式

2.1浮动流是一种"半脱离标准流"的排版方式

2.2浮动流只有一种排版方式, 就是水平排版. 它只能设置某个元素左对齐或者右对齐

注意点:

1.浮动流中没有居中对齐, 也就是没有center这个取值

2.在浮动流中是不可以使用margin: 0 auto;

特点:

1.在浮动流中是不区分块级元素/行内元素/行内块级元素的

无论是级元素/行内元素/行内块级元素都可以水平排版

2.在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高

3.综上所述, 浮动流中的元素和标准流中的行内块级元素很像

3.定位流排版方式

1. 浮动元素的脱标现象

   1.什么是浮动元素的脱标?

   脱标: 脱离标准流

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

2.浮动元素脱标之后会有什么影响?

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

1.浮动元素排序规则

1.1相同方向上的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示在后面

1.2不同方向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动

1.3浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定(这句话的意思就是:浮动之前标签在标准流第一行,浮动之后就在浮动的第一行,浮动之前标签在标准流的第二行,浮动之后就浮动在第二行)

1. 浮动元素的贴靠现象

   1.什么是浮动元素贴靠现象?

   1.如果父元素的宽度能够显示所有浮动元素, 那么浮动的元素会并排显示

   2.如果父元素的宽度不能显示所有浮动元素, 那么会从最后一个元开始往前贴靠

   3.如果贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的左边或者右边

2. 浮动元素字围现象

   1.什么是浮动元素字围现象?

   浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象

3. 浮动元素的高度问题

   1.在标准流中内容的高度可以撑起父元素的高度

   2.在浮动流中浮动的元素是不可以撑起父元素的高度的

4. 清除浮动的方式

   1.清除浮动的第一种方式

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

注意点:

在企业开发中, 我们能不写高度就不写高度, 所以这种方式用得很少

< div class=“box1”>

< p>我是文字1< /p>

< p>我是文字1< /p>

< p>我是文字1< /p>

< /div>

< div class=“box2”>

< p>我是文字2< /p>

< p>我是文字2< /p>

< p>我是文字2< /p>

< /div>

比如这样一个例子,如果让p元素都左浮动,那么六个p元素都会显示在一行,为了解决这个问题,就得在第一个div设置高度,这样才不会显示在一行里面

1.清除浮动的第二种方式

给后面的盒子添加clear属性

clear属性取值:

none: 默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动)

left: 不要找前面的左浮动元素

right: 不要找前面的右浮动元素

both: 不要找前面的左浮动元素和右浮动元素

注意点:

当我们给某个元素添加clear属性之后, 那么这个属性的margin属性就会失效

1.清除浮动的第三种方式

隔墙法

2.外墙法

2.1在两个盒子中间添加一个额外的块级元素

2.2给这个额外添加的块级元素设置clear: both;属性

注意点:

外墙法它可以让第二个盒子使用margin-top属性

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

3.内墙法

3.1在第一个盒子中所有子元素最后添加一个额外的块级元素

3.2给这个额外添加的块级元素设置clear: both;属性

注意点:

内墙法它可以让第二个盒子使用margin-top属性

内墙法它可以让第一个盒子使用margin-bottom属性

4.外墙法和内墙法区别?

外墙法不能撑起第一个盒子的高度, 而内墙法可以撑起第一个盒子的高度

5.在企业开发中不常用隔墙法来清除浮动

伪选择器

1.什么是伪元素选择器?

伪元素选择器作用就是给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素

2.格式:

标签名称::before{

属性名称:值;

}

给指定标签的内容前面添加一个子元素

标签名称::after{

属性名称:值;

}

给指定标签的内容后面添加一个子元素

1.清除浮动的第四种方式

利用伪元素选择器清除浮动

本质上就是内墙法, 只不过是直接通过CSS代码添加了内墙, 其它特性和内墙法都一样