CSS入門(3)--CSS中的盒子模型

1 盒子中的地區

一個盒子中主要的屬性就5個：width、height、padding、border、margin。

width是“寬度”的意思，CSS中width指的是內容的寬度，而不是盒子的寬度。

height是“高度”的意思，CSS中height指的是內容的高度，而不是盒子的高度

padding是“內邊距”的意思

border是“邊框”

margin是“外邊距”

真實佔有寬度=  左border  +  左padding  + width  +  右padding  +  右border 2 width、height

1          .box1{

2                               width: 100px;

3                               height: 100px;

4                               padding: 100px;

5                               border: 1px solid red;

6                        }

7           

8            .box2{

9                               width: 250px;

10                            height:250px;

11                            padding:25px;

12                            border:1pxsolid red;               }

3 padding

padding就是內邊距。padding的地區有背景顏色，background-color將填充所有boder以內的地區

小屬性：

1           padding-top: 30px; 2           padding-right: 20px; 3           padding-bottom: 40px; 4           padding-left: 100px;

padding:30px 20px 40px 100px;        //上、右、下、左

padding: 20px 30px 40px;    //上、右、下、??和右一樣

padding: 30px 40px;

用小屬性層疊大屬性：

padding: 20px; padding-left: 30px;

4border

邊框有三個要素：粗細、線型、顏色。border: 1px dashed red;

border屬效能夠被拆開，有兩大種拆開的方式：

1） 按3要素:border-width、border-style、border-color 2） 按方向：border-top、border-right、border-bottom、border-left