1.盒子模型
box-sizing:border-box
給元素border,padding不會(huì)改變它的width,height
2.inline-block實(shí)現(xiàn)導(dǎo)航
技術(shù)要點(diǎn):給父元素font-size:0;
*{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>
</head>
<body>
<div class="nav">
<a href="#">手機(jī)</a>
<a href="#">平板</a>
<a href="#">電腦</a>
</div>
</body>
1.png
3.float
1.原理
float的原理:相對(duì)于整個(gè)頁面漂浮起來
2.清除float
clear:both;
3.float的影響
如果前面的元素float,后面的元素沒有清除float,那么就會(huì)受到前面元素的影響
4.
父元素不設(shè)置高度边败，子元素float,父元素的高度會(huì)坍塌
如何讓父元素重新獲取高度
1.給父元素 overflow:hidden;
2.給父元素公共樣式row
.row:after{
content:"";
display:table;
clear:both;
overflow: hidden;
