浮动1
问题1父级塌陷：子级浮动，父级不浮动，父级的高度不再被子级的内容撑起
<style>
.fuji{border: solid 5px black;}
.ziji{border: solid 5px red;height: 100px; float: left;}
</style>
</head>
<body>
<div class="fuji">
<div class="ziji"></div>
</div>
解决：.fuji{border: solid 5px black;overflow: hidden;}/*解决父级塌陷*/
.ziji{border: solid 5px red;height: 100px; float: left;}
问题2
Img{display：block；}去除无故出现的底部空隙
问题3
弹性居中（盒子里面的文字始终在中间）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div{border: 2px solid red;
width: 0 auto;margin: 0 100px;/*width: 1000px;margin:0 auto;*/
display: flex;/*伸缩盒子（前提）*/
justify-content: center;/*水平方向对齐*/
align-items: center;/*水平方向对齐(必须有高度)*/}
img{display: block;}
</style>
</head>
<body>
<div>
<img src="../images/face1.gif">
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<meta content="width=device-width, initial-scale=1.0;maximum-scale=1.0,user-scaleable=0"name="viewport">
<style>
/*临时查看框的位置，便于观看盒子范围，最后可以删掉*/
div{border: 1px solid gray;}
/*css重置*/
div{box-sizing: border-box;}
body{margin: 0;}
img{display: block;}/*清除无故图片底部空隙*/
/*页头修饰*/
.header img{margin:0 auto;}
/*通栏广告*/
.tonglan{display: flex;justify-content: center;}/*只显示中间*/
/*产品区域*/
.chanpin_hezi{ : hidden;}通栏盒子与产品盒子之间有一条重合，溢出隐藏
.chanpin{float: left;width: calc(100% / 3);}平分三个产品的宽度
.chanpin img{width: 100%;}每个产品100%显示
</style>
</head>
<body>
<!--页头-->
<div class="header"><img src="images/logo.png"></div>
<!--通栏-->
<div class="tonglan"><img src="images/banner01.png"></div>
<!--产品区域-->
<div class="chanpin_hezi">
<div class="chanpin"><img src="images/sucai1.jpg"></div>
<div class="chanpin"><img src="images/sucai2.jpg"></div>
<div class="chanpin"><img src="images/sucai3.jpg"></div>
</div>
</body>
</html>
扩展：
<style>
div{border: 1px solid red;overflow: hidden;}/*子级溢出父级范围(当窗口缩小的时候，没有滚动条)*/
div:hover img{transform: translate(-200px,0);/*变换里面的移动，鼠标经过的是div，但是让里面的图片进行移动*/
transform: scale(1.5)/*鼠标经过的时候图像变大，发生在变换之前*/}
img{display: block;transition: 3s;}/*去除图片无故空隙，过渡动画*/
/*
div{border: 1px solid red;overflow: auto;}/*当窗口缩小的时候，有滚动条*/
img{display: block}
*/
</style>
媒体（窗口）的响应式
/*媒体查询，判断媒体尺寸 madia媒体 max最大 注意：媒体查询的小括号里不能写分号*/（必须加上手机meta）
@media(max-width:800px){
body{background-color: red;}
}
父级塌陷解决第二种方法
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.red{background-color: red;float: left}
.green{background-color: green;clear: left;}/*清除左边浮动，即不允许2左边有东西*/
</style>
</head>
<body>
<div class="red">1</div>
<div class="green">2</div>
</body>
</html>
例如：1
<style>
.zi{border: 2px solid;float: left;}
.fu{border: 2px solid red;}
.clearfix{clear: both}/*当里面的内容有大的，用overflow：hidden解决不了的，可以用清除浮动*/
</style>
</head>
<body>
<div class="fu">
<div class="zi">1</div>
<div class="zi">2</div>
<div class="zi">3</div>
<div class="clearfix"></div>
</div>
</body>
例如：2内容不一样多，但是当屏幕变小的时候换行依旧可以不乱序
<style>
.fu{border: 2px solid;}
.zi{border: 2px solid red;width: calc(100% / 3);float: left;box-sizing: border-box;}
.zi:nth-child(4){clear: left}因为是一行三个，所以让第四个内容的左边不允许有东西，即清除左边浮动
</style>
</head>
<body>
<div class="fu">
<div class="zi">01<br>01</div>
<div class="zi">02</div>
<div class="zi">03</div>
<div class="zi">04</div>
<div class="zi">05</div>
<div class="zi">06</div>
</div>
</body>
737
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
