路飞学城Python-Day48
49-清除浮动1：给父盒子设置高度
给父盒子设置高度，这种方式不灵活，公司的产品修改的时候，要求父盒子高度变大，
不可能去手动修改
尽量不要给父元素去修改高度，不建议这样的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动1：设置盒子高度</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
}
ul{
list-style-type: none;
}
div ul li{
float: left;
width: 100px;
height: 40px;
}
.box{
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div>
<ul>
<li>
Python
</li>
<li>
web
</li>
<li>
linux
</li>
</ul>
</div>
<div class="box">
</div>
</body>
</html>
50-清除浮动2-clear：both
给浮动元素最后面加一个空的div，并且该元素不浮动，这样的方式称为内墙法，然后设置clear:both->清除所有的浮动影响，这样的方式无缘无故加了div标签，结构冗余，不推荐使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动2：clear</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
}
ul{
list-style-type: none;
}
div ul li{
float: left;
width: 100px;
height: 40px;
}
.box{
width: 200px;
height: 100px;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div>
<ul>
<li>
Python
</li>
<li>
web
</li>
<li>
linux
</li>
<div class="clear"></div>
</ul>
</div>
<div class="box">
</div>
</body>
</html>
51-清除浮动3-伪元素清除法(常用)
.clearfix:after{
content: '';
clear: both;
display: block;
}
52-清除浮动4-overflow：hidden(常用)
overflow: hidden;是在内容超出部分就隐藏
overflow: scorll:不论是否需要，用户代理都会提供一种滚动机制，而且是有可能(不是一定)会出现滚动条，这样会导致在写代码的时候导致前端的页面不可控
53-margin垂直方向塌陷问题
当给两个兄弟盒子设置垂直方向上的margin，那么排列的时候会以较大的为准，我们称为这种现象为塌陷
如果是浮动的盒子，垂直的方向上不塌陷
.box1{
width: 300px;
height: 200px;
margin-bottom: 20px ;
}
.box2{
width: 400px;
height: 300px;
margin-top: 50px;
}
54-margin：0 auto水平居中盒子
1.水平居中的盒子一定要有宽度，要有明确的width，否则就会继承父标签的宽度，浮动的时候是不能用的，
2.只有标准流下的盒子才能使用margin，当一个盒子浮动了，固定定位、绝对定位了，margin 0 auto就不能使用
3.居中盒子，而不是居中文本，文字水平居中使用text-align:center
55-善于使用父亲的padding,而不是margin
56-文本属性和字体属性
div{
width: 300px;
height: 100px;
border: 1px solid red;
/*设置字体的大小,px是像素的意思*/
/*字体的单位还有rem em %*/
/*em主要是用于移动端的字体样式大小的调节*/
/*rem也是移动端的布局使用*/
font-size: 20px;
}
Win a contest, win a challenge
posted on 2018-08-16 22:18 pandaboy1123 阅读(118) 评论(0) 编辑 收藏 举报
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南