阅读数:76 评论数:0

一、基本概念

盒模型中有两个部分是可见的：content和border，也有两个部分是不可见的：padding和margin。

二、content部分

行内元素不受width和height属性的影响，即width和height属性只影响块级元素。

三、padding部分

1、padding简写属性

padding: 25px 50px 75px 100px;  //上右下左（顺时针）
padding: 25px 50px 75px; // 上（左右）下
padding: 25px 50px; // 上下 左右
padding: 25px; // 所有方向

四、border部分

1、边框宽度

border-width，单位是px

2、边框颜色

border-color，需要在border-style设置后才能生效。

3、border-style

border-style: dotted solid double dashed; // 上右下左
border-style: dotted solid double ; // 上（左右）下
border-style: dotted solid; // 上下 左右
border-style: dotted; // 所有方向

4、圆角效果

border-radius

五、margin部分

1、margin简写属性

margin: 25px; 50px 75px 100px;  // 上右下左
margin: 25px 50px 75px ; // 上（左右）下
margin: 25px 50px ;// 上下 左右
margin: 25px; // 所有方向