一.盒子模型
<style>
div{
width:200px;
height:200px;
background:#ff2d51;
/*
box-sizing:border-box
給元素border,padding不會(huì)改變它的width,height
*/
box-sizing: border-box;
border:10px solid black;
padding:10px;
}
</style>
二.inline-block實(shí)現(xiàn)導(dǎo)航
技術(shù)要點(diǎn):給父元素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="[#](#)">手機(jī)</a>
<a href="[#](#)">平板</a>
<a href="[#](#)">電腦</a>
</div>
</body>
三.元素浮動(dòng)
float的原理:相對(duì)于整個(gè)頁(yè)面漂浮起來
如何清除float
clear:both;
<style>
*{margin:0;padding:0}
/* float的原理:相對(duì)于整個(gè)頁(yè)面漂浮起來 */
.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,那么就會(huì)受到前面元素的影響
<style>
/*
如果前面的元素float,后面的元素沒有清除float,那么就會(huì)受到前面元素的影響
*/
.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和父元素
父元素不設(shè)置高度吓懈，子元素float,父元素的高度會(huì)坍塌
*如何讓父元素重新獲取高度
1.給父元素 overflow:hidden;
2.給父元素公共樣式row
.row:after{
content:"";
display:table;
clear:both;
}
舉例說明
<style>
/*
父元素不設(shè)置高度剔交，子元素float,父元素的高度會(huì)坍塌
*/
/*
如何讓父元素重新獲取高度
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>
利用浮動(dòng)制作導(dǎo)航條
<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="[#](#)">手機(jī)</a></li>
<li><a href="[#](#)">平板</a></li>
<li><a href="[#](#)">電腦</a></li>
</ul>
</body>
利用浮動(dòng)布局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>
