CSS——框模型

1.  设置内边距

值	说明
length	规定以具体单位计的填充值，比如像素、厘米等。默认值是 0px
%	规定基于父元素的宽度的百分比的填充
inherit	指定应该从父元素继承padding

padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。

• padding:10px 5px 15px 20px;
  • 上填充是 10px
  • 右填充是 5px
  • 下填充是 15px
  • 左填充是 20px
  
  
• padding:10px 5px 15px;
  • 上填充是 10px
  • 右填充和左填充是 5px
  • 下填充是 15px
  
  
• padding:10px 5px;
  • 上填充和下填充是 10px
  • 右填充和左填充是 5px
  
  
• padding:10px;
  • 所有四个填充都是 10px

注意： 负值是不允许的。

2.  设置外边距

属性值

值	描述
auto	浏览器计算外边距。
length	规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
%	规定基于父元素的宽度的百分比的外边距。
inherit	规定应该从父元素继承外边距。

属性定义及使用说明

margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。

实例:

• margin:10px 5px 15px 20px;
  • 上边距是 10px
  • 右边距是 5px
  • 下边距是 15px
  • 左边距是 20px
  
  
• margin:10px 5px 15px;
  • 上边距是 10px
  • 右边距和左边距是 5px
  • 下边距是 15px
  
  
• margin:10px 5px;
  • 上边距和下边距是 10px
  • 右边距和左边距是 5px
  
  
• margin:10px;
  • 所有四个边距都是 10px

注意： 负值是允许的。

3.  边框

属性值

值	说明
border-width	指定边框的宽度
border-style	指定边框的样式
border-color	指定边框的颜色
inherit	指定应该从父元素继承border属性值

border-style属性设置一个元素的四个边框的样式。此属性可以有一到四个值。

实例:

border-style:dotted solid double dashed;

• 上边框是点状
• 右边框是实线
• 下边框是双线
• 左边框是虚线

border-style:dotted solid double;

• 上边框是点状
• 右边框和左边框是实线
• 下边框是双线

border-style:dotted solid;

• 上边框和下边框是点状
• 右边框和左边框是实线

border-style:dotted;

• 所有4个边框都是点状

border-color  

值	说明
color	指定背景颜色。在CSS颜色值查找颜色值的完整列表
transparent	指定边框的颜色应该是透明的。这是默认
inherit	指定边框的颜色，应该从父元素继承

border-color属性设置一个元素的四个边框颜色。此属性可以有一到四个值。

实例:

border-color:红，绿，蓝,粉红色;

• 上边框是红色
• 右边框是绿色
• 底部边框是蓝
• 左边框是粉红色

border-color：红，绿，蓝;

• 上边框是红色
• 左，右边框是绿色
• 底部边框是蓝

border-color：红，绿;

• 顶部和底部边框是红色
• 左右边框是绿色

border-color：红色;

• 所有四个边框是红色

注意：请始终把 border-style 属性声明到 border-color 属性之前。元素必须在您改变其颜色之前获得边框。

CSS border-width 属性

border-width属性设置一个元素的四个边框的宽度。此属性可以有一到四个值。

实例:

border-width:thin medium thick 10px;

• 上边框是细边框
• 右边框是中等边框
• 下边框是粗边框
• 左边框是 10px 宽的边框

border-width:thin medium thick;

• 上边框是细边框
• 右边框和左边框是中等边框
• 下边框是粗边框

border-width:thin medium;

• 上边框和下边框是细边框
• 右边框和左边框是中等边框

border-width:thin;

• 所有4个边框都是细边框