网页布局方式其实就是浏览器是如何对网页中的元素进行排版的
1.标准流（文档流、普通流）排版方式
1.1 其实浏览器默认排版方式就是标准流排版方式
1.2 CSS中将元素分为三类,分别为块级元素、行内元素
行内块级元素
1.3 在标准流中有两种排版方式,一种是垂直排版一种是水平排版
垂直排版，如果元素是块级元素，那么就会垂直排版
水平排版，如果元素是行内元素、行内块级元素、那么就会水平排版
- 浮动流的排版方式
2.1 浮动流是 一种“半脱离标准流”的排版方式
2.2 浮动流只有一种排版方式，那就是水平排版， 它只能设置某个元素左对齐或者右对齐
注意点：
1.浮动流中没有居中对齐，也就是没有center这个值
2.margin：0 auto; 这个不能使用的
特点：
1.浮动流中不区分块级元素、行内元素、行内块级元素，无论块级元素、行内元素、行内块级元素都是水平排版
2. 在浮动流中无论是块级元素、行内元素、行内块级元素都可以设置宽高
3.综上所述：浮动流中的元素和标准流中的行内块级元素很像
3.定位流排版方式
-
浮动元素脱标
4.1 浮动元素脱标就是脱离标准流当某一个元素浮动之后，那么这个元素看上去就像被标准流中删除了一样，这个就是浮动元素脱标
4.2 浮动元素脱标的影响
如果前面一个元素浮动了，而后面的一个元素没有浮动，那么这个时候前面的一个元素就会盖住后面的一个元素。
4.3 浮动元素的排序规则：
1.1 相同方向上的浮动元素，先浮动的元素会显示在前面，后浮动的元素会显示在后面
1.2 不同方向上的浮动元素，左浮动会找左浮动，右浮动会找右浮动
1.3 浮动元素浮动之后的位置，有浮动元素浮动之前在标准流中的位置决定的
-
浮动元素的贴靠现象
5.1 如果父元素的宽度能够显示所有浮动的元素，那么浮动的元素会并排显示 5.2 如果父元素的宽度不能显示所有浮动元素，那么会从最后一个元素开始往前贴靠 5.3 如果贴靠了前面所有浮动元素之后都不能显示，最终会贴靠到父元素的左边或者右边 -
浮动元素的字围现象
可以用来做图文混排的效果，没有浮动的元素会给浮动元素让位置
7.开发中什么时候使用标准流什么时候使用浮动流？
垂直方向使用标准流，水平方向使用浮动流
对于一个复杂的界面
7.1 从上到下布局
7.2 从外向内布局
7.3 水平方向可以划分为一左一右再对左边或者右边进行进一步布局
-
浮动元素的高度问题
在标准流中，内容的高度可以撑起父元素的高度，在浮动流中，浮动的元素不可以撑起父元素的高度的 -
清楚浮动的方式
方式一：
给前面一个父元素设置高度
方式二:给后面的盒子添加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.伪元素选择器
<style>
*{
margin:0;
padding:0;
}
div{
width: 200px;
height: 200px;
background-color: red;
}
/* p{
width: 50px;
height: 50px;
background-color: pink;
}*/
div::before{
display: block;
width: 50px;
height: 50px;
content: '8888';
}
div::after{
/*指定添加的子元素中存储的内容*/
content: '9999';
width: 50px;
height: 50px;
background-color: green;
display: block;
/*隐藏添加的子元素*/
visibility: hidden;
}
</style>
网友评论