htmlcss

HTML4

超链接

超链接内部可以嵌套任何元素，除了超链接

主要作用：从当前页面进行跳转。

可以实现：①跳转到指定页面、②跳转到指定文件（也可触发下载）、③跳转到锚点位置、④唤起指定 应用

跳转到页面

<!-- 跳转其他网页 -->
 <a href="https://www.jd.com/" target="_blank">去京东</a>
 <!-- 跳转本地网页 -->
 <a href="./10_HTML排版标签.html" target="_self">去看排版标签</a>

跳转到文件

<!-- 浏览器能直接打开的文件 -->
 <a href="./resource/图片.jpg">看图片</a>
 <!-- 浏览器不能打开的文件，会自动触发下载 -->
 <a href="./resource/内部资源.zip">内部资源</a>
 <!-- 强制触发下载 -->
 <a href="./resource/小电影.mp4" download="电影片段.mp4">下载电影</a>

注意1：若浏览器无法打开文件，则会引导用户下载。

注意2：若想强制触发下载，请使用 download 属性，属性值即为下载文件的名称。

跳转到锚点

第一步 设置锚点

<!-- 第一种方式：a标签配合name属性 -->
 <a name="test1"></a>
 <!-- 第二种方式：其他标签配合id属性 -->
 <h2 id="test2">我是一个位置</h2>

第二步 跳转锚点

<!-- 跳转到test1锚点-->
 <a href="#test1">去test1锚点</a>
 <!-- 跳到本页面顶部 -->
 <a href="#">回到顶部</a>
 <!-- 跳转到其他页面锚点 -->
 <a href="demo.html#test1">去demo.html页面的test1锚点</a>
 <!-- 刷新本页面 -->
 <a href="">刷新本页面</a>

唤起指定应用

通过 a 标签，可以唤起设备应用程序。

<!-- 唤起设备拨号 -->
 <a href="tel:10010">电话联系</a>
 <!-- 唤起设备发送邮件 -->
 <a href="mailto:10010@qq.com">邮件联系</a>
 <!-- 唤起设备发送短信 -->
 <a href="sms:10086">短信联系</a>

列表

有序列表

<h2>要把大象放冰箱总共分几步</h2>
 <ol>
 <li>把冰箱门打开</li>
 <li>把大象放进去</li>
 <li>把冰箱门关上</li>
 </ol>

无序列表

<h2>我想去的几个城市</h2>
 <ul>
 <li>成都</li>
 <li>上海</li>
 <li>西安</li>
 <li>武汉</li>
 </ul>

表格

表格标签

table ：表格

caption ：表格标题

thead ：表格头部

tbody ：表格主体

tfoot ：表格注脚

tr ：每一行

th 、td：每一个单元格（备注：表格头部中用 th ，表格主体、表格脚注中用：td

具体编码

<table border="1">
        <caption>2024玩过的游戏</caption>
        <thead>
            <tr>
                <th>游戏</th>
                <th>时长</th>
                <th>评分</th>
                <th>类型</th>    
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>博德之门</td>
                <td>300+h</td>
                <td>10</td>
                <td>crpg</td>
            </tr>
            <tr>
                <td>黑神话悟空</td>
                <td>50+h</td>
                <td>10</td>
                <td>arpg</td>
            </tr>
            <tr>
                <td>艾尔登法环</td>
                <td>1000+h</td>
                <td>10</td>
                <td>arpg</td>
            </tr>
        </tbody>
        <tfoot></tfoot>
    </table>

常用属性

标签名	标签语义	常用属性	单/双标签
table	表格	width：设置表格宽度。 height：设置表格最小高度。 border：设置表格边框宽度。 cellspacing：设置单元格之间的间距。	双
thead	表格头部	height：设置表格头部高度。 align：设置单元格的水平对齐方式。 valign：设置单元格的垂直对齐方式。	双
tbody	表格主体	常用属性与 thead 相同。	双
tr	行	常用属性与 thead 相同。	双
tfoot	表格脚注	常用属性与 thead 相同。	双
td	普通单元格	width：设置单元格的宽度。 height：设置单元格的高度。 align：设置单元格的水平对齐方式。 valign：设置单元格的垂直对齐方式。 rowspan：指定要跨的行数。 colspan：指定要跨的列数。	双
th	表头单元格	常用属性与 td 相同。	双

常用标签补充

标签名	标签含义	单/双标签
br	换行	单
hr	分隔	单
pre	按原文显示（一般用于在页面中嵌入大段代码）	双

表单

常用表单控件

序号	标签类型	常用属性及注意事项	示例代码
①	文本输入框	name 属性：数据的名称。 value 属性：输入框的默认输入值。 maxlength 属性：输入框最大可输入长度。	<input type="text" name="username" value="默认值" maxlength="20">
②	密码输入框	name 属性：数据的名称。 value 属性：输入框的默认输入值（一般不用，无意义）。 maxlength 属性：输入框最大可输入长度。	<input type="password" name="password" maxlength="20">
③	单选框	name 属性：数据的名称，注意：想要单选效果，多个 radio 的 name 属性值要保持一致。 value 属性：提交的数据值。 checked 属性：让该单选按钮默认选中。	<input type="radio" name="sex" value="female"> 女<br><input type="radio" name="sex" value="male" checked> 男
④	复选框	name 属性：数据的名称。 value 属性：提交的数据值。 checked 属性：让该复选框默认选中。	<input type="checkbox" name="hobby" value="smoke" checked> 抽烟<br><input type="checkbox" name="hobby" value="drink"> 喝酒
⑤	隐藏域	name 属性：指定数据的名称。 value 属性：指定的是真正提交的数据。	<input type="hidden" name="tag" value="100">
⑥	提交按钮	注意： 1. button 标签 type 属性的默认值是 submit。 2. button 不要指定 name 属性。 3. input 标签编写的按钮，使用 value 属性指定按钮文字。	<input type="submit" value="点我提交表单"><br><button>点我提交表单</button>
⑦	重置按钮	注意点： 1. button 不要指定 name 属性。 2. input 标签编写的按钮，使用 value 属性指定按钮文字。	<input type="reset" value="点我重置"><br><button type="reset">点我重置</button>
⑧	普通按钮	注意点：普通按钮的 type 值为 button，若不写 type 值是 submit 会引起表单的提交。	<input type="button" value="普通按钮"><br><button type="button">普通按钮</button>
⑨	文本域	常用属性如下： 1. rows 属性：指定默认显示的行数，会影响文本域的高度。 2. cols 属性：指定默认显示的列数，会影响文本域的宽度。 3. 不能编写 type 属性，其他属性与文本框一致。	<textarea name="msg" rows="22" cols="3">我是文本域</textarea>
⑩	下拉框	常用属性及注意事项： 1. name 属性：指定数据的名称。 2. option 标签设置 value 属性，提交的数据是 value 的值（建议设置 value 属性）。 3. option 标签设置了 selected 属性，表示默认选中。	<select name="from"><option value="黑">黑龙江</option><option value="辽">辽宁</option><option value="粤" selected>广东</option></select>

禁用表单控件

给表单控件的标签设置 disabled 既可禁用表单控件

input 、 textarea 、 button 、 select 、 option 都可以设置

label标签

label 标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。

两种与 label 关联方式如下：

1. 让label标签的 for 属性的值等于表单控件的 id
2. 把表单控件套在 label标签的里面。

CSS2

CSS编写位置

行内样式

写在标签的style 属性中，（又称：内联样式）。

<h1 style="color:red;font-size:60px;">用例</h1>

内部样式

写在html 页面内部,单独放在style标签中

<style>
     h1 {
		 color: red;
         font-size: 40px;
     }
 </style>

外部样式

写在单独的.css文件中，随后在html中引入使用

1. 新建一个扩展名为.css的样式文件

   h1 {
        color: red;
    	 font-size: 40px;
   }

2. 在HTML文件中引入

   <link rel="stylesheet" href="./xxx.css">

优先级

优先级规则：行内样式 > 内部样式 = 外部样式

1. 内部样式、外部样式，这二者的优先级相同，且：后面的 会覆盖 前面的（简记：“后来 者居上”）。
2. 同一个样式表中，优先级也和编写顺序有关，且：后面的 会覆盖 前面的（简记：“后来 者居上”）。

CSS选择器

基本选择器

通配选择器

作用：选中所有元素

* {
	 color: orange;
 	 font-size: 40px;
}

元素选择器

作用： 为某种元素设统一样式

h1 {
    color: orange;
    font-size: 40px;
}

类选择器

作用：根据元素的class值，来选中某些元素

.active {
	 color: red;
}

id选择器

作用：根据元素的id属性值，选中某个元素

#earthy {
    color: red;
    font-size: 60px;
}

复合选择器

交集选择器

作用：选中同时符合多个条件的元素

button.active {
	color: blue
}

并集选择器

作用：多个条件，符合一个即可的元素

.rich,
.beauty {
   font-size: 40px;
   background-color: skyblue;
   width: 200px;
}

后代选择器

作用：选中指定元素中，符合要求的后代元素

/* 选中ul中的所有li */
 ul li {
 color: red;  
}
 /* 选中ul中所有li中的a */
 ul li a {
 color: orange;
 }
 /* 选中类名为subject元素中的所有li */
 .subject li {
 color: blue;
 }
 /* 选中类名为subject元素中的所有类名为front-end的li */
 .subject li.front-end {
 color: blue;
 }

子代选择器

作用： 选中指定元素中，符合要求的子元素

/* div中的子代a元素 */
 div>a {
 color: red;
 }
 /* 类名为persons的元素中的子代a元素 */
 .persons>a{
 color: red;
 }

兄弟选择器

相邻兄弟选择器

作用：选中紧挨着的下一个

div+p {
	color: red
}

通用兄弟选择器

作用：选中下面的所有符合要求兄弟

div~p {
    color:red;
}

属性选择器

作用：选中属性值符合一定要求的元素。

语法：

1. [属性名] 选中具有某个属性的元素。

2. [属性名="值"] 选中包含某个属性，且属性值等于指定值的元素。

3. [属性名^="值"] 选中包含某个属性，且属性值以指定的值开头的元素。

4. [属性名$="值"] 选中包含某个属性，且属性值以指定的值结尾的元素。

5. [属性名*=“值”] 选择包含某个属性，属性值包含指定值的元素。

/* 选中具有title属性的元素 */
 div[title]{color:red;}
 /* 选中title属性值为atguigu的元素 */
 div[title="winter"]{color:red;}
 /* 选中title属性值以a开头的元素 */
 div[title^="a"]{color:red;}
 /* 选中title属性值以u结尾的元素 */
 div[title$="u"]{color:red;}
 /* 选中title属性值包含g的元素 */
 div[title*="g"]{color:red;}

伪类选择器

动态伪类

1. :link

   • 表示超链接未被访问的状态。

2. :visited

   • 表示超链接已经被访问过的状态。

3. :hover

   • 表示鼠标悬停在元素上的状态。

4. :active

   • 表示元素被激活的状态。
   • 激活：按下鼠标但不松开。
   • 注意：遵循 LVHA 的顺序，即：link -> visited -> hover -> active。

5. :focus

   • 表示获取焦点的元素。
   • 通常表单类元素才能使用 :link、:visited、:hover、:focus 伪类。
   • 当用户点击元素、触摸元素，或通过键盘（如按 tab 键）选择元素时，元素会获得焦点。

结构伪类

1. :first-child

   • 选中所有兄弟元素中的第一个。

2. :last-child

   • 选中所有兄弟元素中的最后一个。

3. :nth-child(n)

   • 选中所有兄弟元素中的第 n 个。

4. :first-of-type

   • 选中所有同类型兄弟元素中的第一个。

5. :last-of-type

   • 选中所有同类型兄弟元素中的最后一个。

6. :nth-of-type(n)

   • 选中所有同类型兄弟元素中的第 n 个。

0 或不写：什么都选不中 —— 几乎不用。

n：选中所有子元素 —— 几乎不用。

1 到正无穷的整数：选中对应序号的子元素。

2n 或 even：选中序号为偶数的子元素。

2n+1 或 odd：选中序号为奇数的子元素。

n+3：选中前 3 个子元素。

否定伪类

:not(选择器) 排除满足括号中条件的元素。

UI伪类

1. :checked 被选中的复选框或单选按钮。
2. :enable 可用的表单元素（没有 disabled 属性）。
3. :disabled 不可用的表单元素（有 disabled 属性）。

伪元素选择器

1. ::first-letter

   • 选中元素中的第一个文字。

2. ::first-line

   • 选中元素中的第一行文字。

3. ::selection

   • 选中被鼠标选中的内容。

4. ::placeholder

   • 选中输入框的提示文字。

5. ::before

   • 在元素最开始的位置创建一个子元素（必须用 content 属性指定内容）。

6. ::after

   • 在元素最后的位置创建一个子元素（必须用 content 属性指定内容）。

选择器优先级

行内样式 > ID选择器 > (伪)类选择器 > (伪)元素选择器 > 通配选择器

!important权重最高（跟在值后面）

复合选择器的优先级

优先级由四个部分组成，用“A, B, C, ”表示，具体计算规则如下：

1. A: ID选择器的数量。
2. B: 类选择器、属性选择器、伪类选择器的数量。
3. C: 元素选择器、伪元素选择器的数量。

从左到右，一位一位比较，一旦比出胜负，不再比较

CSS三大特性

层叠性（Cascade）
层叠性指的是当多个样式同时作用于一个元素时，CSS会按照一定的规则来决定哪个样式最终生效。这些规则包括样式的来源（如外部样式表、内联样式等）、选择器的优先级、以及样式的定义顺序。具体层叠规则包括：

• 样式来源优先级：浏览器默认样式 < 外部样式表 < 内部样式表 < 内联样式。
• 选择器的权重（具体选择器比通用选择器优先级高）。
• 后定义的样式优先。

继承性（Inheritance）
继承性指的是某些CSS属性可以从父元素传递给子元素。例如，color（字体颜色）和font-family（字体类型）等属性是可以继承的。而像padding（内边距）和margin（外边距）这样的属性则不会被继承。继承性帮助减少样式重复设置，提高代码可维护性。

优先级（Specificity）
优先级决定了当多个选择器作用于同一元素时，哪个选择器的样式会生效。优先级的计算规则根据选择器的类型来决定，越具体的选择器优先级越高。具体规则如下：

• ID选择器（#id）优先级最高。
• 类选择器（.class）、伪类选择器等次之。
• 元素选择器（div、p等）优先级较低。

CSS颜色

表示方式一：颜色名

编写方式：直接使用颜色对应的英文单词

表示方式二：rgb或rgba

使用 红、黄、蓝 这三种光的三原色进行组合。

• r 表示 红色
• g 表示 绿色
• b 表示 蓝色
• a 表示 透明度

举例：

/* 使用 0~255 之间的数字表示一种颜色 */
 color: rgb(255, 0, 0);/* 红色 */
 color: rgb(0, 255, 0);/* 绿色 */
 color: rgb(0, 0, 255);/* 蓝色 */
 color: rgb(0, 0, 0);/* 黑色 */
 color: rgb(255, 255, 255);/* 白色 */
 /* 混合出任意一种颜色 */
 color:rgb(138, 43, 226) /* 紫罗兰色 */
 color:rgba(255, 0, 0, 0.5);/* 半透明的红色 */
 /* 也可以使用百分比表示一种颜色（用的少） */
 color: rgb(100%, 0%, 0%);/* 红色 */
 color: rgba(100%, 0%, 0%,50%);/* 半透明的红色 */

表达方式三： HEX或HEXA

HEX 的原理同与 0~255 的数字，要么都是 rgb 一样，依然是通过：红、绿、蓝色 进行组合，只不过要用 6位（分成3组） 来 表达， 格式为：#rrggbb

每一位数字的范围是 0~f

所以每一种光的最小值是 00 最大值是ff

示例

color: #ff0000;/* 红色 */
color: #00ff00;/* 绿色 */
color: #0000ff;/* 蓝色 */
color: #000000;/* 黑色 */
color: #ffffff;/* 白色 */
/* 如果每种颜色的两位都是相同的，就可以简写*/
color: #ff9988;/* 可简为：#f98 */
/* 但要注意前三位简写了，那么透明度就也要简写 */
color: #ff998866;/* 可简为：#f986 */

表达方式四： HSL或HSLA

HSL 是通过：色相、饱和度、亮度，来表示一个颜色的，格式为： hsl(色相,饱和度,亮度)

• 色相（Hue）: 范围是 0° ~ 360°，例如：
  • 0°: 红色
  • 60°: 黄色
  • 120°: 绿色
  • 180°: 青色
  • 240°: 蓝色
  • 300°: 紫色
• 饱和度（Saturation）: 0% ~ 100%，代表颜色的纯度，0% 是灰色，100% 是完全纯色。
• 亮度（Lightness）: 0% ~ 100%，0% 是黑色，100% 是白色，50% 为正常亮度。
• 透明度（Alpha）: 0 表示完全透明，1 表示完全不透明。

例如：

hsla(120, 50%, 50%, 0.7)

CSS字体属性

字体大小（Font Size）

在 HSL 的基础上，HSLA 添加了透明度属性，用于控制颜色的透明度。

属性名：

font-size

作用：

控制字体的大小。

语法：

div {  
  font-size: 40px; 
}

1. Chrome 浏览器支持的最小文字为 12px ，默认的文字大小为 16px ，并且 0px 会自动 消失。
2. 不同浏览器默认的字体大小可能不一致，所以最好给一个明确的值，不要用默认大 小。
3. 通常以给 body 设置 font-size 属性，这样 body 中的其他元素就都可以继承了。

字体类型（Font Family）

属性名：

font-family

作用：

控制字体的类型。

语法：

div {
  font-family: "STCaiyun", "Microsoft YaHei", sans-serif;
}

1. 使用字体的英文名字会有更好的兼容性，具体的英文名称可以自行查询，或者在电脑的设置中寻找。

2. 如果字体名称中包含空格，必须使用引号包裹起来。

3. 可以设置多个字体，浏览器会按照从左到右的顺序逐个查找，找到的字体就会被使用，如果没有找到会继续使用后面的字体，通常在最后写上 serif（衬线字体）或 sans-serif（无衬线字体）作为兜底字体。

4. 在 Windows 系统中，默认的字体为微软雅黑（Microsoft YaHei）。

字体风格 ( font style)

属性名：
font-style

作用：
控制字体是否为斜体。

常用值：

1. normal：正常（默认值）
2. italic：斜体（使用字体自带的斜体效果）
3. oblique：斜体（强制倾斜产生的斜体效果）

实现斜体时，推荐使用 sans-serif（非衬线字体）。

例如：

div {  
  font-style: italic;
}

字体粗细 (font weight)

属性名：
font-weight

作用：
控制字体的粗细。

常用值：

• 关键词：

1. lighter：细
2. normal：正常
3. bold：粗
4. bolder：很粗（多数字体不支持）

• 数值：

1. 100 ~ 300 等同于 100 ~ 1000 且无单位，数值越大，字体越粗（具体效果取决于字体设计）。
2. 400 ~ 500 等同于 normal，600 ~ 700 等同于 bold。

字体复合属性

属性名：
font（复合属性）

作用：
同时设置字体的样式、粗细、大小、行高和字体类型。

语法：

font: font-style font-weight font-size/line-height font-family;

例如：

div {
  font: italic bold 16px/24px "Arial", sans-serif;
}

这段代码同时设置了：

• 字体为斜体 (italic)
• 字体为粗体 (bold)
• 字体大小为 16px，行高为 24px
• 字体类型为 Arial，如果找不到就使用 sans-serif

CSS文本属性

文本颜色

属性名：
color

作用：
控制文字的颜色。

可选值：

1. 颜色名
2. rgb 或 rgba
3. HEX 或 HEXA（十六进制）
4. HSL 或 HSLA

开发中常用的是：
rgb/rgba 或

举例：

div { 
    color: rgb(112, 45, 78);
}

文本间距

字母间距：
letter-spacing

单词间距：
word-spacing （通过空格识别词）

属性值：
使用像素（px）作为单位，正值增加间距，负值缩小间距。

举例：

p {
    letter-spacing: 2px;
    word-spacing: 5px;
}

文本修饰

属性名：
text-decoration

作用：
控制文本的各种装饰线。

可选值：

1. none ：无装饰线（常用）
2. underline ：下划线（常用）
3. overline ：上划线
4. line-through ：删除线

可搭配如下值使用：

1. dotted ：虚线
2. wavy ：波浪线
3. 也可以指定颜色

举例：

a { 
    text-decoration: none;
}

文本缩进

属性名：
text-indent

作用：
控制文本首字母的缩进。

属性值：
CSS 中的长度单位，例如：px

举例：

div { 
    text-indent: 40px;
}

文本对齐—水平

属性名：
text-align

作用：
控制文本的水平对齐方式。

常用值：

1. left ：左对齐（默认值）
2. right ：右对齐
3. center ：居中对齐

举例：

div { 
    text-align: center; 
}

行高

属性名：
line-height

作用：
控制一行文字的高度。

可选值：

1. normal ：由浏览器根据文字大小决定的一个默认值。
2. 像素（px）。
3. 数字：参考自身 font-size 的倍数（很常用）。
4. 百分比：参考自身 font-size 的百分比。

举例：

div { 
    line-height: 60px;
    line-height: 1.5;
    line-height: 150%;
}

行高注意事项

line-height 过小会怎样？——文字产生重叠，且最小值是 0，不能为负数。

line-height 是可以继承的，且为了更好的呈现文字，建议使用数值。

line-height 和 height 是什么关系？

• 设置了 height，那么高度就是 height 的值。
• 不设置 height 的时候，会根据 line-height 计算高度。

应用场景

对于多行文字：控制行与行之间的距离。

对于单行文字：让 height 等于 line-height，可以实现文字垂直居中。

文本对齐-垂直

1. 顶部：
   无需任何属性，在垂直方向上，默认就是顶部对齐。

2. 居中：
   对于单行文字，让 height = line-height 即可。
   问题： 多行文字垂直居中怎么办？——定位

3. 底部：
   对于单行文字，目前一个临时的方式：
   让 line-height = (height × 2) - font-size - x。
   备注： x 是根据字体族动态决定的一个值。
   问题： 垂直方向上的底部对齐，更好的解决办法是什么？——定位。****

vertical-align

属性名：
vertical-align

作用：
用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式。

常用值：

1. baseline（默认值）：使元素的基线与父元素的基线对齐。
2. top：使元素的顶部与其所在行的顶部对齐。
3. middle：使元素的中部与父元素的基线加上父元素字母 x 的一半对齐。
4. bottom：使元素的底部与其所在行的底部对齐。

特别注意：

vertical-align 不能控制块元素 。

CSS列表属性

列表相关的属性：
可以作用在 ul、ol、li 元素上。

CSS 属性名及功能：

1. list-style-type
   作用： 设置列表符号
   常用值如下：

   • none：不显示前面的标识（很常用！）
   • square：实心方块
   • disc：圆形
   • decimal：数字
   • lower-roman：小写罗马字
   • upper-roman：大写罗马字
   • lower-alpha：小写字母
   • upper-alpha：大写字母

2. list-style-position
   作用： 设置列表符号的位置
   常用值如下：

   • inside：在 li 的里面
   • outside：在 li 的外边

3. list-style-image
   作用： 自定义列表符号
   常用值：

   • url(图片地址)

4. list-style
   作用： 复合属性，允许没有数量、顺序的要求。

举例：

ul {
    list-style-type: square;
    list-style-position: inside;
    list-style-image: url('image.png');
}

CSS表格属性

表格元素通用属性

CSS 属性名及功能：

1. border-width
   作用： 设置边框宽度
   属性值： CSS 中可用的长度值（如 px, em, 等）

2. border-color
   作用： 设置边框颜色
   属性值： CSS 中可用的颜色值（如 red, #000000, rgb() 等）

3. border-style
   作用： 设置边框风格
   常用值如下：

   • none：无边框（默认值）
   • solid：实线
   • dashed：虚线
   • dotted：点线
   • double：双实线

4. border
   作用： 边框复合属性，允许同时设置宽度、颜色和样式，没有数量和顺序的要求。

举例：

div {
    border-width: 2px;
    border-color: #333;
    border-style: solid;
}

div {
    border: 2px solid #333;
}

表格专属属性

CSS 属性名及功能：

1. table-layout
   作用： 设置列宽度
   常用值：

   • auto：自动，列宽根据内容计算（默认值）
   • fixed：固定列宽，平均分配

2. border-spacing
   作用： 设置单元格间距
   属性值： CSS 中可用的长度值
   生效前提： 单元格边框不能合并。

3. border-collapse
   作用： 合并单元格边框
   常用值：

   • collapse：合并
   • separate：不合并

4. empty-cells
   作用： 隐藏没有内容的单元格
   常用值：

   • show：显示（默认值）
   • hide：隐藏
     生效前提： 单元格不能合并。

5. caption-side
   作用： 设置表格标题位置
   常用值：

   • top：在表格上方（默认值）
   • bottom：在表格下方

举例：

table {
    table-layout: fixed;
    border-spacing: 10px;
    border-collapse: collapse;
}

caption {
    caption-side: bottom;
}

CSS背景属性

CSS 属性名及功能：

1. background-color
   作用： 设置背景颜色
   属性值： 符合 CSS 中颜色规范的值
   默认值： transparent

2. background-image
   作用： 设置背景图片
   属性值： url(图片的地址)

3. background-repeat
   作用： 设置背景重复方式
   常用值如下：

   • repeat：重复，铺满整个元素（默认值）
   • repeat-x：只在水平方向重复
   • repeat-y：只在垂直方向重复
   • no-repeat：不重复

4. background-position
   作用： 设置背景图片的位置
   通过关键字设置位置：

   • 水平：left、center、right
   • 垂直：top、center、bottom
   • 如果只写一个值，另一个方向的值取 center

   通过长度指定坐标位置：
   以元素左上角为坐标原点，设置图片左上角的位置。

   • 两个值，分别为 x 坐标和 y 坐标
   • 只写一个值，表示 x 坐标，y 坐标取 center

5. background
   作用： 复合属性，允许同时设置背景颜色、图片、重复方式、位置等，没有数量和顺序要求。

举例：

div {
    background-color: #f0f0f0;
    background-image: url('image.png');
    background-repeat: no-repeat;
    background-position: center top;
}

CSS鼠标属性

CSS 属性名：
cursor

作用：
设置鼠标光标的样式。

常用值：

• pointer ：小手
• move ：移动图标
• text ：文字选择器
• crosshair ：十字架
• wait ：等待
• help ：帮助

举例：

div {
    cursor: pointer;
}

CSS盒子模型

CSS 长度单位

1. px：像素。
2. em：相对元素（即当前元素或父元素） font-size 的倍数。
3. rem：相对根字体大小，html标签就是根。
4. %：相对父元素计算。
5. vw 和 vh 视口的%，10vw即窗口宽度的10%

注意：CSS中设置长度，必须加单位，否则样式无效！

元素的显示模式

块元素(block)

特点

1. 在页面中独占一行，不会与任何元素共用一行
2. 默认宽度： 撑满父元素
3. 默认高度： 由内容撑开
4. 可以通过css设置宽高

块元素常见有哪些

1. 主体结构标签： html body
2. 排版标签： h1~`h6 ,hr ,p,pre,div`
3. 列表标签： ul, ol,li,dl,dt,dd
4. 表格相关标签： table,tbody,thead, tfoot,tr,caption
5. form与option

行内元素（inline）

特点

1. 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续排列
2. 默认宽度： 由内容撑开
3. 默认高度： 由内容撑开
4. 无法通过css设置宽高

行内元素常见有哪些

1. 文本标签： br,em,strong,sup,sub,del,ins
2. a与label

行内块元素 (inline-block)

特点：

1. 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续排列
2. 默认宽度： 由内容撑开
3. 默认高度： 由内容撑开
4. 可以通过css设置狂高

行内块元素常见有哪些？

1. 图片： img
2. 单元格：td,th
3. 表单控件： input,textarea,select,button
4. 框架标签： iframe

修改元素的显示模式

通过修改css中的display的属性可以修改元素的默认显示模式

值	描述
none	隐藏
block	块级元素
inline	内联元素
inline-block	行内块元素

盒子模型

css会把所有的html元素堪称一个盒子，所有的样式都是基于这个盒子

1. **margin(外边距)**： 盒子与外界的距离
2. **border(边框)**： 盒子的边框
3. padding（内边距）： 紧贴内容的补白区域
4. content（内容）：元素中的文本或者后代元素都是它的内容

图示如下：

盒子的大小 = content + 左右padding + 左右border

外边距margin不会影响盒子的大小，但会影响盒子的位置

盒子内容区(content)

css属性	功能
width	内容区宽度
max-width	内容区最大宽度
min-width	内容区最小宽度
height	内容去高度
max-height	内容区最大高度
min-height	内容区最小高度

注意：

max-width,min-width一般不与width一起使用

max-height,min-height一般不与height一起使用

默认宽度就是不设置width属性时，元素呈现的宽度

总宽度 = 父的content - 自身的左右margin

内容区的宽度 = 父的content - 自身的左右margin - 自身的左右border - 自身的左右padding

盒子内边距(padding)

css属性	功能
padding-top	上内边距
padding-right	右内边距
padding-bottom	下内边距
padding-left	左内边距
padding	复合属性

padding复合属性的使用规则：

1. padding: 10px; 四个方向内边距都是10px
2. padding:10px 20px; 上下10px 左右20px
3. padding:10px 20px 30px; 上10px 左右20px 下30px
4. padding:10px 20px 30px 40px; 上10px 右20px 下30px 左40px

盒子边框(border)

border 属性在 CSS 中用于定义元素边框的样式、宽度和颜色。可以为各个方向的边框单独设置，也可以使用简写属性同时设置四个方向的边框。

border-style

• 用于定义边框线的样式。
• 可以为四个方向统一设置，也可以分别设置。
• 常见的属性值：
  • none – 无边框（默认值）。
  • solid – 实线。
  • dashed – 虚线。
  • dotted – 点线。
  • double – 双实线。

border-width

• 指定边框的宽度。
• 可以统一设置四个方向的宽度，也可以分别设置。
• 默认值通常为 medium，也可以使用长度单位如 px、em、% 等。

border-color

• 指定边框的颜色。
• 可以为四个方向统一设置颜色，也可以分别设置。
• 默认颜色通常为黑色。

**border **

• 将 border-width、border-style 和 border-color 合并到一行中。
• 语法：border: <宽度> <样式> <颜色>;
• 示例：border: 2px solid red;
• 该简写属性的值顺序灵活，但必须至少包含一个样式值。

属性名称	功能	属性值
border-style	设置边框线风格	none，solid，dashed，dotted，double
border-width	设置边框宽度	长度单位（px, em, %），默认 medium
border-color	设置边框颜色	颜色值，默认 black
border	边框简写属性	<宽度> <样式> <颜色>
border-top	设置上边框	包含 style，width，color
border-right	设置右边框	包含 style，width，color
border-bottom	设置下边框	包含 style，width，color
border-left	设置左边框	包含 style，width，color
border-top-style	上边框线风格	与 border-style 相同
border-right-style	右边框线风格	与 border-style 相同
border-bottom-style	下边框线风格	与 border-style 相同
border-left-style	左边框线风格	与 border-style 相同
border-top-width	上边框宽度	与 border-width 相同
border-right-width	右边框宽度	与 border-width 相同
border-bottom-width	下边框宽度	与 border-width 相同
border-left-width	左边框宽度	与 border-width 相同
border-top-color	上边框颜色	与 border-color 相同
border-right-color	右边框颜色	与 border-color 相同
border-bottom-color	下边框颜色	与 border-color 相同
border-left-color	左边框颜色	与 border-color 相同

盒子外边距(margin)

CSS属性名	功能	属性值
margin-left	左外边距	CSS中的长度值
margin-right	右外边距	CSS中的长度值
margin-top	上外边距	CSS中的长度值
margin-bottom	下外边距	CSS中的长度值
margin	复合属性，可以写1-4个值，规律同padding	CSS中的长度值

margin注意事项

1. 子元素的margin，是参考父元素的content计算的。(因为子元素出于父元素的content中)
2. margin-left, margin-top影响自己的位置；margin-bottom,margin-right：影响后面兄弟的位置
3. block，inline-block，均可以完美设置四个方向的margin；但inline，只能完美设置左右的margin，上下margin无效
4. margin的值可以是auto,如果给一个有宽度的块级元素设置左右margin都为auto，该块级元素会在父元素水平居中
5. margin的值可以是负值

margin塌陷问题

什么是margin塌陷？

第一个元素的margin-top会作用在父元素上，最后一个元素的margin-bottom会作用在父元素上

如何解决

• 方案一： 给父元素设置不为0的padding
• 方案二： 给父元素设置宽度不为0的border
• 方案三： 给父元素设置css样式overflow: hidden

margin合并问题

什么是margin合并

上面兄弟元素的margin-bottom会和下面兄弟元素的margin-top合并，取一个最大的值，而不是相加

如何解决

无需解决，布局时上下兄弟元素，只给一个设置上下外边距即可

处理内容溢出

css属性名	功能	属性值
overflow	溢出内容的处理方式	visible:显示，默认值 hidden:隐藏 scroll: 显示滚动条，不论内容是否溢出 auto:自动显示滚动条，内容不溢出不显示
overflow-x	水平方向溢出内容的处理方式	同overflow
overflow-y	垂直方向溢出内容的处理方式	同overflow

隐藏元素的方式

visibility属性

visibility属性默认值是show，如果设置为hidden，元素会隐藏

元素看不见了，还占有原来的位置

display属性

设置display:none，就可以让元素隐藏

彻底地隐藏

元素继承

如果元素本身没有某个样式，则会继承父元素的样式

会继承的css属性

字体属性、文本属性（除了vertical-align）、文字颜色等

不会继承的css属性

边框，背景，内边距，外边距，宽高，溢出方式等

能继承的属性，往往都是不影响布局的

布局居中的技巧

水平居中

• 若子元素为(有宽度)块元素，给父元素加上： margin: 0 auto
• 若子元素为行内元素、行内块元素，给父元素加上：text-align: center

垂直居中

• 若子元素为块元素，给子元素加上:margintop: (值为：父元素content - 子元素盒子高) / 2
• 若子元素为行内元素，行内块元素，让父元素的height等于父元素的line-height，每个子元素加上vertical-align: middle

行内（块）元素之间的空白问题

问题1

行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。

解决方案：

给父元素设置font-size: 0，再给需要显示文字的元素，单独设置字体大小

问题2

行内块元素默认与文本的基线对齐，而文本的基线与文本最底端有一定距离

解决方案：

1. 行内块元素设置vertical-align，值不为baseline即可
2. 给父元素设置font-size: 0。如果行内块内部还有文本，则需单独设置font-size

浮动

元素浮动后的特点

1. 脱离文档流
2. 无论浮动前，元素的显示模式是什么，浮动后，默认内容由宽高撑开，且可以设置宽高
3. 不会独占一行，可以与其他元素共用一行
4. 不会出现margin合并和margin塌陷问题，能够有效设置margin和padding
5. 不会像行内（块）元素一样被当作文本处理（没有行内块的空白问题）

元素浮动产生的影响

对兄弟元素的影响：后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面，对前面的兄弟无影响

对父元素的影响：不能撑起父元素的高度，导致父元素高度塌陷，但父元素的宽度依然束缚浮动的元素

解决浮动产生的影响（清除浮动）

• 方案1：所有浮动元素后面添加块级元素，并为该块级元素设置clear: both

• 方案2： 给浮动元素的父元素设置伪元素，通过伪元素清除浮动，原理与1相同

  .father::after {
      content: '';
      display: block;
      clear: both
  }

布局规则，父元素中的元素要么全部浮动，要么全部不浮动

浮动相关属性

CSS属性	功能	属性值
float	设置浮动	left:设置左浮动 right: 设置右浮动 none: 不浮动，默认值
clear	清除浮动，清楚前面兄弟元素浮动元素的响应	left: 清除前面左浮动的影响 right: 清除前面右浮动的影响 both: 清楚前面左右浮动的影响

定位

相对定位

如何设置相对定位？

• 给元素设置position: relative

• 可以使用left,right,top,bottom四个属性调整位置

  left: 20px距离参考点左端20px （即向右移动20px）

  left: -20px距离参考点左端-20px （即向左移动20px）

  right: 20px 距离参考点右端20px （即向左移动20px）

  right: -20px 距离参考点右端-20px (即向右移动20px)

相对定位的参考点在哪里？

• 相对自己原来的位置

相对定位的特点：

1. 不脱离文档流

2. 有定位属性的元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的

   默认规则是：

   • 有定位属性的元素会盖在普通元素之上
   • 都发生定位的两个元素，后写的元素会盖在先写的元素之上

3. left和right不能一起设置，top和bottom不能一起设置

4. 相对定位的元素可以继续设置浮动和margin，但不建议

绝大多数情况下，相对定位会和绝对定位配合使用

绝对定位

设置绝对定位

• 给元素设置position: absolute
• 可以使用left, right, top, bottom四个属性调整位置，用法同相对定位

绝对定位的参考点在哪里？

• 参考该元素的包含块

什么是包含块？

1. 对于没有脱离文档流： 包含块就是父元素
2. 对于脱离文档流的元素： 包含块是第一个拥有定位属性的祖先元素（如果所有祖先都没定位，那包含块就是整个页面）

绝对定位元素的特点：

1. 脱离文档流，会对后面的兄弟元素、父元素有影响
2. left不能和right一起设置，top不能和bottom一起设置
3. 绝对定位、浮动不能一起设置，如果同时设置，浮动失效，以定位为主
4. 绝对定位的元素，也能通过margin调整位置，但不推荐
5. 无论什么类型的元素(行内、行内块、块级) 设置为绝对定位之后，都变成了定位元素

何为定位元素？ –默认宽高被内容撑开，且能自由设置宽高

固定定位

如何设置固定定位

• 给元素设置position: fixed
• 可以使用left，right,top,bottom

固定定位的参考点在哪里

• 参考它的视口

什么是视口？ ——对于pc浏览器而言，即浏览器窗口

固定定位元素的特点

1. 脱离文档流，对之后的父亲兄弟元素有影响
2. left不能和right一起设置，top和bottom不能一起设置
3. 固定定位和浮动不能一起设置，一起设置后浮动失效，以固定定位为主
4. 固定定位的元素，也能通过margin调整设置，不推荐
5. 固定定位后的元素会变成定位元素

粘性定位

如何设置为粘性定位？

• 给元素设置position: sticky即可粘性定位
• 可以使用left,right,top,bottom四个属性调整位置，不过最常用的是top值

粘性定位的参考点在哪里？

• 离它最近的一个拥有”滚动机制”的祖先元素

粘性定位元素特点

• 不脱离文档流，专门用于滚动窗口时的新的定位方式
• 最常用的值是top
• 粘性定位和浮动可以同时设置，但不推荐
• 粘性定位和margin可以同时设置，但不推荐

定位层级

1. 具有定位属性的元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的
2. 如果发生重叠，后面的元素会显示在前面元素上
3. 可以通过css属性z-index调整元素的层级
4. z-index的属性是数字，没有单位，值越大显示层级越高
5. 只有定位的元素设置z-index才有效
6. 如果z-index值大的元素，依然没有覆盖掉z-index小的元素，可能是因为其包含块的层级问题

定位的特殊应用

注意：

1. 发生固定定位、绝对定位后，元素变成了定位元素，默认宽高被内容撑开，且依然可以设置宽高
2. 发生相对定位后，元素依然是之前的显示模式
3. 以下所说的特殊应用，只针对绝对定位和固定定位的元素

让定位元素充满包含块

1. 块宽想与包含块一致，可以给定位元素设置left和right为0
2. 高度想与包含块一致，top和bottom设置为0

让定位元素在包含块中居中

• 方案一

  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;

• 方案二

  left: 50%;
  top: 50%;
  margin-left: 负的宽度一半;
  margin-top: 负的高度一半;

注意： 该定位的元素必须设置宽高

HTML5

新增语义化标签

布局标签

标签名	语义	单/双标签
header	整个页面，或部分区域的头部	双
footer	整个页面，或部分区域的底部	双
nav	导航	双
article	文章、帖子、杂志、新闻、博客、评论等	双
section	页面中的某段文字，或文章中的某段文字（里面文字通常会包含标题）	双
aside	侧边栏	双

关于article和section

1. article里面可以有多个section。
2. section强调的是分段或分块，如果你想将一块内容分成几段的时候，可使用section元 素。
3. article比section更强调独立性，一块内容如果比较独立、比较完整，应该使用 article元素

状态标签

meter 标签

语义：定义已知范围内的标量测量。也被称为 gauge（尺度），双标签，例如：电量、磁盘用量等。

属性值描述：

• high：数值规定高值
• low：数值规定低值
• max：数值规定最大值
• min：数值规定最小值
• optimum：数值规定最优值
• value：数值规定当前值

常用属性如下：

属性	值	描述
high	数值	规定高值
low	数值	规定低值
max	数值	规定最大值
min	数值	规定最小值
optimum	数值	规定最优值
value	数值	规定当前值

progress 标签

语义：显示某个任务完成的进度的指示器，一般用于表示进度条，双标签，例如：工作完成进度等。

常用属性如下：

属性	值	描述
max	数值	规定目标值
value	数值	规定当前进度

列表标签

标签名	语义	单/双标签
datalist	用于搜索框的关键字提示	双
details	用于展示问题和答案，或对专有名词进行解释	双
summary	写在 details 的里面，用于指定问题或专有名词	双

datalist 示例：

<input type="text" list="mydata">
<datalist id="mydata">
  <option value="周冬雨">周冬雨</option>
  <option value="周杰伦">周杰伦</option>
  <option value="温兆伦">温兆伦</option>
  <option value="马冬梅">马冬梅</option>
</datalist>

details 和 summary 示例：

<details>
  <summary>如何走上人生巅峰？</summary>
  <p>一步一步走呗</p>
</details>

文本标签

文本注音

标签名	语义	单/双标签
ruby	包裹需要注音的文字	双
rt	写注音，rt 标签写在 ruby 的里面	双

示例代码：

<ruby>
  <span>魑魅魍魉</span>
  <rt>chī mèi wǎng liǎng</rt>
</ruby>

文本标记

标签名	语义	单/双标签
mark	标记	双

注意：W3C 建议 mark 用于标记搜索结果中的关键字。

新增表单功能

表单控件新增属性

属性名	功能
placeholder	提示文字（不是默认值value）,适用于文字输入类的表单控件
required	表示该输入项必填，适用于除按钮外其他表单控件
autofocus	自动获取表单焦点，适用于所有控件。设置多个时生效第一个
autocomplete	自动补全，可设置为on和off，适用于文字输入类的表单控件 密码输入框，多行输入框不可用
pattern	填写正则表达式，适用于于文本输入类表单控件 多行输入框不可用；输入空不验证，需与required配合

input 新增属性值

属性名	功能描述
email	邮箱类型的输入框，表单提交时会验证格式，输入为空则不验证格式。
url	URL 类型的输入框，表单提交时会验证格式，输入为空则不验证格式。
number	数字类型的输入框，表单提交时会验证格式，输入为空则不验证格式。
search	搜索类型的输入框，表单提交时不会验证格式。
tel	电话类型的输入框，表单提交时不会验证格式，在移动端使用时，会唤起数字键盘。
range	范围选择框，默认值为 50，表单提交时不会验证格式。
color	颜色选择框，默认值为黑色，表单提交时不会验证格式。
date	日期选择框，默认值为空，表单提交时不会验证格式。
month	月份选择框，默认值为空，表单提交时不会验证格式。
week	周选择框，默认值为空，表单提交时不会验证格式。
time	时间选择框，默认值为空，表单提交时不会验证格式。
datetime-local	日期 + 时间选择框，默认值为空，表单提交时不会验证格式。

新增多媒体标签

视频标签

<video>用来定义视频

属性值	描述
src	URL 地址，视频地址
width	像素值，设置视频播放器的宽度
height	像素值，设置视频播放器的高度
controls	向用户显示视频控件（比如播放/暂停按钮）
muted	视频静音
autoplay	视频自动播放
loop	循环播放
poster	URL 地址，视频封面
preload	预加载选项，auto / metadata / none。 视频预加载，如果使用 autoplay，则忽略该属性。

音频标签

<audio>用来定义音频

属性值	描述
src	URL 地址，音频地址
controls	向用户显示音频控件（比如播放/暂停按钮）
autoplay	音频自动播放
muted	音频静音
loop	循环播放
preload	预加载选项，auto / metadata / none。 音频预加载，如果使用 autoplay，则忽略该属性。
none	不预加载音频。
metadata	仅预先获取音频的元数据（例如长度）。
auto	可以下载整个音频文件，即使用户不希望使用它。

HTML5 兼容性处理

• 添加元信息，让浏览器处于最优渲染模式。

<!-- 设置IE总是使用最新的文档模式进行渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!-- 优先使用 webkit (Chromium) 内核进行渲染，针对360等壳浏览器 -->
<meta name="renderer" content="webkit">

使用 html5shiv 让低版本浏览器认识 H5 的语义化标签。

• 使用 html5shiv 让低版本浏览器认识 HTML5 的语义化标签。

<!--[if lt IE 9]>
  <script src="../sources/js/html5shiv.js"></script>
<![endif]-->

扩展条件注释符号：

• lt 小于
• lte 小于等于
• gt 大于
• gte 大于等于
• ! 逻辑非

CSS3

私有前缀

• W3C新提出的CSS特性，在被浏览器正式支持前，需要用浏览器的私有前缀来测试，正式支持后则不需要

• 查询CSS3兼容性的网站 [caniuse](Can I use… Support tables for HTML5, CSS3, etc)

• 举例

  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
   border-radius: 20px;
  
  Chrome 浏览器：-webkit
  Safari 浏览器： -webkit
  Firefox 浏览器：-moz
  Edge 浏览器：-webkit
  旧 Opera 浏览器：-o
  旧 IE 浏览器：-ms-

新增盒模型相关属性

box-sizing 怪异盒模型

可选值	含义
content-box	width与height设置的是盒子内容区的大小 （默认值）
border-box	width与height设置的是盒子的总大小 （怪异盒模型）

resize用户调整元素大小

resize属性控制是否允许用户调节元素尺寸

值	含义
none	不允许用户调整元素大小。（默认）
both	用户可以调节元素的宽度和高度。
horizontal	用户可以调节元素的宽度。
vertical	用户可以调节元素的高度。

box-shadow盒子阴影

• 使用box-shadow属性为盒子添加阴影
• 语法

box-shadow: h-shadow v-shadow blur spread color inset;

• 各个值的含义

值	含义
h-shadow	水平阴影的位置，必须填写，可以为负值。
v-shadow	垂直阴影的位置，必须填写，可以为负值。
blur	可选，模糊距离。
spread	可选，阴影的外延值。
color	可选，阴影的颜色。
inset	可选，将外部阴影改为内部阴影。
none	默认值，表示没有阴影。

• 示例

  /* 写两个值，含义：水平位置、垂直位置 */
  box-shadow: 10px 10px;
  
  /* 写三个值，含义：水平位置、垂直位置、颜色 */
  box-shadow: 10px 10px red;
  
  /* 写三个值，含义：水平位置、垂直位置、模糊值 */
  box-shadow: 10px 10px 10px;
  
  /* 写四个值，含义：水平位置、垂直位置、模糊值、颜色 */
  box-shadow: 10px 10px 10px red;
  
  /* 写五个值，含义：水平位置、垂直位置、模糊值、外延值、颜色 */
  box-shadow: 10px 10px 10px 10px blue;
  
  /* 写六个值，含义：水平位置、垂直位置、模糊值、外延值、颜色、内阴影 */
  box-shadow: 10px 10px 20px 3px blue inset;

opacity不透明度

• opacity属性能为整个元素添加透明效果，值是0到1之间的小数，0完全透明，1完全不透明

opacity与rgba的区别

opacity是一个属性，设置的是整个元素的不透明度

rgba是颜色设置方式，用于设置颜色，它的透明度，仅仅是调整颜色的透明度

新增背景属性

background-origin

• 作用：设置背景图原点

• 语法：

1. padding-box:从padding区域开始显示背景图像 –默认值
2. border-box:从border区域开始显示背景图像。
3. content-box：从content区域开始显示背景图像

background-clip

• 作用： 设置背景图的向外裁剪的区域
• 语法
  1. padding-box:超出padding区域不再显示背景图像 –默认值、
  2. border-box:超出border区域不再显示背景图像。
  3. content-box：超出content区域不再显示背景图像
  4. text ：背景图只呈现在文字上，文字得是透明的

background-size

• 作用： 设置背景图的尺寸

• 语法：

  1. 用长度指定背景图片的大小

     background-size: 300px 200px;

  2. 用百分比指定背景图片的大小

     background-size: 100% 100%

  3. auto背景图片的真实大小。 ——默认值

  4. contain 等比缩放，可能会造成元素内部分区域没有背景图片

  5. cover 等比缩放，背景图片显示可能不完整 ——用的相对较多

多背景图

/* 添加多个背景图 */
 background: url(../images/bg-lt.png) no-repeat, 
url(../images/bg-rt.png) no-repeat right top,
 url(../images/bg-lb.png) no-repeat left bottom,
 url(../images/bg-rb.png) no-repeat right bottom;

新增边框属性

边框圆角

• 在CSS3中，使用border-radius属性可以将盒子变为圆角

• 设置圆角

  border-radius：10px

新增文本属性

文本阴影

语法

text-shadow: h-shadow v-shadow blur color;

属性	是否必需	描述	允许负值
h-shadow	必需	水平阴影的位置	是
v-shadow	必需	垂直阴影的位置	是
blur	可选	模糊的距离	否
color	可选	阴影的颜色	否

文本换行white-space

属性	含义
normal	文本超出边界自动换行，文本中的换行被浏览器识别为一个空格。（默认值）
pre	原样输出，与 pre 标签的效果相同。
pre-wrap	在 pre 效果的基础上，超出元素边界自动换行。
pre-line	在 pre 效果的基础上，超出元素边界自动换行，且只识别文本中的换行，空格会忽略。
nowrap	强制不换行

文本溢出

• text-overflow属性设置文本内容溢出时的呈现方式

• 常用值如下：

  属性	含义
  clip	当内联内容溢出时，将溢出部分裁切掉。（默认值）
  ellipsis	当内联内容溢出块容器时，将溢出部分替换为 ...。

注意：要使得 text-overflow 属性生效，块容器必须显式定义 overflow 为非 visible 值， white-space 为nowrap 值。

新增渐变

线性渐变（Linear Gradient）

线性渐变是CSS3的一种效果，它允许你在元素的背景中创建由一种颜色逐渐过渡到另一种颜色的效果，而不需要使用图像。你可以定义渐变的方向、起点颜色、终点颜色，以及中间的颜色过渡。

基本语法

background: linear-gradient(direction, color-stop1, color-stop2, ...);

direction：指定渐变的方向，可以是角度（如 45deg）、关键词（如 to right）等。

color-stop1, color-stop2, ...：渐变过程中使用的颜色，可以指定多个颜色值。你还可以为每个颜色值设置一个百分比，表示颜色出现在渐变的某个点。

示例

基本渐变：从红色到蓝色
background: linear-gradient(red, blue);
指定方向：从左到右
background: linear-gradient(to right, red, blue);
多种颜色渐变
background: linear-gradient(to right, red, yellow, green);
带百分比的颜色过渡
background: linear-gradient(to right, red 10%, yellow 50%, green 90%);
使用角度定义方向
background: linear-gradient(45deg, red, blue);

径向渐变（Radial Gradient）

径向渐变是从中心点向四周扩展的颜色渐变，通常以圆形或椭圆形的方式扩展。

语法

background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);

shape：渐变的形状（默认 ellipse）。

size：渐变的大小，可以是 closest-side、farthest-corner 等。

position：渐变的中心位置（默认 center）。

color-stop1, color-stop2：定义渐变颜色。

示例

/* 默认从中心开始的圆形径向渐变 */
background: radial-gradient(circle, red, blue);

/* 从左上角开始的椭圆形渐变 */
background: radial-gradient(ellipse at top left, red, yellow, green);

重复渐变（Repeating Gradient）

重复渐变可以让颜色以特定的模式重复，这适用于线性和径向渐变。

线性重复渐变语法：
background: repeating-linear-gradient(direction, color-stop1, color-stop2, ...);
示例：
background: repeating-linear-gradient(to right, red 0%, yellow 10%, green 20%);
径向重复渐变语法
background: repeating-radial-gradient(shape size at position, color-stop1, color-stop2, ...);
示例：
background: repeating-radial-gradient(circle, red, yellow 10%, blue 20%);

2D变换

二维坐标系如下图所示

2D位移

2D 位移可以改变元素的位置，具体使用方式如下：

1. 先给元素添加 transform 属性
2. 可选值及其含义

• translateX：设置水平方向位移，需指定长度值；若指定的是百分比，参考的是自身宽度的百分比。
• translateY：设置垂直方向位移，需指定长度值；若指定的是百分比，参考的是自身高度的百分比。
• translate：一个值代表水平方向，两个值代表水平和垂直方向。

1. 位移与相对定位很相似，都不脱离文档流，也不影响到其他元素

2. 与相对定位的区别： 相对定位的百分比值，参考的是父元素；位移的百分比值，参考的是自身

3. 浏览器对位移有优化，与定位相比，浏览器处理位移效率更高

4. transform可以链式编写，例如transform: translateX(30px) translateY(40px);

5. 位移对行内元素无效

6. 位移配合定位实现元素水平垂直居中

   .box {
       position: absolute;
       left: 50%;
       right: 50%;
       transform: translate(-50%, -50%)
   }

2D缩放

2D缩放可以让元素放大或缩小，具体使用方式如下：

1. 先给元素添加 transform 属性

2. 可选值及其含义：

   scaleX： 水平方向的缩放比例，值为数字，1不变，小于1缩小，大于1放大

   scaleY： 垂直方向的缩放比例，同上

   scale： 水平垂直同时缩放

2D旋转

具体使用方式：

1. 添加属性transform

2. 可选值及其含义

   rotate: 设置旋转角度，需指定一个角度值（deg），正顺时针，负逆时针

多重变换

实现多种变换，放到同一个transform里

transform: translate(-50%, -50%) rotate(45deg);

建议最后写旋转，因为旋转会导致坐标系的变化

变换原点

• 原点变换时，默认原点是元素的中心，使用transform-origin可以设置变换的原点
• 修改变换原点对位移没有影响，但对旋转和缩放会有影响
• 提供两个值，则第一个横坐标，第二个纵坐标

1. transform-origin: 50% 50%，变换原点在元素的中心位置，百分比是相对于自身的。—— 默认值

2. transform-origin: left top，变换原点在元素的左上角。

3. transform-origin: 50px 50px，变换原点距离元素左上角 50px。

4. transform-origin: 0，只写一个值的时候，第二个值默认为 50% 的位置。

3D变换

开启3D空间

元素要进行3D变换，父元素必须开启3D空间

使用transform-style开启3D空间，可选值如下：

• flat:2D
• preserve-3d：3D

设置景深

景深–观察者与z=0平面的距离，有透视效果，更立体

使用perspective设置景深，可选值如下：

• none:不指定透视——（默认值）
• 长度值：指定观察者距离z=0平面的距离，不允许负值

景深也是设置给3D变换元素的父元素

透视点位置

（通常不改）所谓透视点位置，就是观察者的位置，默认透视点为元素中心

使用perspective-origin设置观察者位置

3D位移

3D位移是在2D位移的基础上，让元素能够沿z轴位移，元素会离屏幕越来越近，越来越大

1. 属性transform
2. 值
   • translateZ 设置z轴位移，只能写像素，不能写%
   • translate3d，3个参数对应x，y，z轴位移

3D旋转

3D旋转是在2D旋转的基础上，可以让元素沿x轴和y轴旋转，具体使用方式如下：

1. 属性transform
2. 值
   • rotateX:按x轴旋转，给定角度
   • rotateY:按y轴旋转，给定角度
   • rotate3d：前三个参数表示x，y，z，第四个表示旋转的角度

3D缩放

3D缩放是在2D缩放的基础上，可以让元素沿z轴缩放

1. 属性transform
2. 值
   • scaleZ,其实是在改景深，1表示不缩放，大于1表示放大，即景深除该数字，小于1表示缩小,scaleZ一般不用
   • scale3d，三个参数分别对应x，y，z，参数不能省略

背部可见性

使用backface-visibility指定元素背面，在面向用户时是否可见，常用值如下

• visible:指定元素背面可见
• hidden:指定元素背面不可见

过渡

transition-property

定义哪个属性需要过渡，例如宽、高、颜色

值：

• none不过渡
• all过渡所有能过渡的
• 具体某个属性，用逗号分割

transition-duration

设置过渡的持续时间

单位s或ms

transition-delay

开始过渡的延迟时间

单位s或ms

transition-timing-function

设置过渡的类型

值：

1. ease:平滑过渡
2. linear:线性过渡

transition复合属性

如果设置了一个时间，则是duration,两个时间，则是duration delay 其他值无顺序要求

transition:1s 1s linear all;

动画

动画的基本使用

1. 第一步 ：定义关键帧

   简单方式

   @keyframes 动画名 {
       from {
           /*property1:value1*/
    		/*property2:value2*/
       }
       to {
           /*property1:value1*/
       }
   }

   完整定义方式

   @keyframes 动画名 {
        0% {
        /*property1:value1*/
        }
        20% {
        /*property1:value1*/
        }
        40% {
        /*property1:value1*/
        }
        60% {
        /*property1:value1*/
        }
        80% {
        /*property1:value1*/
        }
        100% {
        /*property1:value1*/
        }
    }

2. 给元素应用动画

   • animation-name:给定具体动画名

   • animation-duration:动画所需时间

   • animation-delay:动画延迟

     .box {
     	/* 指定动画 */
          animation-name: testKey;
          /* 设置动画所需时间 */
          animation-duration: 5s;
          /* 设置动画延迟 */
          animation-delay: 0.5s; 
     }

动画的其他属性

• animation-timing-function,设置动画类型，常用值如ease,linear

• animation-iteration-count指定动画播放次数，常用值如具体的数字或者无限循环infinite

• animation-direction,指定动画的方向，常用值如下

  1. normal:正常方向（默认）
  2. reverse:反方向运行
  3. alternate:动画先正常运行再反方向运行，交替
  4. alternate-reverse:先反再正，交替

• animation-fill-mode，设置动画之外的状态

  1. forwards:保持在动画结束时
  2. backwards:保持在动画开始时

• animation-play-state，设置动画的播放状态，常用值如下

  1. running:运动
  2. paused: 暂停

• animation，复合属性，只设置一个时间则表示duration，两个时间则分别表示duration和delay，其他属性没有数量和顺序要求

  .inner {
       animation: atguigu 3s 0.5s linear 2 alternate-reverse forwards;
   }

过渡和动画的区别

特性	过渡（transition）	动画（animation）
触发方式	需要事件触发，例如 hover	无需触发，可自动播放
复杂度	简单变化，只支持起点和终点	复杂变化，可设置多个关键帧
循环性	仅在状态切换时运行一次	支持循环播放
定义方式	基于 CSS 属性，直接定义	需结合 @keyframes 定义动画阶段

多列布局

作用：专门用于实现类似报纸的布局，多列布局也可以用来放图片

• column-count:指定列数

• column-width：指定列宽

• columns：同时指定列宽和列数

• column-gap：列边距

• column-rule-style：列的边框风格

• column-rule-width: 列的宽度

• column-rule-color: 列的颜色

• column-rule:列边框，复合属性

• column-span:是否跨列，none或者all

伸缩盒模型

伸缩容器、伸缩项目

• 伸缩容器： 开启了flex的元素，就是：伸缩容器

  给元素设置flex、inline-flex,该元素就变为了伸缩容器。

• 伸缩项目：伸缩容器所有子元素自动成为 伸缩项目

  1. 仅伸缩容器的子元素是伸缩项目，其孙子元素及其他后代不是伸缩项目。
  2. 无论原来是哪种元素（块、行内块、行内），伸缩项目都会使其成为块元素

主轴与侧轴

主轴：伸缩项目沿主轴排列，默认是从左到右

侧轴（交叉轴）：与主轴垂直的就是侧轴，默认从上到下

主轴方向

属性名：flex-direction

常用值：

• row 从左到右（默认值）
• row-reverse 从右到左
• column 从上到下
• column-reverse从下到上

主轴换行方式

属性名：flex-wrap

常用值：

• nowrap:默认值，不换行

• wrap:自动换行

  123456

  789

• wrap-reverse

  789

  123456

flex-flow

复合属性，复合了flex-direction和flex-wrap，值没有顺序要求

flex-flow:row wrap;

主轴对齐方式

属性名：justify-content

常用值：

• flex-start:主轴起点对齐。（默认值）
• flex-end：主轴终点对齐。
• center:居中对齐。
• space-between:均匀分布，两端对齐，与边框没有距离，元素距离相等
• space-around: 元素与元素之间的距离是元素与边框距离两倍
• space-evenly:元素与元素之间的距离与元素与边框距离相等

侧轴对齐方式

一行的情况

属性名：align-items

常用值：

1. flex-start:侧轴的起点对齐
2. flex-end:侧轴的终点对齐
3. center:侧轴的中点对齐
4. baseline：第一行文字的基线对齐
5. stretch:未设置高度时，占满整个容器

多行的情况

属性名：align-content

常用值:

1. flex-start
2. flex-end
3. center
4. space-between
5. space-around
6. space-evenly
7. stretch

flex实现水平垂直居中

方法一：父容器开启flex布局，使用justify-content和align-items实现水平垂直居中

方法二：父容器开启flex布局，随后子元素 margin:auto

伸缩性

1. flex-basis

   主轴的基准长度，会让元素的宽度或高度失效

   主轴横向，宽度失效，主轴纵向，高度失效

   默认值auto

2. flex-grow

   定义伸缩项目的放大比例，默认是0，即：主轴存在剩余空间也不放大

   规则

   1. 若所有伸缩项目的 flex-grow 值都为1，则：它们将等分剩余空间（如果有空间的话）。
   2. 若三个伸缩项目的 flex-grow 值分别为：1、2、3，则：分别瓜分到： 1/6 、 2/6、3/6 的空间。

3. flex-shrink

   定义伸缩项目的缩小比例，默认为1，空间不足将会缩小

   收缩后项目的比例为 宽度 * flex-shrink值

flex复合属性

flex是复合属性，复合了：flex-grow、flex-shrink、flex-basis三个属性，默认为0 1 auto

• 如果写flex: 1,实际上是flex:1 1 0即可以放大、可以缩小、同时宽度（默认）平分容器
• flex:auto，实际上是flex:1 1 auto即可以放大、缩小、同时宽度为设置的值
• flex: none,实际上是flex:0 0 auto，不可放大缩小，按设置的宽度来
• flex: 0 auto，实际上是flex0 1 auto 即初始值

项目排序

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0

单独对齐

通过align-self属性，可以单独调整某个伸缩项目的对齐方式（只能调侧轴）

默认值为auto，表示继承父元素的align-items属性。

响应式布局

媒体查询

查媒体类型（分辨正常屏幕和打印机）

• all 检测所有设备
• screen 检测屏幕
• print检测打印机

媒体特性

width视口宽度

min-width视口最小宽度

max-width视口最大宽度

height视口高度

min-height视口最小高度

max-height视口最大高度

device-width设备宽度

max-device-width设备最大宽度

min-device-width设备最小宽度

orientation检测视口的旋转方向

​ portrait纵向 landscape横向

媒体查询的样式放在其他样式后面，以免被覆盖

运算符

and 且

,或or 或

not非

only 肯定

实际开发中的阈值

768 992 1200

用法

<link rel="stylesheet" media="具体的媒体查询" href="mystylesheet.css">

@media screen and (max-width:768px) {
 /*CSS-Code;*/
 }
 @media screen and (min-width:768px) and (max-width:1200px) {
 /*CSS-Code;*/
 }

BFC

BFC是Block Formatting Context(块级格式上下文)，元素的一个独特功能，平时关闭，特定情况下激活，激活能够解决一定问题

能解决什么问题？

1. 元素开启BFC后，其子元素不会再产生margin塌陷问题
2. 元素开启BFC后，自己不会被其他浮动元素所覆盖
3. 元素开启BFC后，子元素浮动，自身高度也不会塌陷

如何开启BFC

• 根元素html
• 浮动元素
• 绝对定位、固定定位的元素
• 行内块元素
• 表格单元格table等元素
• overflow值不为visible
• flex
• 多列容器
• column-span为all
• display的值为flow-root