###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