CSS之盒模型

盒子模型

英文即box model。无论是div、span、还是a都是盒子。但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。

一、盒子中的区域

一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：

- width和height：**内容**的宽度、高度（不是盒子的宽度、高度）。
- padding：内边距。
- border：边框。
- margin：外边距。

盒子模型的示意图：

上面这个盒子，width:200px; height:200px; 但是真实占有的宽高是302*302。这是因为还要加上padding、border。

注意：宽度和真实占有宽度，不是一个概念！

1）标准盒子模型：

2）IE盒子模型：

CSS盒模型和IE盒模型的区别：

- 在标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

- IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。

注：Android中也有margin和padding的概念，意思是差不多的，如果你会一点Android，应该比较好理解吧。区别在于，Android中没有border这个东西，而且在Android中，margin并不是控件的一部分。

注意：

body标签也有margin

`<body>`标签有必要强调一下。很多人以为`<body>`标签占据的是整个页面的全部区域，其实是错误的，正确的理解是这样的：整个网页最大的盒子是`<document>`，即浏览器。而`<body>`是`<document>`的儿子。浏览器给`<body>`默认的margin大小是8个像素，此时`<body>`占据了整个页面的一大部分区域，而不是全部区域。

二、盒子的属性

1、padding

padding就是内边距。padding的区域有背景颜色，并且背景颜色一定和内容区域的相同。

padding有四个方向

/*分开写*/
padding-top: 30px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 100px;
/*综合(上、右、下、左)*/
padding:30px 20px 40px 100px;

如果写了四个值，则顺序为：上、右、下、左。

如果只写了三个值，则顺序为：上、右、下。??和右一样。

如果只写了两个值，比如说：padding: 30px 40px;顺序等价于：30px 40px 30px 40px;

一些元素，默认带有padding，比如ul标签。不加任何样式的ul，也是有40px的padding-left。所以，为了便于控制，清除这个默认的padding。

*{
margin: 0;
padding: 0;
}

`*`的效率不高，也可以使用并集选择器，罗列所有的标签

2、border

border就是边框。边框有三个要素：像素（粗细）、线型、颜色。颜色如果不写，默认是黑色。另外两个属性如果不写，则无法显示边框。

边框线型，比较稳定的solid、dashed、dotted，其他类型在不同浏览器略有差异：

值	描述
none	定义无边框。
hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

/*合并*/
border:10px solid red;
/*按三要素拆开*/
border-width:10px;    //边框宽度
border-style:solid;   //线型
border-color:red;     //颜色。
/*按方向拆开*/
border-top:10px solid red;
border-right:10px solid red;
border-bottom:10px solid red;
border-left:10px solid red;
/*还可以按三要素和方向叉乘拆开*/

注意：用小属性层叠大属性

3、box-sizing

CSS3 对盒模型做出了新的定义，即允许开发人员指定盒子宽度和高度的计算方式。这就需要用到 `box-sizing`属性。它的属性值可以是：`content-box`、`border-box`。

外加模式：（css的默认方式）

box-sizing: content-box;

解释：此时设置的 width 和 height 是**内容区域**的宽高。`盒子的实际宽度 = 设置的 width + padding + border`。此时改变 padding 和 border 的大小，也不会改变内容的宽高，而是盒子的总宽高发生变化。

内减模式：【需要注意】

box-sizing: border-box;

解释：此时设置的 width 和 height 是**盒子**的总宽高。`盒子的实际宽度 = 设置的 width`。此时改变 padding 和 border 的大小，会改变内容的宽高，盒子的总宽高不变。

4、box-shadow

边框阴影

box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色
box-shadow: 15px 21px 48px -2px #666;

参数解释：

- 水平偏移：正值向右负值向左。

- 垂直偏移：正值向下负值向上。

- 模糊程度：不能为负值。

另外，后面还可以再加一个inset属性，表示内阴影。如果不写，则默认表示外阴影。例如：

box-shadow:3px 3px 3px 3px #666 inset;

5、border-image

边框图片有以下属性：

/* 边框图片的路径*/
border-image-source: url("images/border.png");

/* 图片边框的裁剪*/
border-image-slice: 27;

/*图片边框的宽度*/
border-image-width: 27px;

/*边框图片的平铺*/
/* repeat :正常平铺 但是可能会显示不完整*/
/*round: 平铺 但是保证 图片完整*/
/*stretch: 拉伸显示*/
border-image-repeat: stretch;

综合属性：

border-image: url("images/border.png") 27/20px round;

6、border-radius

边框的每个圆角，本质上是一个圆，圆有**水平半径**和**垂直半径**：如果二者相等，就是圆；如果二者不等，就是椭圆。

border-top-left-radius: 60px 120px;        //参数解释：水平半径   垂直半径
border-top-right-radius: 60px 120px;
border-bottom-left-radius: 60px 120px;
border-bottom-right-radius: 60px 120px;

border-radius: 60px/120px;             //参数：水平半径/垂直半径

border-radius: 20px 60px 100px 140px;  //从左上开始，顺时针赋值。如果当前角没有值，取对角的值

border-radius: 20px 60px;

border-radius: 60px; //四个角的半径都相同时

三、小技巧

举例1：利用 border 属性画一个三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-top-color: red;
            border-bottom: none;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

图例：

举例2：利用 border 属性画一个三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 0;
            height: 0;
            border-top: 30px solid red;
            /* 通过改变 border-left 和 border-right 中的像素值，来改变三角形的形状 */
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

图例:

posted @ 2020-06-03 16:42 才华充电中阅读(181) 评论(0) 收藏举报

刷新页面返回顶部

才华充电中

君子藏器于身，待时而动