网页的布局方式

1、什么是网页的布局方式

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

 

1、标准流（文档流/普通流）排版方式

　　1.1、浏览器默认的排版方式

　　1.2、在css元素中，分为行内元素，块级元素，行内块级元素

　　1.3、在标准流中有两种排版，一种是垂直排版，一种是水平排版；

　　垂直排版：如果元素是块级元素

　　水平排版：如果元素是行内块级元素

　　

2、浮动流排版方式

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

　　2.2、只有一种排版方式，就是水平排版；

　　　　它只能设置某个元素向左或者向右对齐

注意：

　　1、浮动流中没有居中对齐，center,的方式；

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

特点：

　　1、在浮动流中是不区分块级元素/行内元素/行内块级元素都可以水平排版

　　2、在浮动流中不论是块级元素/行内元素/行内块级都可以设置宽高的。

 

什么是浮动元素的脱标？

　　脱标：脱离标准流

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

　　2

浮动元素脱标有什么影响？

　　

浮动元素排序规则：

　　1、相同方向上的浮动元素，先浮动的元素会显示在前面，后浮动的元素会显示在后面

　　2、不同方向上的浮动元素，左浮动会找左浮动，右浮动找右浮动；

　　3、浮动元素浮动之后的位置，有浮动复原之前在标准流中的位置来确定

浮动元素是不能撑起父元素的高度的；

 

清除浮动方式：

　　1、设置固定的高宽

　　2、给后面的盒子设置clear属性；

　　　　none:默认取值，按照浮动元素的排序规则来排序

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

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

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

　　3、隔墙法

　　　　外墙法：在两个盒子中间添加一个额外的块级元素，给这个额外添加的块级元素添加margin-top属性

　　　　注意点：可以让第二盒子使用margin-top属性，但是不能是第一个盒子使用margin-bottom属性

　　　　内墙法：在第一个盒子的所有子元素添加一个额外的块级元素，给这个额外添加的块级元素添加clear:both属性

　　　　注意点：可以让第二盒子使用margin-top属性，第一个盒子使用margin-bottom属性

内墙法与外墙法的区别？

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

　

伪元素选择器

1、什么是伪元素选择器？

　　伪元素标签选择器，就是给指定标签的内容前面添加一个子元素选择器；

　　内容可以超出元素的范围。

　标签名称：{

　　属性名称：值；

　　}

　　div:before{content:"爱你"；display:block;}

　　div:after{content:"么么哒"，display:block;}

　　*zoom:1;兼容伪元素选择器的clear属性