-
目录
-
清除浮动的方法
-
额外标签法
-
在浮动元素末尾添加空标签 如<div style="clear:both"></div>
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { float: left; height: 100px; background-color: beige; } .foooter { height: 200px; background-color: black; } .clear { clear: both; } </style> </head> <body> <div class="box"> <div class="damao"></div> <div class="ermao"></div> <div class="clear"></div> </div> <div class="footer"></div> </body> </html>
-
-
父级添加overflow属性
-
将overflow属性设置为hidden、auto或scroll
-
优点:代码简洁
-
缺点:无法显示溢出部分
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { overflow: hidden; width: 800px; border: 1px solid blue; margin: 0 auto; } .damao { float: left; width: 300px; height: 200px; background-color: purple; } .ermao { float: left; width: 200px; height: 200px; background-color: pink; } .foooter { height: 200px; background-color: black; } </style> </head> <body> <div class="box"> <div class="damao"></div> <div class="ermao"></div> </div> <div class="footer"></div> </body> </html>
-
-
父级添加after伪元素
-
代码
-
.clearfix:after {
-
content: "";
-
display: block;
-
height: 0;
-
clear: both;
-
visibility: hidden;
-
}
-
.clearfix {
-
/* IE6、7专有 */
-
zoom: 1;
-
}
-
再在父盒子里面添加clearfix属性
-
额外标签法的升级版
-
优点:没有增加标签,结构更加简单
-
缺点:照顾低版本浏览器
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* IE6、7专有 */ zoom: 1; } .box { width: 800px; border: 1px solid blue; margin: 0 auto; } .damao { float: left; width: 300px; height: 200px; background-color: purple; } .ermao { float: left; width: 200px; height: 200px; background-color: pink; } .foooter { height: 200px; background-color: black; } </style> </head> <body> <div class="box clearfix"> <div class="damao">大毛</div> <div class="ermao">二毛</div> </div> <div class="footer"></div> </body> </html>
-
-
父级添加双伪元素
-
代码
-
.clearfix:before,
-
.clearfix:after {
-
content: "";
-
display: table;
-
}
-
.clearfix:after {
-
clear: both;
-
}
-
.clearfix {
-
/* IE6、7专有 */
-
zoom: 1;
-
}
-
优点:代码更加简洁
-
缺点:照顾低版本浏览器
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { /* IE6、7专有 */ zoom: 1; } .box { width: 800px; border: 1px solid blue; margin: 0 auto; } .damao { float: left; width: 300px; height: 200px; background-color: purple; } .ermao { float: left; width: 200px; height: 200px; background-color: pink; } .foooter { height: 200px; background-color: black; } </style> </head> <body> <div class="box clearfix"> <div class="damao">大毛</div> <div class="ermao">二毛</div> </div> <div class="footer"></div> </body> </html>
-
-
为什么要清除浮动
-
父级没有高度
-
子盒子浮动了
-
影响下面布局的时候
-
-
-
-
ps切图
-
-
图层切图
-
方法:右击图层--快速导出为PNG
-
合并为一个图层:shift连选多图--ctrl+e合并--右键快速到处PNG
-
-
切片切图
-
左边栏找到切片工具--框选所需区域--文件菜单导出,存储为web所用格式--保存为jpg格式--选择品质--存储--切片:选中的切片
-
-
cutterman插件
-
cutterman是photoshop的插件,能够自动将需要的图层输出。(完整版的才能使用)(羽兔网下载Photoshop)
-
使用技巧:窗口--扩展功能--选择web--选择图片格--输出
-
-
-
https://www.bilibili.com/video/BV14J4114768?p=269&spm_id_from=333.880.my_history.page.click
css学习第六天
于 2022-08-09 21:15:49 首次发布