Winter_Z的论坛回复_云社区-华为云

华为云ID：Winter_Z# CSS 第四章 CSS盒模型 ## 一、盒模型 ### 1. 什么叫盒模型 - 盒模型，英文叫做 Box Model; - 所有的HTML元素都可以看作一个盒子模型； - 我们可以把盒模型就想想成为一个盒子； - 盒模型中主要用来对HTML元素进行布局时使用； ### 2. 盒模型的作用 - 浏览器渲染页面时会根据CSS盒模型规则，将所有HTML元素表示为一个个矩形盒子（**正方形也是矩形**），作用在盒子上的CSS属性就决定了盒子的大小位置以及显示效果。 ### 3. 盒模型的构成 - 一个盒模型是由`四大部分`组成； - `元素内容`**(content)**、`内边距`**(padding)**、`边框`**(border)**、`外边框`**(margin)** ``` .box { padding: 20px; border: 5px solid #000000; margin: 50px; }我是一个无情的div元素``` > **注意：**元素的实际宽度 = `边框`**(border)** ✖ 2 + `内边距`**(padding)** ✖ 2 + `元素内容`**(content)**的宽度；此公式为**标准盒模型**的宽度计算公式； > 还有一种**怪异盒模型**（ie盒模型）计算公式：**元素的实际宽度 = `元素内容`的宽度 ; `元素内容的宽度`其包含了`内边距`**(padding)**、`边框`**(border)**、`元素内容`**(content)**的宽度**； ## 二、内边距 ### 1. 什么是内边距 - 内边距是指在HTML元素内容和边框之间的区域； - 使用CSS属性`padding`来表示； - 属性值为长度值或百分比，默认值是`0`； - 注意**取长度值时不能为负值**； - 百分比值相当于父元素的长度比例； ### 2. 内边距的各个小属性 - 使用`padding-top`定义`上内边距`; - 使用`padding-right`定义`右内边距`； - 使用`padding-bottom`定义`下内边距`； - 使用`padding-left`定义`左内边距`； - `padding`为简写属性； ``` /* 此时，box元素的上下左右内边距都为20px */ .box { padding: 20px; } /* 此写法依次对应：上下内边距、左右内边距 */ .box { padding: 10px(上下) 20px(左右) } /* 此种写法等同于：padding: 10px 20px 30px 20px */ .box { padding: 10px(上) 20px(右) 30px(下); } /* 简写属性中从左往右以此对应：上、右、下、左；使用此简写属性时顺序一定不能错！ */ .box { padding: 10px 20px 30px 40px; } /* 也可如下，单独设置上右下左其中一边的内边距 */ .box { padding-top/right/bottom/left : 20px; } ``` > **注意：**在设置长度值时，一定要添加单位；如：10px。 ## 三、边框 ### 1. 什么叫边框 - 围绕元素内容和内边距的一条边线； - 使用属性`border`代表边框； - 我们可以使用边框属性精确控制这条线的`样式`、`宽度`、`颜色`； ### 2. 边框样式 - 使用`border-style`设置边框的样式属性； - 还可分别设置`上下左右`四条边框的样式属性； - 默认值为`none`，表示无边框； - 还可以设置多种样式，分别为`dotted`、`dashed`、`solid`、`double`、`groove`、`ridge`、`inset`、`outset`等; ### 3. 边框宽度 - 使用`border-width`设置边框的宽度属性； - 可分别设置`上下左右`四条边框的宽度； - 使用`三种`标准边框：`thin`、`medium`、`thick`； - 使用`长度值`作为宽度属性的属性值； ### 4. 边框颜色 - 使用`border-color`设置边框的颜色； - 可分别设置`上下左右`四条边框的颜色； - 可直接设置`颜色名`、`十六进制颜色`、`RGB函数值` ### 5. 复合属性 - 复合是指`一次使用多种样式`定义边框； - 可以使用`border-top`、`border-right`、`border-bottom`、`border-left`分别定义四条边框的所有属性，属性值是：`样式`、`宽度`、`颜色`；宽度和颜色可以选择省略； - 可直接使用`border`属性对四条边框同时设置；属性值同样是：`样式`、`宽度`、`颜色`；宽度和颜色可以选择省略； ```华为云在线教育.box { border-style: solid; /* 可使用三种标准边框；也可使用长度值设置 */ border-width: thick / medium / thick; border-width: 10px; /* 三种设置方式：颜色名、十六进制颜色、RGB函数值 */ border-color: red; border-color: #ff0000; border-color: rgb(255, 0, 0); /* 复合属性：可单独设置其中一个边框的样式；也可四条边框同时设置 */ border-top: 1px solid #00ff00; border: 10px dashed #0000ff; } ``` ## 四、外边距 ### 1. 什么是外边距 - 外边距是指`元素边框之外的区域`； - 设置外边框会在元素外围创建额外的空白空间； - 外边距的作用是**`控制元素和元素之间的距离`**； - 使用`margin`属性来设置外边距； - 还可以使用`margin-top`、`margin-bottom`、`margin-left`、`margin-right`分别控制元素不同方向的外边距； - 属性值可以是`长度值`或者`百分比`，**如果是长度值，则不能为负值**； - 当使用**`margin`简写属性时，取值的含义与`padding`相同**； ``` /* margin 的属性值的用法、顺序、定义等都与 padding 相同 */ margin-top: 50px; margin: 10px 20px 30px 40px; ``` ### 2. 居中显示 - margin有一个常用的特殊用法，`margin左右属性值`为`auto`时，可以设置元素`左右居中`显示； ``` /* 元素居中显示必须设置其 width 属性，否则会占满整行 */ width: 100px; margin: 50px auto; /* 此时，元素的左边距将无限延长；margin-right同理 */ width: 100px; margin-left: auto; ``` > **注意：**当两个**`div(块级)元素`**同时设置`margin`时，它`会有叠加显示`，相当于`两个元素之间的距离`取决于`最大margin属性值的元素`。如下： ``` /* 此时，两个div元素之间的距离为 40px */职业认证微认证.box1 { border: 1px solid #000; margin: 20px; } .box2 { border: 1px solid #00aa00; margin: 40px; } ``` > **注意：**当两个**`span(内联)元素`**同时设置`margin`时，`不会有叠加显示`，相当于`两个元素之间的距离`等于`两个元素margin属性值的总和`。如下： ``` /* 此时，两个div元素之间的距离为 60px */ 职业认证微认证 .box1 { border: 1px solid #000; margin: 20px; } .box2 { border: 1px solid #00aa00; margin: 40px; } ``` ## 五、display属性 ### 1. 神奇的 display 属性 - `display`属性用于控制元素如何显示； - 属性值为`block`时，会将元素以`块级元素`的方式显示； - 属性值为`inline`时，会将元素以`内联元素`的方式显示； - 属性值为`inline-block`时，会将元素以`内联块级元素`的方式显示，同时具有`两个显示特性`； - 属性值为`none`时，元素将`会被隐藏`； ``` /* div块级元素将被转换成内联元素显示；span内联元素将被转换成块级元素显示； */华为云华为云 .box1 { background-color: red; display: inline; } .box2 { background-color: yellow; display: block; } /* span内联元素和 div块级元素将会同时拥有内联块级元素两种显示效果（皆可设置 width 和 height ） */ 华为云1号华为云2号.box3 { display: inline-block; border: 1px solid darkgreen; width: 200px; height: 100px; font-size: 14px; } .box4 { display: inline-block; border: 1px solid blue; width: 200px; height: 100px; font-size: 14px; } ``` ## 六、拓展 ### 1. **`块级元素`和`内联元素`** #### 块级元素 - 元素高度取决于内容的高度； - 元素宽度取决于父元素的宽度； - 可以设置width、height属性 #### 内联元素 - 元素的高度、宽度皆取决于内容的高度、宽度； - 无法设置width、height属性； ### 2. **`标准盒模型`和`怪异盒模型`（IE盒模型）** - 标准盒模型的实际宽度 = border(左右) + padding(左右) + content； - 怪异盒模型的实际宽度 = width（已经包含了padding和border）； - box-sizing: content-box属性可将其转化为标准盒模型； - box-sizing: border-box属性可将其转化为怪异盒模型； ### 3. **`块级`和`内联`元素`左右排布`中间的间隙问题** ``` /* 源码如下： */华为云1号华为云2号.box3 { display: inline-block; border: 1px solid darkgreen; width: 200px; height: 100px; } .box4 { display: inline-block; border: 1px solid blue; width: 200px; height: 100px; } /* 解决方法1：降低代码可读性格式化，将“空格-回车”删除。 */华为云1号华为云2号/* 解决方法2：将父级元素的 font-size 属性值为0，此时间隙消失，但文字也看不见；将子元素的 font-size 属性值设置为可见大小即可解决问题 */华为云1号华为云2号body { font-size: 0px; } .box3 { display: inline-block; border: 1px solid darkgreen; width: 200px; height: 100px; font-size：14px; } .box4 { display: inline-block; border: 1px solid blue; width: 200px; height: 100px; font-size: 14px; } ```

## **华为云ID: Winter_Z** ## **完成日期：2020/06/23** # CSS 第三章 CSS常用属性 ## 学习笔记 ### 字体 - 使用`font-family`属性来定义文字的字体； - 属性值为`字体的名称`，可设置多个名称，浏览器会按顺序使用第一个支持的字体； - 字体优先级列表； > **字体优先级列表**相当于，你定义的字体浏览器会按顺序使用本机已安装 (浏览器支持) 的字体。 #### 字体的属性值 / 种类主要分为**衬线字体**和**非衬线字体**。除此两大类还有较为典型的**等宽字体**。 ``` /* 衬线字体 */ font-family: serif; /* 非衬线字体 */ font-family: sans-serif; /* 等宽字体 */ font-family: monospace; ``` ***衬线字体*** - 形状较为花哨，边缘有修饰效果； - 多数用于标题的显示； ***非衬线字体*** - 形状较为圆润，无过多修饰效果； - 多数用于正文； ***等宽字体*** - 每个字符宽度都是相等的； > 可通过浏览器**开发者工具(F12)** --- **单击“Elements”菜单栏** --- **选中要查看样式的元素** --- **单击右区域“Computed”标签** 查看该元素的CSS样式属性。 #### 字体尺寸 - 使用`font-size`属性来定义文字的尺寸； - 属性值为长度值。例如：30px； - 属性值可以使用百分比。例如：50%； > **百分比**是相对于其父元素 / 父容器而定义出来的。 ``` /* 30像素指的是整个字体的区域的高度，并不是字体本身的大小 */ font-size: 30px; ``` #### 字体样式 - 使用`font-style`属性设置文字的样式； - 默认属性值为`normal`显示标准效果； - 当属性值显示为`italic`时显示倾斜效果； ``` /* 主要是往右倾斜 */ font-style: italic; ``` #### 字体粗细 - 使用`font-weight`属性设置文字的粗细； - 默认值为`normal`，相当于`400`，显示效果为**正常粗细**； - 属性值为`bold`时，相当于`700`，显示为**粗体**； - 属性值为`bolder`时，显示**更粗**； - 属性值为`lighter`时，显示**更细**； - 属性值也可设置为**具体数值**：**100 / 200 / 300 / 400 / 500 / 600 / 700 / 800 / 900**； > **具体数值不能设置除以上数值以外的数值。** 例如：150/230/40...... ``` /* 粗体 */ font-weight: bold; /* 较细 */ font-weight: 100; ``` #### 简写属性 - 使用`font`属性来定义所有文字的样式； - 各个属性值之间需要用空格分隔； - 格式：`font: font-family font-size font-style font-weight` ``` /* 此处 50px 指的是字体的行高; 使用方式：字体大小/字体行高 */ font: italic 30ox/50px bold serif; ``` ## 文本 > CSS当中的文本系列属性，主要就是用来修饰**HTML文档中的文本**。 #### 颜色 - 使用`color`属性来设置文本的颜色； - 属性值可以是`颜色名`、`十六进制颜色值`、`RGB颜色值`； ``` /* 颜色名 */ color: red; /* 十六进制颜色值 */ color: #ff0000; /* RGB颜色值 */ color: rgb(192,0,0); ``` #### 行高 - 使用`line-height`属性来设置文本行高； - 默认值为：`normal`; - 其他属性值为`长度值`、`百分比`； ``` /* 可使用 normal、长度值、百分比 */ line-height: normal / 50px / 250%; ``` #### 对齐方式 - 使用`text-align`属性来设置文本的对齐方式； - 属性值有：`left(左)`、`right(右)`、`center(中)`； ``` text-align: left / right / center; ``` #### 方向 - 使用`direction`属性设置文本的方向； - 属性值有：`ltr(左)`、`rtl(右)`； - 注意与对齐方式属性的区别； ``` /* 不可与 text-align 同时使用 */ direction: ltr / rtl; ``` #### 缩进 - 使用`text-indent`属性设置段落的首行缩进； - 默认值为**0**，其他属性值有：`长度值`、`百分比`； ``` /* 2em 相当于首行缩进两个字体的空间 */ text-indent: 50px / 2em / 50%; ``` #### 装饰线 - 使用`text-decoration`属性设置文本的装饰线； - 属性值有：`underline(下划线)`、`overline(上划线)`、`line-through(中划线)`； - 默认值为`none`，表示没有线； ``` /* 下划线、上划线、中划线 */ text-decoration: underline / overline / line-through; ``` #### 间隔 - 使用`letter-spacing`属性设置文本字符间隔的大小； - 属性值为**长度值**，可为负值； ``` /* 当为负值时，字体会重叠在一起 */ letter-spacing: 10px / -1px; ``` #### 阴影 - 使用`text-shadow`属性来设置文本的阴影； - 属性值为： X轴偏移量 + Y轴偏移量 + 模糊距离 + 颜色； ``` /* X轴偏移量、Y轴偏移量、模糊距离、颜色 */ text-shadow: 5px 5px 3px yellow; ``` ## 尺寸 #### 宽度和高度 - 使用`width`属性定义宽度； - 使用`height`属性定义高度； - 属性值为：`auto(默认值)`、`长度`、`百分比`； #### 最小宽度和最小高度 > **最小宽度**指的是元素最小的时候，其宽度为设置的最小宽度。此时宽度可延展，页面有多宽元素的宽度就有多宽。 > **最小高度**指的是元素最小的时候，其高度为设置的最小高度。 - 使用`min-width`属性定义最小宽度； ``` /* 不设置 width 属性值时，元素最大 width 等于页面 width；元素 min-width 为100px */ min-width: 100px; /* 若 width 的值小于 min-width 的值时，width 属性值不生效。 */ /* height 和 min-height 与此同理。 */ width: 50px; min-width: 100px; ``` - 使用`min-height`属性定义最小高度； ``` /* 不设置 height 和 min-height 属性值时，元素的 height 属性值时，默认为元素内容的高度 */ min-height: 100px; ``` #### 最大宽度和最大高度 - 使用`max-width`属性定义最大宽度； - 使用`max-height`属性定义最大高度； > 与**最小宽度**和**最小高度**同理。实例如下： ``` /* 此时，元素的宽度 = 页面的宽度 */ min-width: 100px; /* 此时，元素的宽度 = 500像素 */ max-width: 500px; /* 此时，元素的宽度 = 100像素；width不生效 */ width：50px; min-width: 100px; /* 此时，元素的宽度 = 500像素 */ width: 600px; max-width: 500px; /* 此时，元素的宽度 = 500像素；因为在不设置width属性值时，宽度可扩展至最大，即500px */ min-width: 100px; max-width: 500px; /* 此时，元素的宽度 = 300像素 */ width：300px; min-width: 100px; max-width: 500px; ``` ``` /* 此时，元素的高度 = 100像素；因为在不设置高度属性的情况下，元素默认的高度为元素内容的高度。 */ min-height: 100px; /* 此时，元素的高度 = 元素默认高度 */ max-height: 500px; /* 此时，元素的高度 = 100像素；height不生效 */ height：50px; min-height: 100px; /* 此时，元素的高度 = 500px */ height: 600px; max-height: 500px; /* 此时，元素的高度 = 100像素；因为在不设置height属性值时，高度可缩小至最小，即100px */ min-height: 100px; max-height: 500px; /* 此时，元素的高度 = 300像素 */ height：300px; min-height: 100px; max-height: 500px; ``` ## 列表 > 列表的种类分为**有序列表 (ol) **、**无序列表 (ul) **和**自定义列表**等。有序和无序列表使用较多，自定义列表多用于复杂的数据展示。 #### list-style-image - 用于指定一个图片作为列表项前面的标记； - 默认值为：`none`； - 可以设置一个图片的`url`作为标记图片； #### list-style-position - 用于设置在什么位置显示列表项前面的标记； - 默认值为：`outside`； - 还可设置为：`inside`; #### list-style-type - 用于设置列表项前面图标的类型 - 默认值为`disc(小圆点)`，其他值为：`circle(圆)`、`square(正方形)`、`decimal(数字)`、`none(无)`、`low-alpha(大写字母)`、`upper-alpha(小写字母)`... #### list-style - 这是一个简写属性； - `list-style` = `list-style-image` + `list-style-position` + `list-style-type`； - 其属性值可以忽略几项； ``` /* 指定图片*/ list-style-image: url("图片路径"); /* 设置位置 */ list-style-position: inside; /* 设置类型；注意：与 list-style-image 属性同时使用时，此类型属性无效 */ list-style-type: square; /* 通过 decimal 属性值，可将无序列表（ul）通过此属性变为有序列表（ol），两者网页效果相同。 */ list-style-type: decimal; /* 简写属性用法 */ list-style: inside low-alpha; ``` > **注意：**虽然`list-style-image`与`list-style-type`同时使用时后者会失效，但考虑到不同浏览器兼容性问题，大多数企业级开发仍然会将两个属性同时使用。 ## 背景 #### background-color - 用来设置元素的背景颜色； - 默认值为：`transparent(透明)`； - 三种方法直接设置颜色：`颜色名`、`十六进制颜色`、`RGB颜色`； ``` /* 依次对应三种方法 */ background-color: red; background-color: #ff0000; background-color: rgb(255,0,0) ``` #### background-image > 图片的`url地址`，可以使用`相对路径`和`绝对路径`。 - 用来设置背景元素的背景图片； - 默认值为：`none`； - 还可以设置图片的`url地址`，来设置背景图片； ``` background-image: url(图片路径); ``` #### background-repeat - 配和`background-image`属性一起使用，用来设置背景图片的平铺方式； - 默认值为：`repeat`，表示将背景图片在`x轴`和`y轴`方向平铺显示； - 其他属性值：`repeat-x(沿x轴平铺)`、`repeat-y(沿y轴平铺)`、`no-repeat(不平铺)`； ``` background-repeat: no-repeat; ``` #### background-position - 配合`background-image`一起使用，用来设置背景图片的起始点位置； - 坐标默认为`左上角零点`位置； - 位置参数：X轴方向`left`、`center`、`right`; Y轴方向：`top`、`center`、`bottom`; - 百分比： X轴位置`x%`、Y轴位置`y%`； - 长度：X轴离`原点`长度、Y轴离`原点`长度； ``` /* X轴方向靠右，Y轴方向居中 */ background-position: right center; /* 没有设置的属性值，默认值为center；等同于上面的 right center */ background-position: right; /* 相当于X轴居中，Y轴居中 */ background-position：50% 50%; /* 长度的值，都是距离页面左上角的零点（原点）开始测量 */ background-position: 500px 200px; ``` #### background-attachment - 用于设置背景图片固定或者跟随页面滚动； - 默认值： `scroll`; - 还可以设置为`fixed`; ``` /* 此时，背景图片不会跟随页面滚动而滚动，会一直在屏幕的固定位置 */ background-attachment: fixed; /* 此时，背景图片会跟随页面的滚动而滚动，不会固定在屏幕的某位置 */ background-attachment: scroll; ``` #### background - 简写属性； - `background` = `background-color` + `background-image` + `background-repeat` + `background-position` + `background-attachment`; - 可以全部设置，也可以省略几项； ## 简写属性 - 属性之间都用空格来间隔； - 可以全部设置，也可以省略其中几项；被省略的属性将会按照其默认值显示效果； ``` background: url("logo.jpg") red no-repeat center center; ```