1 盒子
box-sizing:border-box
给元素border,padding不会改变它的width,height
2 导航
1 inline-block实现导航
技术要点:给父元素font-size:0
2 用<ul>标签设置导航<a>包在<li>里
.top-nav>ul{
list-style: none;
/*margin-left: auto;
margin-right: auto;
width: 400px;*/列表'li'居中
}
.top-nav>ul>li{
float: left;
}
.top-nav>ul>li>a{
text-decoration: none;
display: block;
}
3 浮动
/* float的原理:相对于整个页面漂浮起来 */
/* 如何清除float clear:both; */
父元素不设置高度，子元素float,父元素的高度会坍塌
如何让父元素重新获取高度
1.给父元素 overflow:hidden;
2.给父元素公共样式row 清除浮动常用样式
.row:after{
content:"";
display:table;
clear:both； }
- 如果前面的元素float,后面的元素没有清除float,那么就会受到前面元素的影响
4
