CSS盒模型基础

CSS盒模型基础_第1张图片

盒模型是CSS布局的基础,主要由三部分组成:边框、内边距、外边距。

边框(border)

1. 四个边的边框

属性 作用
border-width 边框的宽度
border-style 边框的样式
border-color 边框的颜色

例如:

border-width: 1px;
border-style: solid;
border-color: red;

边框可以三个属性简写,格式如下:

border: 宽度 样式 颜色;

例如:

border: 1px solid red;

这一行代码与以上三行完全一致。

2. 单个边的边框

2.1 上边边框

属性 作用
border-top-width 上边框的宽度
border-top-style 上边框的样式
border-top-color 上边框的颜色

例如:

border-top-width: 1px;
border-top-style: solid;
border-top-color: red;

简写格式border-top: 宽度 样式 颜色;

例如:

border-top: 1px solid red;

这一行代码与以上三行完全一致。


2.2 右边边框

属性 作用
border-right-width 右边框的宽度
border-right-style 右边框的样式
border-right-color 右边框的颜色

例如:

border-right-width: 1px;
border-right-style: solid;
border-right-color: red;

简写格式border-right: 宽度 样式 颜色;

例如:

border-right: 1px solid red;

这一行代码与以上三行完全一致。


2.3 下边边框

属性 作用
border-bottom-width 下边框的宽度
border-bottom-style 下边框的样式
border-bottom-color 下边框的颜色

例如:

border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: red;

简写格式border-bottom: 宽度 样式 颜色;

例如:

border-bottom: 1px solid red;

这一行代码与以上三行完全一致。


2.4 左边边框

属性 作用
border-left-width 左边框的宽度
border-left-style 左边框的样式
border-left-color 左边框的颜色

例如:

border-left-width: 1px;
border-left-style: solid;
border-left-color: red;

简写格式border-left: 宽度 样式 颜色;

例如:

border-left: 1px solid red;

这一行代码与以上三行完全一致。


3. 四个边的边框简写

下面的三个属性实际上是一个简写,可以用来分别设置四个边框的宽度、样式和颜色。

属性 作用
border-width 左边框的宽度
border-style 左边框的样式
border-color 左边框的颜色

3.1 边框的宽度

  • 一个属性值:上下左右四个边框使用相同的宽度。
    例如:border-width:四个边框宽度

  • 两个属性值:上下两个边框使用相同的宽度,左右两个边框使用相同的宽度。
    例如:border-width:上下边框宽度 左右边框宽度

  • 三个属性值:上边框宽度,左右两个边框使用相同的宽度,下边框宽度。
    例如:border-width:上边框宽度 左右边框宽度 下边框宽度

  • 四个属性值:上左下右四个边框按照顺序使用各不相同的宽度。
    例如:border-width:上边框宽度 右边框宽度 下边框宽度 左边框宽度

3.2 边框的风格

  • 一个属性值:上下左右四个边框使用相同的风格。
    例如:border-style:四个边框风格

  • 两个属性值:上下两个边框使用相同的风格,左右两个边框使用相同的风格。
    例如:border-style:上下边框风格 左右边框风格

  • 三个属性值:上边框风格,左右两个边框使用相同的风格,下边框风格。
    例如:border-style:上边框风格 左右边框风格 下边框风格

  • 四个属性值:上左下右四个边框按照顺序使用各不相同的风格。
    例如:border-style:上边框风格 右边框风格 下边框风格 左边框风格

3.3 边框的颜色

  • 一个属性值:上下左右四个边框使用相同的颜色。
    例如:border-color:四个边框颜色

  • 两个属性值:上下两个边框使用相同的颜色,左右两个边框使用相同的颜色。
    例如:border-color:上下边框颜色 左右边框颜色

  • 三个属性值:上边框颜色,左右两个边框使用相同的颜色,下边框颜色。
    例如:border-color:上边框颜色 左右边框颜色 下边框颜色

  • 四个属性值:上左下右四个边框按照顺序使用各不相同的颜色。
    例如:border-color:上边框颜色 右边框颜色 下边框颜色 左边框颜色

内边距(padding)

内边距是元素边框与元素内容之间的空白区域,与表格cellpadding相似

属性 作用
padding-bottom 元素的下内边距
padding-left 元素的左内边距
padding-right 元素的右内边距
padding-top 元素的上内边距

以上可以使用简写

padding: 上内边距  右内边距  下内边距  左内边距;
padding: 上内边距  左右内边距  下内边距;
padding: 上下内边距  左右内边距;
padding: 上下左右内边距;

外边距(margin)

外边距是元素边框外的空白区域。

属性 作用
margin-bottom 元素的下外边距
margin-left 元素的左外边距
margin-right 元素的右外边距
margin-top 元素的上外边距

以上可以使用简写

margin: 上外边距  右外边距  下外边距  左外边距;
margin: 上外边距  左右外边距  下外边距;
margin: 上下外边距  左右外边距;
margin: 上下左右外边距;

你可能感兴趣的:(CSS盒模型基础)