1.border邊框

*{box-sizing:border-box; }? ? ? ?//使所有邊框不再撐大盒子模型

粗細 : border-width

樣式 : border-style, 默認沒邊框 . solid 實線邊框 dashed 虛線邊框 dotted 點線邊框

顏色 : border-color

div {

width : 200px ;

height : 200px ;

border : 2px solid green ;? ? ? ? 簡寫沒有順序規定//邊框寬2px 實線 綠色

border-radius : 100px ;? ? ? ? 變成圓角矩形；

/* 或者用 50% 表示寬度的一半 */

border-radius : 50% ;

}

?也可以如此控制他的四個角；

border-top-left-radius : 2em ;

border-top-right-radius : 2em ;

border-bottom-right-radius : 2em ;

border-bottom-left-radius : 2em ;

也可以按順時針書寫從左上角開始；

border-radius : 10px 20px 30px 40px ;

?更多的細節請看菜鳥教程；因為太多了；無法演示

2.內邊距 padding

padding 設置內容和邊框之間的距離.

默認內容是頂著邊框來放置的 . 用 padding 來控制這個距離可以給四個方向都加上邊距

padding-top

padding-bottom

padding-left

padding-right

使用 box - sizing: border - box 屬性也可以使內邊距不再撐大盒子 . ( 和上面 border 類似 )

div {

height : 200px ;

width : 300px ;

padding-top : 5px ;

padding-left : 10px ;

? ?

padding : 5px ; 表示四個方向都是 5px

padding : 5px 10px ; 表示上下內邊距 5px , 左右內邊距為 10px

padding : 5px 10px 20px ; 表示上邊距 5px , 左右內邊距為 10px , 下內邊距為 20px

padding : 5px 10px 20px 30px ; 表示 上 5px , 右 10px , 下 20px , 左 30px ( 順時針 )

}

3.外邊距 margin

控制盒子和盒子之間的距離 .

可以給四個方向都加上邊距

margin-top

margin-bottom

margin-left

margin-right

?margin-bottom: 20px;

margin: 10px; // 四個方向都設置

margin: 10px 20px; // 上下為 10, 左右 20

margin: 10px 20px 30px; // 上 10, 左右 20, 下 30

margin: 10px 20px 30px 40px; // 上 10, 右 20, 下 30, 左 40

塊級元素水平居中

指定寬度 ( 如果不指定寬度 , 默認和父元素一致 )

把水平 margin 設為 auto

三種寫法：使塊級元素居中；使div塊劇中；

margin-left : auto ; margin-right : auto ;

margin : auto ;

margin : 0 auto ;

這個水平居中的方式和 text-align 不一樣 .

margin: auto 是給塊級元素用得到 .

text-align: center 是讓行內元素或者行內塊元素居中的 .

另外 , 對于垂直居中 , 不能使用 " 上下 margin 為 auto " 的方式

4.塊元素

使用 display 屬性可以修改元素的顯示模式.

可以把 div 等變成行內元素 , 也可以把 a , span 等變成塊級元素

display: block 改成塊級元素 [ 常用]

display: inline 改成行內元素 [ 很少用]

display: inline- block 改成行內塊元素?

?舉例：將超鏈接元素變成每一行，只顯示一個超鏈接；

?<style>

? ? ? ? a{

? ? ? ? ? ? display:block;

? ? ? ? }

? ? </style>