1.盒子
1.1
div{
width: 200px;
height: 200px;
background: red;
/*
用 box-sizing: border-box;
給元素border,padding不會改變它的width,height
*/
box-sizing: border-box;
border: 10px solid black;
border-radius: 10px;
}
QQ截圖20180716194847.png
tips1：border-radius: 10px;用來盒子的角度（圓角）。
tips2：下面代碼表示不選中parenr中的（每）div下的最后一個元素。
.parent>div:not(:last-child){
margin-right: 13.3333px;
}
2.float
2.1.浮動的原理
/* float的原理：相對于整個頁面漂浮起來 */
.one{
width:100px;
height: 100px;
background:red;
float: left;
2.2消除浮動
如果父元素不設置高度砖顷，子元素float者蠕，父元素的高度會坍塌剃允。
因此要消除浮動球化，父元素會自動讀取子元素的高度。
消除浮動的方法有兩種呕缭，常用的為第二種堵泽；
①
overflow:hidden;//給父元素的樣式中
②
.parent:after{
content:"";
display: table;
clear: both
}
這段代碼其實就是在float元素后面加上一個空的元素，同時clear恢总。
