一.盒子模型
<style>
div{
width:200px;
height:200px;
background:#ff2d51;
/*
box-sizing:border-box
给元素border,padding不会改变它的width,height
*/
box-sizing: border-box;
border:10px solid black;
padding:10px;
}
</style>
二.inline-block实现导航
技术要点:给父元素font-size:0;
<style>
*{margin:0;padding:0}
.nav{
line-height: 50px;
background:deeppink;
font-size: 0;
height:50px;
}
.nav a{
color:#fff;
text-decoration: none;
display: inline-block;
font-size: 14px;
width:100px;
text-align: center;
}
a:hover{
background-color: pink;
}
</style>
<body>
<div class="nav">
<a href="[#](#)">手机</a>
<a href="[#](#)">平板</a>
<a href="[#](#)">电脑</a>
</div>
</body>
三.元素浮动
float的原理:相对于整个页面漂浮起来
如何清除float
clear:both;
<style>
*{margin:0;padding:0}
/* float的原理:相对于整个页面漂浮起来 */
.one{
width:100px;
height:100px;
background:red;
float:right;
}
/* 如何清除float
clear:both;
*/
.two{
clear:both;
width:200px;
height:200px;
background:blue;
}
</style>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
注意：如果前面的元素float,后面的元素没有清除float,那么就会受到前面元素的影响
<style>
/*
如果前面的元素float,后面的元素没有清除float,那么就会受到前面元素的影响
*/
.one,.two,.three{
width:100px;
height:100px;
}
.one{
background: red;
float:left;
}
.two{
background:green;
}
.three{
background:pink;
float:right;
}
</style>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
四.float和父元素
父元素不设置高度，子元素float,父元素的高度会坍塌
*如何让父元素重新获取高度
1.给父元素 overflow:hidden;
2.给父元素公共样式row
.row:after{
content:"";
display:table;
clear:both;
}
举例说明
<style>
/*
父元素不设置高度，子元素float,父元素的高度会坍塌
*/
/*
如何让父元素重新获取高度
1.给父元素 overflow:hidden;
2.给父元素公共样式row
.row:after{
content:"";
display:table;
clear:both;
}
*/
.parent{
width:400px;
background: green;
/* overflow: hidden; */
}
.child{
width:200px;
height:200px;
background:red;
float:left;
}
.two{
width:400px;
height:400px;
background:blue;
}
.row:after{
content:"";
display: table;
clear:both;
}
</style>
<body>
<div class="parent row">
<div class="child"></div>
</div>
<!-- <div class="two">
</div> -->
</body>
利用浮动制作导航条
<style>
*{margin:0;padding:0}
li{float:left;list-style: none;width:100px;text-align: center}
.row:after{
content:"";
display: block;
clear:both;
}
a{
display: block;color:#fff;text-decoration: none;
}
ul{
line-height: 50px;
background:deeppink;
}
a:hover{
background: pink;
}
</style>
<body>
<ul class="row">
<li><a href="[#](#)">手机</a></li>
<li><a href="[#](#)">平板</a></li>
<li><a href="[#](#)">电脑</a></li>
</ul>
</body>
利用浮动布局div
<style>
*{margin:0;padding:0}
div{
box-sizing: border-box;
}
.parent{
width:1000px;margin-left: auto;margin-right: auto;
background:deeppink;
}
.parent>div{
float: left;width:240px;
height:300px; border:1px solid #333;
}
.row:after{
content:"";display: block;clear:both;
}
.parent>.child{
margin-right:13.3333px;
}
</style>
<body>
<div class="parent row">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div></div>
</div>
</body>
