1.盒子模型
box-sizing:border-box
给元素border,padding不会改变它的width,height
2.inline-block实现导航
技术要点:给父元素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="#">手机</a>
<a href="#">平板</a>
<a href="#">电脑</a>
</div>
</body>
1.png
3.float
1.原理
float的原理:相对于整个页面漂浮起来
2.清除float
clear:both;
3.float的影响
如果前面的元素float,后面的元素没有清除float,那么就会受到前面元素的影响
4.
父元素不设置高度，子元素float,父元素的高度会坍塌
如何让父元素重新获取高度
1.给父元素 overflow:hidden;
2.给父元素公共样式row
.row:after{
content:"";
display:table;
clear:both;
overflow: hidden;
