---

一、HTML

1.1 HTML标签

1.1.1 锚点标签

点击链接时，会迅速定位到界面的某个位置

使用方式：

• 在链接文本的href属性中，设置属性为 #名字 的形式，例如<a href="#hello">内容</a>
• 找到目标标签，里面添加 id属性 = 名字 例如：<h1 id="hello">相关介绍</h1>

2.2.2 表格标签

<table><tr>     表格中的行，必须嵌套在<table>标签当中<td>   表格中的单元格单元格内容</td></tr>
</table>

<!-- <th></th>表头标签，突出重要性，表头中的文字会加粗显示 -->
<table border="1" cellpadding="2px" cellspacing="0" align="center" width="200px"><tr><th>年龄</th> <th>性别</th> <th>名称</th></tr><tr><td>15</td> <td>男</td> <td>张三</td></tr>
</table>

• 表格的相关属性

属性名	属性值	描述
align	left,right,center	表格的对齐方式
border	1或""	表格边框
cellpadding	像素值	单元格与文字边距
cellspacing	像素值	单元格与单元格之间的间隙
width	像素值或百分比	表格宽度

2.2.3 表格结构标签

在表格标签中，使用<thead>标签作为表格的头部区域，<tbody>标签作为表格的主体标签 这样可以更好的表示表格的结构

• 合并单元格

跨行合并:rowspan="合并单元格个数"
跨列合并:colspan="合并单元格个数"

2.2.4 自定义表格标签

<dl>标签用于定义描述列表(Definition List),该标签会与<dt>(Definition Term)与<dd>一起使用(Definition Description)

<dl><dt>名词</dt><dd>解释</dd><dd>解释</dd>
</dl>

2.2.5 表单标签

在HTML中,一个完整的表单通常由表单域,表单控件(表单元素),提示信息3个部分构成

2.2.6 <lable> 标签

<lable>标签为input元素定义标注
<lable>标签用于绑定一个表单元素,当鼠标点击<lable>标签内的文本时,浏览器会自动将焦点转到先选择对一个的表单元素上,增加用户体验

<label for="sex">男</label>
<input type="radio" name="male" id="sex">

二、CSS

2.1 CSS选择器

2.1.1 基础选择器分类

分类	名称	符号	作用	示例
基本选择器	元素选择器	标签名	基于标签名匹配元素	div{ }
	类选择器	.	基于class属性值匹配元素	.center{ }
	ID选择器	#	基于id属性值匹配元素	#username{ }
属性选择器	属性选择器	[]	基于某属性匹配元素	[type]{ }
伪类选择器	伪类选择器	:	用于向某些选择器添加特殊的效果	a : hover{ }
组合选择器	后代选择器	空格	使用空格符号结合两个选择器，基于第一个选择器，匹配第二个选择器的所有后代元素	.top li{ }
	子级选择器	>	使用 > 结合两个选择器，基于第一个选择器，匹配第二个选择器的直接子级元素	.top > li{ }
	同级选择器	~	使用 ~ 结合两个选择器，基于第一个选择器，匹配第二个选择器的所有兄弟元素	.l1 ~ li{ }
	相邻选择器	+	使用 + 结合两个选择器，基于第一个选择器，匹配第二个选择器的相邻兄弟元素	.l1 + li{ }
	通用选择器	*	匹配文档中的所有内容	*{ }

• 并集选择器

并集选择器是通过英文逗号隔开连接而成,任何形式的选择器都可以成为并集选择器的一部分

        p,div,.login li{color: black;}

2.1.2 伪类选择器

• 链接伪类选择器

    a:link {color:#FF0000;}   /* 未访问的链接 */a:visited {color:#00FF00;}  /* 已访问的链接 */a:hover {color:#FF00FF;}    /* 鼠标悬停链接 */a:active {color:#0000FF;}   /* 已选中的链接 */
  

• focus伪类选择器: 一般情况下这个选择器是针对于 <input>标签

2.2 CSS字体属性

1.font-family:设置字体font-family: 'Times New Roman',"Microsoft YaHei UI",serif;(新罗马字体没有则去寻找备用字体)

2.font-size: 设置字体大小font-size: 14px;

3.font-style: 设置字体样式font-style: normal; 常见单位:

4.font-weight: 设置字体粗细font-weight: bolder;加粗:bold是700,不加粗是400,不可加单位

CSS字体的复合写法,必须按照以下顺序

• font-style: normal;font-weight: bolder;font-size: 14px;font-family: “Times New Roman”;
• font: italic bolder 14px "Times New Roman"; 最后两个属性不可删除!

2.3 CSS文本属性

• text-decoration:设置文本装饰线

• text-align文本的对齐方式justify：使文本散布，改变单词之间的间距，以使文本的所有行都具有相同的宽度

• line-height设置每行文本的高度，也就是行距,控制文字与行之间的距离,将行间距大小与字体设置为相同的值,则文本可以占满整个行间距
  如图:

• text-indent: 指定文本的第一行的缩进,通常是段落首行的缩进,例如:text-indent: 2em;

文本常用单位:

• px：像素，文本高度像素绝对数值。
• em：根据当前元素的父元素上设置的字体大小
• rem: 根据HTML元素的字体大小来设置字体的大小

2.4 CSS的元素显示模式

2.4.1 块级元素

独占一行,高度,宽度,内边距,外边距;宽度默认是容器的100%,里面可以放行内元素或块级元素,文字类的元素内部不能使用块级元素,因此<p> 内不能放置块级元素,<h1~h6>内也不可防止块级元素

2.4.2 行级元素

行内元素也被称为内联元素，高宽对他来说是无效的，默认宽度就是内容的宽度，行内元素只能容纳文本与其他行内元素
注意：<a>标签里面可以放块级元素，但是链接里面不能再放链接

2.4.3 行内块元素

<input>、<img>、<td>同时具有块元素与行元素的特点，可以成为行内块元素
默认宽度就是本身内容的宽度。高度，行高，外边距以及内边距都是可以控制的

2.4.4 元素显示模式的转换

        a{display: block;}div{display: inline;}span{display: inline-block;}

2.5 CSS背景

• 基本使用

        div{height: 300px;width: 300px;background-color: transparent;/*同时添加背景图片与背景颜色时，背景图片会压住背景颜色*/background-image: url("../img/ouyangdaishi.jpg");background-repeat: no-repeat;background-size: 50%;}

        body{background-image: url("https://s.syzs.qq.com/syzs_cms/202106/1f7ahdtu50.beckvsqks1.jpeg");background-repeat: no-repeat;background-position:  center top;background-size: 100%;}

2.5.1 背景图片位置

利用background-position:属性可以改变背景图片的位置
background-position: x y; 参数代表是x坐标与y坐标，可以使用方位名词也可以使用精确单位
如果指定了两个方位名词，两个值顺序无关，如果只指定了一个值，则第二个值默认居中对齐

2.5.2 背景图像固定（背景附着）

background-attachment: scroll | fixed
background-attachment属性设置背景图像是否固定或者随着页面其余部分滚动，可制作实差滚动的效果

2.5.3 背景的复合写法

background: transparent url("beckvsqks1.jpeg") no-repeat fixed top;

2.5.4 背景的透明度设置

background: rgba(0,0,0,0.3); 最后一个值alpha参数调节透明度，取值（0~1）之间

2.6 CSS三大特性

2.6.1 层叠性

层叠性的原则：

• 样式冲突，遵循的原则是就近原则
• 样式不冲突就不会层叠

2.6.2 继承性

CSS当中的继承，子标签会继承父标签的某些样式，如文本颜色，字号

• 行高的继承：
  • 行高可以不跟单位
  • 子元素如果没有设置行高，则会继承父元素的行高

2.6.3 优先级

• 选择器的权重(权重的叠加不会产生进位)

选择器	选择器权重
继承 或者 *	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式style=""	1,0,0,0
!important	∞

2.7 盒子模型

• 盒子模型就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
• 盒子模型由元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。
• 盒子里面的文字和图片等元素是 内容区域
• 盒子的厚度 我们称为为盒子的边框
• 盒子内容与边框的距离是内边距
• 盒子与盒子之间的距离是外边距

2.7.1 盒子边框

• border-width 定义边框粗细，单位是px
• border-style 边框的样式
• border-color 边框颜色

• 在不需要四个边框的时候，也可以单独为盒子指定边框，例如：border-bottom-style:样式;border-right-width:宽度;

2.7.2 表格的细线边框

• 通过表格的cellspacing=“0”,将单元格与单元格之间的距离设置为0
• 但是两个单元格之间的边框会出现重叠，从而使边框变粗
• 通过css属性：table{ border-collapse:collapse; }

2.7.3 内边距(padding)

 padding-left    左内边距padding-right   右内边距padding-top     上内边距padding-bottom  下内边距

注意：

• 给盒子指定padding值之后,内容和边框 有了距离，添加了内边距
• padding会影响盒子的大小，解决方式通常是改变盒子的weight/height
• padding不影响盒子大小情况：如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子

2.7.4 外边距（margin）

 margin-left     左外边距margin-right    右外边距margin-top      上外边距margin-bottom   下外边距

margin值的简写 （复合写法）代表意思 跟 padding 完全相同。

1. 将块级盒子水平居中

盒子必须指定宽度（width）
左右的外边距都设置为auto

.abao  { width: 800px; margin: 0 auto;}

1. 文字居中和盒子居中区别

盒子内的文字水平居中是 text-align: center; 而且还可以让行内元素和行内块居中对齐
块级盒子水平居中 左右margin 改为 auto

1. 插入图片和背景图片区别

插入图片移动位置只能靠盒模型 padding margin
我们一般用于小图标背景或者超大背景图片、背景图片，移动位置只能通过 background-position

1. 清除元素的默认内外边距

行内元素为了照顾兼容性,尽量只设置左右内外边距，不要设置上下内外边距

* {padding:0;         /* 清除内边距 */margin:0;          /* 清除外边距 */
}

2.7.5 外边距合并

使用margin定义块元素的「垂直外边距」时，可能会出现外边距的合并

1.嵌套块级元素垂直外边距的塌陷

对于两个嵌套关系的块元素（父子关系），如果父元素有上外边距同时子元素也有上外边距，此时父元素回他先较大的外边距值

解决方案：

• 可以为父元素定义上边框
• 可以为父元素定义上内边距
• 可以为父元素添加overflow: hidden

2.相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和,而是取两个值中的较大者，这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）

3.PS的相关用法

2.7.6 CSS3新增圆角边框

 border-top-left-radius          定义了左上角的弧度border-top-right-radius        定义了右上角的弧度border-bottom-right-radius     定义了右下角的弧度border-bottom-left-radius          定义了左下角的弧度

• radius半径的原理：（椭）圆与边框的交际形成圆角效果
  
• 复合写法

border-radius: 左上角 右上角  右下角  左下角;

• 圆

border-radius: 50%;

2.7.7 盒子阴影

值	描述
h-shadow	阴影的水平偏移量。正数向右偏移，负数向左偏移
v-shadow	阴影的垂直偏移量。正数向下偏移，负数向上偏移
blur	可选。阴影模糊距离，不能取负数
spread	可选。阴影大小
color	可选。阴影的颜色
inset	可选。表示添加内阴影，默认为外阴影

div {width: 200px;height: 200px;/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  *//* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影； */box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);
}

2.7.7 文字阴影

值	描述
h-shadow	必须，阴影的水平偏移量。允许负值
v-shadow	必须，阴影的垂直偏移量。允许负值
blur	可选。阴影模糊距离
color	可选。阴影的颜色

div{text-shadow: 2px 2px 2px rgba(0,0,0,.4);}

2.8 CSS浮动

CSS 提供了3种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位
1.让多个盒子(div)水平排列成一行，使得浮动称为布局的重要手段。
2.可以实现盒子的左右对齐等等。
3.浮动最早是用来控制图片，实现文字环绕图片效果。
4.float属性会改变元素的display属性，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身 是哪种元素。生成的块级框和我们前面的行内块极其相似。

• 普通流（标准流）

块级元素会独占一行，从上向下顺序排列,常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行,常用元素：span、a、i、em

• 浮动

让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示

• 定位

将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效

2.8.1 浮动的使用

• 语法格式：

选择器 { float: 属性值; }

属性值	描述
none	元素不浮动（默认值
left	元素向左浮动
right	元素向右浮动

• 注意： 浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。
  建议如果一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动。防止引起问题

2.8.2 浮动的特性

1.脱标

浮动可以脱离标准流的控制（浮），移动（动）到指定的位置，浮动的盒子不再保留原先的位置

2.如何使浮动再同一行显示

如果多个盒子都设置了浮动。则它们会按照属性值一行内显示并且顶端对齐排列
浮动的盒子是贴靠在一起显示的，如果父级宽度装不下浮动的盒子，那么多出的盒子会另起一行对齐

3.浮动之后具有行内块元素的特性

如果块级元素没有设置宽度，默认宽度和父级一样宽，但是添加浮动以后，它的大小根据内容来决定

4.浮动常常搭配父级元素使用

• 注意：
  • 先用标准流的父级元素排列上下位置，在用子元素在内部利用浮动排列左右位置
  • 浮动的盒子只会影响盒子后面的标准流，不会影响前面的标准流

2.8.3 清除浮动

在网页布局的时候，父级盒子再很多时候不能给定一个高度，但是子盒子浮动又不占有位置，所以会导师父级盒子的高度为0，因此就会影响下面的标准流盒子，

• 清除浮动的本质是清除浮动元素所造成的影响
• 父盒子原本有高度，则不需要清除浮动
• 清除浮动后，腹肌就会根据浮动的子盒子自动检测高度，腹肌有了高度就不会影响下面的标准流了

语法格式

选择器 { clear: 属性值; }   clear 清除

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

• 清除浮动采取的策略是：闭合浮动

2.8.4 清除浮动的方法

1.额外标签法(隔墙法)

W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，要求这个新的标签必须是块级元素

2.父级添加overflow属性方法

可以给父级添加： overflow为 hidden| auto| scroll 都可以实现。overflow: hidden;

3.父级添加after伪元素

使用after伪元素清除浮动:after 方式为空元素额外标签法的升级版，不影响结构，不会添加新的标签（百度，网易，淘宝等大厂均使用该方法清除浮动）

.clearfix:after {content: "";display: block;height: 0;clear: both;visibility: hidden;}/* IE6、7 专有 */.clearfix {*zoom: 1;}

4.父级添加双伪元素

    .clearfix:before,.clearfix:after {content: "";display: table;}.clearfix:after {clear: both;}

三、CSS进阶

3.1 定位

3.1.1 定位的组成

将盒子「定」在某一个「位」置自由的漂浮在其他盒子(包括标准流和浮动)的上面
标准流在最底层 (海底) ------- 浮动 的盒子 在 中间层 (海面) ------- 定位的盒子 在 最上层 （天空）

• 定位 = 定位模式 + 边偏移
• 定位模式用于指定元素在文档中的定位方式，边偏移则决定了该元素的最终位置

定位模式

值	语义
static	「静态」定位
relative	「相对」定位
absolute	「绝对」定位
fixed	「固定」定位

边偏移

边偏移属性	示例	描述
top	top: 80px	「顶端」偏移量，定义元素相对于其父元素「上边线的距离」
bottom	bottom: 80px	「底部」偏移量，定义元素相对于其父元素「下边线的距离」
left	left: 80px	「左侧」偏移量，定义元素相对于其父元素「左边线的距离」
right	right: 80px	「右侧」偏移量，定义元素相对于其父元素「右边线的距离」

3.1.2 静态定位(static)

静态定位是元素的默认定位方式，无定位的意思。它相当于border里面的none
静态定位在布局时几乎不用

3.1.3 相对定位(relative)

相对于自己原来在标准流中位置来移动的
原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它

.a{float: left;height: 200px;width: 200px;background: pink;position: relative;left: 100px;top: 100px;}

• 他是相对于自己原来的位置移动的
• 原来的标准流的位置继续占有，后面的盒子按照标准流的方式对待（不脱标，继续保持原来的位置）

3.1.4 绝对定位(absolute)

绝对定位是元素以带有定位的父级元素来移动位置
父元素没有定位，则以浏览器为准定位(Document文档)
完全脱表–完全不占位置

.a{position: absolute;left: 100px;top: 100px;}

• 如果祖先元素没有定位或者没有祖先元素，则以浏览器为准
• 如果祖先元素有定位（相对，绝对，固定定位），则以最近一级的祖先元素为参考点移动位置
• 绝对定位脱标

子绝父相：因为父级需要占有位置，因此是相对定位，子盒子如果不需要占有位置，则是绝对定位

3.1.5 固定定位（fixed）

.a{position: fixed;left: 100px;top: 100px;}

• 以浏览器可视窗口为参照点移动元素
• 跟父级元素没有任何关系
• 不随滚动条滚动
• 固定定位也是脱标的，可以将其看作为一种特殊的绝对定位

3.1.6 粘性定位（sticky）

粘性定位可以被认为是相对定位和固定定位的混合

.a{position: sticky;top: 100px;}

• 以浏览器可视窗口为参照点移动元素
• 粘性定位占有原先的位置
• 必须添加top，left，right，bottom其中一个才能生效

3.1.7 定位叠放次序 z-index

使用定位布局时，可能会出现盒子重叠的情况，此时使用z-index来控制盒子的前后次序（z轴）

.a{z-index: 1;position: sticky;}

• 数值可以实正整数，负数或0，数值越大，盒子越靠上
• 如果属性值相同，则按照书写顺序，后来者居上
• 数值后面不能加单位
• 只有定位的盒子才有 z-index

3.1.8 定位的特殊性质

• 绝对定位与固定定位与浮动相似
• 行级元素添加绝对定位或者固定定位，可以直接设置高度和宽度
• 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小时内容的大小
• 浮动元素、绝对定位，固定定位输入脱标的盒子，脱标的盒子不会触发外边距合并的问题

3.1.9 定位的拓展知识

• 绝对定位与固定定位会完全压住盒子
• 浮动元素只会压住下面标准流的盒子，但是不会压住下面标准流盒子的文字
• 浮动不会压住问的原因在于，浮动在开发之初就是为了做文字环绕效果的，文字会围绕浮动元素

3.2 元素的隐藏与显示

3.2.1 display 显示（重点）

• display: none 隐藏对象,隐藏之后，不保留位置
• display: block除了转换为块级元素之外，同时还有显示元素的意思

3.2.2 visibility 可见性

• visibility：visible对象可视
• 对象隐藏对象隐藏，隐藏之后，继续保留原有位置

3.2.3 overflow 溢出

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

3.3 用户界面样式

3.3.1 三角形的制作

div{height: 0;width: 0;border: 50px solid transparent;/*三角形的朝向与边界颜色方向相反*/border-left-color: black;}

3.3.2 鼠标的样式

属性值	描述
default	小白 默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

<ul><li style="cursor:default">我是小白</li><li style="cursor:pointer">我是小手</li><li style="cursor:move">我是移动</li><li style="cursor:text">我是文本</li><li style="cursor:not-allowed">我是文本</li>
</ul>

3.3.3 轮廓线 outline

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
outline : outline-color ||outline-style || outline-width

• 当我们不需要<input> 标签的蓝色外边框是可以写入 outline: none;

3.3.4 防止拖拽文本域resize

<textarea  style="resize: none;"></textarea>

3.4 vertical-align 垂直对齐

• 父元素必须有行高才能使用

CSS中vertical-align 通常设置图片或者表单（行内块元素）和文字垂直对齐
官方解释：vertical-align 用于设置一个元素的垂直对齐，它只针对于行内元素或者行内块元素
vertical-align : baseline |top |middle |bottom

值	描述
baseline	默认，元素放置在父元素的基线上
top	把元素的顶端与行中最高元素的顶端对齐
middle	把此元素放置在父元素的中部
bottom	把元素的顶端与最低的元素的顶端对齐

• 图片、表单输入行内块元素，默认的vertical-align是基线对齐，把vertical-align设置为middle就可以让文字与图片垂直居中对齐了

3.4.1 解决图片底部默认空白缝隙的问题

1. 图片默认时根据基线对齐的，可以添加属性vertical-align: bottom|middle|top;均可解决（提倡使用）
2. 块级元素没有vertical-align属性，因此也可以将元素直接改为块级元素

3.5 一处文字省略号显示

3.5.1 单行文本显示省略号

• 单行文本溢出显示省略号必须满足三个条件

  /*1. 先强制一行内显示文本*/white-space: nowrap;/*2. 超出的部分隐藏*/overflow: hidden;/*3. 文字用省略号替代超出的部分*/text-overflow: ellipsis;

3.5.2 多行文本显示省略号

后端来做！

四、HTML5与CSS3的新特性

4.1 HTML5新特性

4.1.1 HTML新增语义化标签

<header></header>：头部标签
<nav></nav>：导航标签
<section></section>：内容标签
<article></article>：定义文档某个区域
<aside></aside>：侧边栏标签
<footer></footer>：尾部标签

4.1.2 HTML5 新增多媒体标签

主要包含两个标签
<audio src=""></audio>
<video src=""></video>
使用他们可以很方便的在页面中嵌入音频和视频，而不去使用flash和其他浏览器插件
尽量使用MP4格式的文件，几乎主流浏览器都支持这个格式

<video src="../video/yuanshen.mp4" autoplay="autoplay" muted="muted"></video>

1. 视频<video>常见属性

属性	值	描述
autoplay	autoplay	视频就绪自动播放（chrome浏览器需要muted解决自动播放问题）
controls	controls	向用户展示播放控件
width	width	宽度
height	height	高度
loop	loop	设置是否循环播放
src	url	视频url地址
poster	imgurl	加载等待的图片
muted	muted	静音播放

2.音频<audio>常见属性

属性	值	描述
autoplay	autoplay	音频就绪自动播放
controls	controls	向用户展示播放控件
loop	loop	设置是否循环播放
src	url	音频url地址

• 谷歌禁止了视频与音频的自动播放

4.1.3 HTML5 新增的input类型

• 新增的表单
  
• 新增的表单属性
  

4.2 CSS3新增特性

4.2.1 属性选择器

/*选择出input标签中属性为text的标签*//*选择出input标签中属性为text的标签*/input[type=text]{color: red;}/*选择出input标签具有type属性的标签*/input[type]{color: #1c7430;}

4.2.2 结构伪类选择器

结构伪类选择器主要根据文档结构来选择选择器元素，常用于根据父级选择器里面的子元素

• ntn-child(n)选择某个父元素的一个或多个特定的子元素
  • n可以是数字，关键字和公式
  • n如果是数字，就是选择第n个元素，里面数字从1开始
  • n可以是关键字：even偶数，odd奇数
  • n 可以是公式：如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略
    
• nth-child 对父元素里面所有的子元素排序选择（序号是固定的）先找到第n个子元素，然后在检验是否匹配
• nth-of-type 对父元素里面指定的子元素进行排序选择，先去匹配E这个类型，然后再根据E找第n个子元素
• 类选择器、属性选择器、伪类选择器，权重都为10

     section div:nth-child(1){color: red;}section div:nth-of-type(1){color: #1c7430;}

4.2.3 伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

        div::before{/*    必须写content属性*/content: 'hello';background: pink;}

• before和after创建一个元素，但是属于行内元素
• 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
• 语法：element::before{}
• before和after必须有content属性
• before在父元素内容的前面创建元素，after在父元素内容后面插入元素
• 伪元素选择器和标签选择器权重都为1
  

4.2.4 CSS3 盒子模型

CSS3中可以通过box-sizing来指定和模型，有两个值，可以指定为content-box、border-box，这两种方式计算盒子大小的方式不一样

• 默认的盒子大小计算方式：

box-sizing: border-box:盒子大小为width，内边距与边框不会影响盒子大小（前提：padding与border不大于width）
box-sizing: content-box:盒子的大小 = width + padding + border

4.2.5 CSS滤镜filter（了解）

• filter CSS属性将模糊或者颜色便宜等图形效果应用于元素

filter: blur(2px);（数值越大越模糊）

4.2.6 CSS calc函数

.my{ width: calc(100% - 80px); }（子盒子永远比父级盒子小80px）

4.2.7 CSS3 过渡（重点）

transition： 过渡的属性 花费时间 运动曲线 什么时候开始
1.属性：想要变化的CSS属性，宽、高、背景颜色、内外边距都可以，如果想要所有的属性都变化过渡，写一个all就可以
2.花费时间，（必须写单位）单位为 秒
3.运动曲线ease（可以省略）
4.什么时候开始：单位为 秒，设置延时触发时间（可以省略）

4.3 CSS转换与动画

4.3.1 2D转换

（transform）是CSS3颠覆性的特征之一，可以实现元素的唯一、旋转、缩放等效果

4.4 媒体查询（Media Query）

媒体查询是CSS3新语法
使用@media查询，可以针对不同的媒体类型定义不同的样式
@media可以针对不同的屏幕尺寸设置不同的样式
改变浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

4.4.1 语法规范

        @media mediatype and |not|only (media feature){CSS-code}

1.用@media开头，注意@符号
2.mediatype 媒体类型
3.关键字 and not only
4.media feature 媒体特性，必须有小括号包含

1.mediatype查询类型

值	解释说明
all	用于所有设备
print	用于打印机和打印预览
scree	用于电脑屏幕，平板电脑，智能手机

2.and、only、not关键字是将媒体类型或多个媒体特性连接到一起作为媒体查询条件
3.媒体特性

根据不同的媒体特性展示不同的风格

值	解释说明
width	定义输出设备中页面域可见区域的宽度
min-width	定义输出设备中页面域最小可见区域的宽度
max-width	定义输出设备中页面域最大可见区域的宽度

        @media screen and (max-width: 800px){body{background: #1c7430;}}

五、flex布局

5.1 布局原理

1.flexible意为“弹性布局”，为盒状模型提供最大的灵活性，任何一个盒子都可以使用flex布局
2.当我们为父盒子设为flex布局以后，子元素的float、clear、vertical-align属性都将失效
3.采用Flex布局的元素称为Flex容器(Flex container)，它的所有元素自动成为容器成员，称为容器项目(flex item)，简称“项目”，容器可以横向排列，也可以纵向排列

5.2 常见的父项属性

5.2.1 flex-decoration 设置主轴的方向

在flex布局中，分为主轴与侧轴两个方向，同样也可以称为x轴与y轴（默认主轴为x轴，水平向右）
flex-decoration属性决定主轴的方向，flex-decoration设置谁为主轴，剩下的就是侧轴，子元素是跟着主轴来排列的

属性值	说明
row	默认从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

5.2.2 justify-content 设置主轴上的子元素排列方式

justify-content属性定义了项目在主轴上的对齐方式（使用时确定谁是主轴）

属性值	说明
flex-start	默认从头部开始，如果主轴是x轴，则从左到右
flex-end	从尾部开始排列
center	在主轴居中对齐（如果主轴是x轴，水平居中）
space-around	平分剩余空间
space-between	先两边贴边，再评分剩余空间

5.2.3 flex-wrap 设置子元素是否换行

默认情况下，项目都是排在一条线上的，flex-wrap属性定义再flex布局中是默认不换行的

属性值	说明
nowrap	默认值，不换行
wrap	换行

5.2.4 align-items 设置侧轴上的子元素排列方式（单行）

该属性是控制子项在侧轴（默认是y轴）上的排列方式，在子项为单项的时候使用

属性值	说明
flex-start	从上到下
flex-end	从下到上
center	垂直居中
stretch	拉伸

5.2.5 align-content 设置侧轴上的子元素的排列方式（多行）

设置子项在侧轴上的排列方式，并且只能用于子项出现换行的情况（多行），在单行下是没有效果的

属性值	说明
flex-start	默认值在侧轴的头部开始排列
flex-end	在侧轴的尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头，再平分剩余空间
stretch	设置子项元素高度平分父元素高度

5.2.6 flex-flow

flex-flow属性是flex-direction和flex-wrap属性的复合属性

5.3 flex布局子项常见属性

5.3.1 flex 属性

flex属性定义子项目分配剩余空间，用flex来表示占多少份数

5.3.2 align-self 控制子项自己在侧轴上的排列方式

5.3.4 order 属性定义项目的排列顺序

六、Bootstrap前端开发框架

6.1 布局容器

6.1.1 container 类

containerl类，响应式布局，固定宽度

• 大屏（>=1200px）宽度为1170px
• 中屏（>=992px）宽度为970px
• 小屏（>=768px）宽度为750px
• 超小屏（100%）

6.1.2 container-fluid 类

• 流动时布局容器，百分百宽度
• 占据全部视口（viewport）的容器
• 适合于单独做移动端开发

6.2 Bootstrap 栅格系统

6.2.1 简介

• 栅格系统（grid system），它是将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局
• Bootstrap提供的是一套响应式的、移动设备优先的流式栅格系统，系统会自动分为最多12列
• Bootstrap里面的container宽度是固定的，但是不同的屏幕下，container的宽度不同，我们再把container划分为12等份

6.2.2 栅格系统选项参数

	超小屏幕（手机）	小屏设备（平板）	中等屏幕（桌面显示器）	宽屏设备（大屏显示器）
.container最大宽度	自动（100%）	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列(column)数	12	12	12	12

• 行(row)必须放到container布局容器当中
• 实现列的平均分配，需要给列添加列前缀
• 列(column)大于12，多余的列所在的元素将被作为一个整体另起一行排列
• 可以同时为一列指定多个设备的类名，以便划分不同的份数，例如class = "col-md-4 col-sm-6"

6.2.3 嵌套

• 在使用列嵌套时最好加上一个“row”，这样可以取消父元素的padding值，而且高度与父级元素一样高

6.2.4 列偏移

    <div class="offset-md-3">left</div>

6.2.5 响应式工具

利用媒体查询功能，并使用这些工具类可以方便的针对不同的设备展示或隐藏页面内容

有关HTML与CSS的重点知识归纳（Pink）相关推荐

1. python初中必背语法_初中英语语法知识点总结 中考必背重点知识归纳

   初中英语语法知识点总结 中考必背重点知识归纳 很多人想知道初中英语有哪些重要的语法知识点,中考有哪些必背的知 识点呢 ? 下面小编为大家整理一下 ! 初中英语语法重点知识归纳名词的所有格 : 表所有关 ...

2. 肖博高中数学高考数学重点知识归纳之三角函数与解三角形

   肖博高中数学高考数学重点知识归纳 三角函数与解三角形解答题往往处于高考数学试卷解答题第一题的位置,难度中等,以考查基础知识和基本能力为主.根据历年阅卷情况,此题的得分率并不是太高,主要原因是审题不严谨 ...

3. 初中数学知识点总结_初中数学知识点总结 中考必背的重点知识归纳

   很多人想知道初中有哪些重点知识,初中数学在中考中有哪容易考的知识点呢?下面小编为大家介绍一下! 数学中考知识点系统总结 专题一 数与式 考点1.1.实数的概念及分类 1. 实数的分类 有理数:整数(包 ...

4. python重点知识归纳_一文了解机器学习知识点及其算法（附python代码）

   一文了解机器学习知识点及其算法(附python代码) 来源:数据城堡 时间:2016-09-09 14:05:50 作者: 机器学习发展到现在,已经形成较为完善的知识体系,同时大量的数据科学家的研究成 ...

5. 计算机文化基础重点知识归纳,计算机文化基础_第二章重点知识总结(考试必备!!!)...

   操作系统:是管理软硬件资源.控制程序执行.改善人机界面.合理组织计算机工作流程和为用户使用计算机提供良好运行环境的一种系统软件. 操作系统的四种特性:并发性.共享性.虚拟性.异步性. 并发性:是指两个 ...

6. 多线程重点知识归纳总结。

   目录 一.线程相关概念 1.程序 2.进程 3.线程 2.多线程应用 1.创建线程的两种方式 2.代码示例 三.Runnable 接口 1.为什么要实现接口 2.代码示例:如何使用 3.静态代理模式: ...

7. 史上最全JVM重点知识总结

   史上最全JVM重点知识总结 基于<深入了解java虚拟机>相关章节进行地重点知识归纳,同时面向企业面试,给出常见面试问题解析及自己的见解,如果有不正确的地方欢迎大佬们指正. 文章目录 1. ...

8. 大学计算机技术知识大全,大学计算机全章节重点基础知识归纳大全.doc

   大学计算机全章节重点基础知识归纳大全 PAGE \* MERGEFORMAT 18 大学计算机基础重点归纳 第一章:计算机概论 19646年,第一台计算机,ENIAC 计算机分类(6):巨型,小巨型, ...

9. 【HTML】重点知识内容~快速上手

   推荐前端学习路线如下: HTML.CSS.JavaScript.noodJS.组件库.JQuery.前端框架(Vue.React).微信小程序和uniapp.TypeScript.webpack 和 ...

最新文章

1. 一代偶像终将老去，总有AI正在年轻
2. 滴滴开源AI项目登上GitHub热榜，人机对话模型可从论文到产品部署无缝衔接
3. 【OSS 排查方案-5】透过现象看本质之网络排查分析
4. 反射练习之越过泛型检查
5. 电脑操作系统维护10条实用建议！
6. Android 应用内直接跳转酷市场
7. 吴裕雄--天生自然 高等数学学习：多元函数微分学的几何应用
8. linux 格式化u盘_使用Universal USB Installer，打造你的U盘版Linux系统
9. 为什么先交钱后用电_车主快看，有上坡辅助，先抬离合后加油为什么不是熄火就是加空油...
10. Redis脚本实现分布式锁
11. Java面向对象编程三大特征 - 封装
12. 用Python实现辞职信
13. wordpress 更改excerpt的长度,设置excerpt后面'[...]'的字样和链接
14. error: #79: expected a type specifier
15. 网页报503 service unavailable错误怎么解决
16. AVI 文件格式解析
17. Swift - lazy 修饰符和lazy 方法
18. 汇编原理自我总结（三）
19. openlayers 6 draw绘画
20. JAVA版微信机器人（非公众号）【L】

热门文章

1. 【ClickHouse】什么是ClickHouse？CK入门
2. （附源码）app个人健康管理 毕业设计 202031
3. Spring Cloud Consul 之Greenwich版本全攻略
4. matlab生鲜或农产品（河马等）配送路径优化研究【matlab优化算法十八】
5. 转：iOS应用如何实现64位的支持
6. Linux下抓包命令Tcpdump
7. java post 发送_Java发送post方法详解
8. Java Post方式上传文件
9. 网易实习一面（游戏测试开发）
10. 教你如何ai动物绘画