標簽：布局 clear 不同的 距離 居中 學習 width float Fix
border邊框，content內容，padding內邊距，margin外邊距。
border-with：邊框的粗細（一般情況下使用px爲單位），未指定邊框樣式沒法顯示。
border-style：邊框的樣式（solid實線，dashed虛線，dotted點線）。
border-color：邊框的顔色。
复合性写法：border：1px solid red；（三个属性可以不分顺序）
邊框4條邊分開寫：border-top，border-bottom，border-left，border-right
用css替換原先html代碼：
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500px" height="249">
<thead>
<tr>
<th>名称</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr>
<td>苹果</td>
<td>10</td>
</tr>
</tbody>
</table>
<style>
table {
width: 500px;
height: 249px;
}
table,
td,
th {
border: 1px solid pink;
/* 合并相邻边框 */
border-collapse: collapse;
}
</style>
邊框會影響盒子的實際大小，盒子實際的大小=邊框大小+原本盒子大小。
padding-left，padding-right，padding-top，padding-bottom設置邊框和內容的間隔。
複合寫法：
內邊距也會影響盒子的大小，盒子實際大小=內邊距大小+原本盒子大小
如果盒子未指定width/height（繼承父親的width/height也算未指定），那麽padding就不會撐大盒子。
margin-left，margin-right，margin-top，margin-bottom设置盒子和盒子之间的距離
複合寫法和padding一樣。
块级元素水平居中的方法：块级盒子设置width，然后使用margin: 0 auto;便可以实现块级盒子水平居中。
行內元素水平居中的話讓其父親添加：text-align:center;
上下兩個塊級元素上面有一個margin-bottom下面有一個margin-top，則兩個塊級元素間的外邊距取最大的那個值，而不是相加後的值。
解決方法：上下塊級元素只添加一個外邊距。
對于兩個嵌套關系（父子關系）的塊元素，父元素有上外邊距同時子元素也有上外邊距，此時父元素會塌陷較大的外邊距值。
解決方法：
網頁元素可能帶有默認的內外邊距。
* {
margin: 0;
padding: 0;
}
行內元素比較特殊，爲了照顧兼容性，盡量設置左右內外邊距，不要設置上下內外邊距。但轉換爲塊級和行內塊元素就可以了。
border-radius：length設置成圓角邊框。
半徑爲length的圓放四個角落。
length可以是像素也可以是百分數。
如果要设置四个角为不同的圆角，则可以写为border-radius：10px 20px 30px 40px;分别表示左上、右上、右下、左下。
如果設置單獨的一個角：border-top-left-radius
box-shadow：h-shadow（水平阴影位置，必须） v-shadow（垂直阴影位置，必须） blur（模糊距離，影子的虚实程度） spread（阴影尺寸，影子的大小） color（阴影颜色） inset（外部阴影改为内部阴影）;
text-shadow：h-shadow v-shadow blur color;
網頁的三種傳統布局方式：
浮動可以改变元素的默认排序方式，float属性用于创建浮動框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮動框的边缘。
一般使用标准流的父元素排列上下布局，然后使用浮動元素在父元素中排列左右的布局。多个块级元素总想排列找标准流，多个块级元素横向排列找浮動。
float {float:属性值} （属性值：none，left，right）
清除浮動的本质是清除浮動元素造成的影响，清除浮動之后，父级就会根据浮動的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。
選擇器{clear：屬性值；}
left:不允许左侧有浮動元素
right：不允许右侧有浮動元素
both：同时清除左右两侧浮動的影响
清除浮動的方法：
/* 方法一：在浮動元素的最后再添加一个额外元素（必须是块级元素），使用clear: both */
.clear {
clear: both;
}
/* 方法二：给父元素添加代码 */
.father {
/* 清除浮動，其中的值为hidden、auto、scroll都可以 */
overflow: hidden;
}
/* 方法三： 给父元素添加代码（是隔墙法的升级版，由css生成了额外元素）*/
.clearfix:after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{
/* 兼容IE6和IE7 */
*zoom: 1;
}
/* 方法四：给父元素添加代码 */
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix{
*zoom: 1;
}
需要清除浮動的情况：
標簽：布局 clear 不同的 距離 居中 學習 width float Fix
原文地址：https://www.cnblogs.com/boniii/p/14964538.html
