今天是2018年7月13日
1.盒子模型擴(kuò)展
有些時候我們需要padding但不希望齊元素大小發(fā)生改變，這個時候需要給元素設(shè)置
box-sizing:border-box屬性弯洗。
<style>
div{
width: 200px;
height: 200px;
background: #ff2d51;
/*
box-sizing:border-box
給元素padding不會改變它的width和height
*/
box-sizing: border-box;
border: 10px solid black;
}
</style>
2.inline-block布局
使用nline-block可以使塊級元素在同一行顯示，起最經(jīng)典的案例表現(xiàn)便是導(dǎo)航逢勾。
<style>
*{margin: 0;padding: 0;}
.nav{
text-align: center;
background-color: #ff416d;
height: 50px;
font-size: 0;
}
.nav a{
display:inline-block;
width: 100px;
line-height: 50px;
text-align: center;
color: white;
font-size: 14px;
text-decoration: none;
}
.nav a:hover{
background-color: pink;
}
</style>
利用line-height布局完成導(dǎo)航
3.浮動float
使用上述的line-height布局雖然能讓塊級標(biāo)簽在同一行顯示牡整，但卻存在著一些弊端，因此我們需要學(xué)習(xí)float溺拱。
<style>
*{margin: 0;padding: 0}
.nav{
width:990px;
height: 400px;
background-color: slategray;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
.nav div{
margin-top: 10px;
width: 240px;
height: 380px;
box-sizing: border-box;
border: 1px solid #fff;
float: left;
color:aqua;
font-size: 18px;
}
.nav div:not(:last-child){
margin-right: 10px;
}
.nav img{
margin-top: 10px;
margin-left: 14px;
}
.nav a{
text-align: left;
margin-left: 14px;
}
</style>
<body>
<div class="nav">
<div>
<img src="images/data_image.png" alt="">
<a href="">haha haha </a>
<br>
<a href="">bbbb bbbb</a>
<br>
<a href="">ccc ccc</a>
<br>
<a href="#">百度</a>
</div>
<div></div>
<div></div>
<div></div>
</div>
<div class="nav">
<div><img src="images/data_image.png" alt=""></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
4.float和父級元素
當(dāng)父元素不設(shè)置width時逃贝，子元素會繼承父元素的width。當(dāng)資源數(shù)float時迫摔，父元素的高度會坍塌沐扳。改善方法如下：
1.使用overflow：hidden屬性重新獲取子元素的高度。
2.使用clear：both清除浮動句占。
Tip：因?yàn)樵O(shè)置clear需要單獨(dú)的使用一個div比較麻煩沪摄，所以常用偽元素來實(shí)現(xiàn)，如下所示纱烘。
<style>
*{margin: 0;padding: 0;}
/*
父元素不設(shè)置高度杨拐，子元素float，父元素的高度會坍塌
1.使用overflow: hidden;屬性可以重新獲取子元素的高度擂啥。
2.使用clear：both清除浮動哄陶。
3.使用一個公用的樣式row清除浮動。
*/
.parent{
width: 200px;
background-color: red;
border: 1px solid #000;
}
.child{
height:200px;
width: 100px;
float: left;
background-color: blue;
}
.row::after{
content: "";
display: table;
clear: both;
}
</style>
5.快速實(shí)現(xiàn)導(dǎo)航
之前所實(shí)現(xiàn)的導(dǎo)航使用的是div哺壶，這里常使用的是
ul-li
<style>
*{margin: 0;padding: 0;}
li{
float: left;
list-style: none;
text-align: center;
}
ul{
background-color:tomato;
height: 50px;
}
a{
text-decoration: none;
display: block;
width: 100px;
line-height: 50px;
color:white;
}
a:hover{
background-color: salmon;
}
.row:after{
content: "";
display: table;
clear: both;
}
</style>
<body>
<ul class="row">
<li><a href="">首頁</a></li>
<li><a href="">首頁</a></li>
<li><a href="">首頁</a></li>
</ul>
</body>
