网页的布局方式

Posted 2021-01-09 wzlol

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、浮动元素浮动之后的位置，有浮动复原之前在标准流中的位置来确定