文字界面
1.清空所有边距
2.从外向内布局,从上到下布局
3.用span修改局部界面
伪元素选择器
找到元素,在该元素的前面或者后面添加一个子元素。
.head::before{
属性:值;
}
.head::after{
属性:值;
}
.head::before{
content: "爱你";
height: 20px;
width: 100px;
display: inline-block;/*设置block或者inline-block才可以修改宽高*/
background-color: green;
visibility: hidden;/*将添加的元素隐藏起来*/
}
网页的布局方式
指浏览器是如何对网页中的元素进行排版
先分块,在从外到内,从上到下。
1.标准流(文档流/普通流)排版方式
1.1浏览器默认的排版方式
1.2元素是块级元素就会垂直排版,元素是行内元素、行内块级元素就会水平排版
2.浮动流排版方式
2.1是一种半脱离标准流的排版方式
2.2浮动流排版只有水平排版方式,它只能设置某个元素左对齐或者右对齐。
2.3 float:left/right/none/inherit(继承父元素的float属性);
float: left;
和父元素的左边对齐
注意
1.在浮动流里没有居中对齐,margin: 0 auto;
在浮动流里无效。
2.在浮动流中是不区分块级元素/行内元素/行内块级元素,它们都可以显示在同一行,进行水平排版。
3.在浮动流中,块级元素/行内元素/行内块级元素都可以设置宽高。
2.4浮动元素脱标
1.脱标:脱离标准流
当某一元素浮动之后,那么这个元素看上去就像被从标准流中删除一样,它之后的元素就会跑到它所处的位置。
2.如果前面的元素浮动了,后面的元素没有浮动,那么前面的元素就会盖住后面的元素。float: left;
时
2.5浮动元素的排序规则
1.相同方向上(左右)的浮动,先浮动的元素会显示在前面,后浮动的元素会显示在后面。(浮动的元素不会盖住浮动的元素,只会盖住标准流的元素)
2.不同方向上(左右)的浮动,左浮动会找左浮动,右浮动会找右浮动。
3.浮动元素浮动之后的位置,由浮动元素之前在标准流中的位置来确定。(浮动之前在第几行,浮动之后就在第几行,浮动之前的第几行是指如果前面有浮动元素,该元素在标准流里补位的位置)
2.6浮动元素的贴靠现象
元素浮动之后的宽度如果超过父元素的宽度时,超出宽度的那些元素会自动找前一个元素去贴在它旁边,如果还不够,就会继续找前面的前面的元素······只到那些元素不超过父元素。贴靠到父元素是如果还不够,也只能贴靠到父元素了。
2.7浮动元素的字围现象
给前面的元素设置浮动后,后面的文字不会盖住浮动元素,而是会围在前面的那个元素的周围,常用来做网页中的图文混排。
2.8浮动元素高度问题
在标准流中,内容的高度可以撑起父元素的高度
在浮动流中,内容的高度不能撑起父元素的高度
2.9清除浮动
2.9.1.给父元素设置高度
因为在浮动流中,内容的高度不能撑起父元素的高度,所以要给父元素设置高度。
但是在企业开发中能不写高度就不写高度,所以这种方式尽量不要用。
2.9.2.clear: none/left/right/both;
clear: none;
两边都允许浮动
clear: left;
不去找前面左边浮动的元素(左边不允许浮动)
clear: both;
不去找前面左、右浮动的元素(两边都不允许浮动)
注意
在设置了clear属性之后,这个元素的margin属性就会失效。
原因:因为此时的margin-top相当于是和父元素的外边距,如果没有边框属性,该元素和父元素都会被顶下来。
2.9.3.隔墙法
1.外墙法
在两个盒子中间添加一个额外的块级元素,并且给这个额外的盒子添加clear: both;
属性
注意
外墙法可以让第2个盒子设置margin-top属性,但不能让第1个盒子设置margin-bottom属性。
所以直接给额外的盒子设置宽高即可。
.wall{
clear: both;
}
.h20{
height: 50px;
}
<div class="head">
<div class="l1"></div>
<div class="l2"></div>
</div>
<div class="wall .h20"></div>
<div class="content">
<div class="l4"></div>
<div class="l9"></div>
2.内墙法
在第一个盒子所有子元素的最后加个墙
注意
外墙法可以让第2个盒子设置margin-top属性,也可以让第1个盒子设置margin-bottom属性,也可以给额外的盒子添加高度来实现两个盒子之间的隔开。
<div class="head">
<div class="l1"></div>
<div class="l2"></div>
<div class="wall h20 p20"></div>
</div>
<div class="wall h20"></div>
<div class="content">
<div class="l4"></div>
<div class="l9"></div>
</div>
外墙法不能撑起第1个盒子的高度,内墙法可以撑起第1个盒子的高度。
不常用隔墙法,因为要多占一个盒子。
2.9.4伪元素元素清除浮动
给第1个盒子添加伪元素,推荐
.head::after{
content: "";/*内容为空*/
display: block;
height: 0;
visibility: hidden;/*隐藏起来*/
clear: both;/*设置clear属性*/
}
过去的浏览器不支持
.head{
*zoom:1;/*写上这句话可以让它在过去的浏览器里也能使用*/
}
3.定位流排版方式