盒子模型之邊框

border-(top/bottom/left/right)-style: solid 邊框的風格 如(solid 實線，dotted 點線，dashed 虛線)

border-top-color: #aaa 邊框顏色

border-top-width: 20px 邊框粗細

邊框四個方向連寫： 如 border-color: #000

邊框屬性連寫： border-top: #555 solid 5px

四個方向邊框屬性同寫： border: 12px dashed 10px

注意： 沒有順序要求，但邊框風格也就是線型不能少

補充：

邊框合并： border-collapse: collapse

去掉邊框： border: 0 none

去掉路輪廓線： outline-style: none

?

盒子模型之內邊距

padding-left: 20px;

padding-right: 10px;

padding-top: 30%;

padding-bottom: 40%;

屬性連寫：

padding: 20px; 上下左右都為20px

padding: 10px 20px; 上下為10px，左右為20px

padding: 10px 20px 30px; 上內邊距為10px，左右為20px，底為30px

padding: 10px 20px 30px 40px; 上10px，右20px，下30px，左40px

注意： 給盒子指定寬高，在里面使用padding會撐大盒子

補充： 盒子的寬度等于： 定義的寬度 邊框寬度 左右內邊距

?

盒子模型之外邊距

margin(與內邊距使用方法相似): margin: 20px

margin: 20px auto ?(auto表示自適應，個人理解就是居中)

補充： 兩個盒子垂直，上面的盒子設置下邊距。下面的盒子設置下邊距，兩個盒子的邊距取設置邊距大的那個

解決：嵌套的盒子外邊距塌陷

當給子盒子里設置如margin-top: 10px時，父盒子相對于頂部向下移動了10px，而子盒子相對于父盒子沒有移動

兩種方法解決： 第一個是給父盒子設置一個邊框；第二個方法是給父盒子設置： overflow: hidden;(內容溢出元素框時隱藏)

補充： 行內元素可以定義左右的內外邊距，上下會被忽略；行內塊可以定義內外邊距

?

浮動布局

float: left / right

特點：

元素浮動后不占據原來的位置(脫標)

浮動的盒子在一行顯示(除非邊框已經無法容納)

行內元素浮動后會轉化成行內塊元素

清除浮動的方法：?

clear: left / both / right ?用的最多的是clear: both

第一種方法： <div style="clear: both;"></div>

第二種方法： overflow: hidden

注意： 如果內容出了盒子，則不能使用這個方法

第三種方法： 偽元素清除浮動(推薦使用)

.clearfix:after{

　　content: ".";

　　display: block;

　　height: 0;

　　line-height: 0;

　　visibility: hidden; ?規定元素不可見(但會占據頁面上的空間)

　　clear: both;

}

兼容IE瀏覽器：

.clearfix{

　　zoom: 1;

}

?

總結

以上是生活随笔為你收集整理的CSS的常用属性（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。