Loading... ## 盒子模型及其构成 ### 外边距 (margin) #### 概念 设置一个元素的边框之外的距离 #### 用法 * `margin-top` 设置元素的上外边距 * 例如：`margin-top: 20px/20em/10%/inherit/auto...; /* 支持css中的常见单位: 如像素,厘米,毫米等... */` * `margin-right` 设置元素的右外边距 * `margin-bottom` 设置元素的下外边距 * `margin-left` 设置元素的左外边距 * `margin` 在一个声明中设置所有外边距属性 * 注意: 除了margin以外的其他属性值只能提供一个,margin可以提供4种写法, 例如: * `margin:10px;` 所有 4 个外边距都是 10px * `margin:10px 5px;` 上外边距和下外边距是 10px 右外边距和左外边距是 5px * `margin:10px 5px 15px; ` 上外边距是 10px 右外边距和左外边距是 5px 下外边距是 15px * `margin:10px 5px 15px 20px;` 上外边距是 10px 右外边距是 5px 下外边距是 15px 左外边距是 20px * 网页居中对齐 [只能用在块级元素中且设有固定的宽度] * margin: 0 auto; [记] ### 背景颜色 (background-color) ### 背景图片 (background-image) ### 内边距 (padding) #### 概念 设置一个元素的内容与边框之间的距离 #### 用法 * `padding-left` 设置元素的左内边距 * 例如：`margin-left: 20px/20em/10%/inherit/auto...; /* 支持css中的常见单位: 如像素,厘米,毫米等... */` * `padding-right` 设置元素的右内边距 * `padding-top` 设置元素的上内边距 * `padding-bottom` 设置元素的下内边距 * `padding` 在一个声明中设置所有内边距属性 * 注意: 除了padding以外的其他属性值只能提供一个,padding可以提供4中写法, 例如: * `padding:10px;` 所有 4 个内边距都是 10px * `padding:10px 5px;` 上内边距和下内边距是 10px 右内边距和左内边距是 5px * `padding:10px 5px 15px;` 上内边距是 10px 右内边距和左外边距是 5px 下内边距是 15px * `padding:10px 5px 15px 20px;` 上内边距是 10px 右内边距是 5px 下内边距是 15px 左内边距是 20px ### 内容 (content) ### 边框 (border) #### 边框颜色 语法： ```css border-color: 属性值; /* 该区域可以传递4个参数,参数与参数之间使用空格隔开 */ /*其他单边框颜色设定*/ border-top-color: 属性值; /* 上边框颜色 */ border-right-color: 属性值; /* 右边框颜色 */ border-bottom-color: 属性值; /* 下边框颜色 */ border-left-color: 属性值; /* 左边框颜色 */ ``` 属性值解释 * 在常规语法中,属性值可以填写以下四种方式,他们分别是 * `border-color:#F00;` 代表该元素上下左右的边框均为颜色#F00; [参数1: 表示上下左右4个边框] * `border-color:#F00 #0F0;` 代表该元素上下边框颜色为#F00; 左右边框颜色为#F0F; [参数1: 上下边框 参数2: 左右边框] * `border-color:#F00 #0F0 #00F;` 代表该元素上边框颜色为#F00; 左右边框为#0F0; 下边框为#00F; [参数1: 上边框 参数2: 左右边框 参数3: 下边框] * `border-color:#F00 #0F0 #00F #000;` 代表该元素上右下左边框颜色分别为: #F00 #0F0 #00F #000; [参数1: 上边框 参数2: 右边框 参数3: 下边框 参数4: 左边框] * 在其他语法中,属性值只能填写1个值,属性值的使用标准可以使用rgb/rgba/#FFF(16进制)/red(颜色名称)等方案 #### 边框粗细 语法： ```css border-width: 属性值px; /* 该区域可以传递4个参数,参数与参数之间使用空格隔开 */ /*其他单边框粗细设定*/ border-top-width:5px; /* 上边框粗细 */ border-right-width:10px; /* 右边框粗细 */ border-bottom-width:8px; /* 下边框粗细 */ border-left-width:22px; /* 左边框粗细 */ ``` 属性值解释 [请自行参阅边框颜色中的属性值解释,常规语法一样有4种写法] #### 边框风格 语法： ```css border-style : 属性值; /* 该区域可以传递4个参数,参数与参数之间使用空格隔开 */ /*其他单边框风格设定*/ border-top-style:solid; /* 上边框风格 */ border-right-style:solid; /* 有边框风格 */ border-bottom-style:solid; /* 下边框风格 */ border-left-style:solid; /* 左边框风格 */ ``` 属性值取值范围 [请自行参阅边框颜色中的属性值解释,常规语法一样有4种写法] * none 无边框(不计入盒子模型尺寸) * hidden 边框隐藏(计入盒子模型尺寸) * dotted 点线 * dashed 虚线 (和点线相比,虚线的宽度稍微要宽一些) * solid 实线 * double 双实线 #### 边框属性简写模式 [推荐] 语法1： ```css border: border-width border-style border-color; ``` 语法2： ```css border-top : border-width border-style border-color; /* 单独设置上边框的粗细,风格,颜色 */ border-right : border-width border-style border-color; /* 单独设置右边框的粗细,风格,颜色 */ border-left : border-width border-style border-color; /* 单独设置左边框的粗细,风格,颜色 */ border-bottom : border-width border-style border-color; /* 单独设置下边框的粗细,风格,颜色 */ ``` 能够同时设置边框的颜色、粗细和样式,在语法2中式单独设置某个边框的颜色 ### 语法 ```html <div>段落、列表、表格、文本、图片...</div> <!-- 块级元素 --> ``` ## 计算盒子模型尺寸 计算公式：盒子模型总尺寸 = border+padding+margin+内容宽度 ## 使用盒子模型的两种解析方式来布局网页 ### 语法 ```css box-sizing：content-box | border-box | inherit; ``` 属性值解释 * content-box : 宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。 [默认] * border-box : 为元素设定的宽度和高度决定了元素的边框盒。为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 * inherit : 从父元素继承 box-sizing 属性的值。 ## 使用圆角属性给网页元素添加圆角效果 ### 语法 ```css border-radius: 1-4 length | %; ``` 属性值解释 * 1-4 length : 可以分别设置4个方向的圆角值,取值单位可以为px/em/rem/cm/mm等 * % : 可以适用百分比做取值范围 ## 使用盒子阴影属性给网页元素添加阴影效果 ### 语法 ```css box-shadow: h-shadow v-shadow blur color inset; ``` 参数解释 * h-shadow : 水平阴影的位置。允许负值。[正数:右边 负数:左边] * v-shadow : 垂直阴影的位置。允许负值。 [正数:下边 负数:上面] * blur : 模糊距离。 * color : 阴影颜色。 * inset : 内部阴影。 [默认情况下是外阴影] --- <div class="tip inlineBlock info simple"> ▶️ 开始学习下一章: [HTML从入门到精通 - 浮动](https://jbea.cn/archives/520.html) </div> 最后修改：2022 年 08 月 31 日 © 允许规范转载 赞 4 都滑到这里了，不点赞再走！？
