HTML+CSS知识点学习笔记
CSS
HTML5+CSS3新增知识点和使用
HTML
Web标准
- Web标准三层组成：结构,表现，行为
- 为什么要遵循Web标准：浏览器不同内核不同，显示页面或排版有差异，通过Web展示统一内容
html元素标签
元素标签分类：常规元素（双标签）
空元素（单标签）
标签关系：
1：嵌套关系
2:并列关系``
文档类型
位于文档最前面位置，告知浏览器文档使用哪种html或xhtml规范
字符集
常用标签
排版标签
- 标题标签h
- 段落标签p
- 水平线标签hr
- 换行标签br
- div和span标签
div一行放一个span一行放多个
文本格式化标签
图像标签img
- src为标签必须属性（URL）路径
- alt图片不能显示时替换文本
- title鼠标悬停时图片显示内容
- width图片宽度
- height图片高度
- border设置边框
链接标签a
文本
href为必须属性target为页面打开方式_blank
注释标签
快捷ctrl+/
拓展：1：base 标签 base 可以设置整体链接的打开状态
2：预格式化文本pre标签
被包围在 pre标签 元素中的文本通常会保留空格和换行符
3：特殊字符
空格
<<
>>
表格标签(table)
表格用来展示数据的
标签1. 一个完整的表格有表格标签（table），行标签（tr），单元格标签（td）组成，没有列的标签
- 属性2. 
3. 表头单元格标签
-
- 一般表头单元格位于表格的第一行或第一列，并且文本加粗居中
- 语法：
- 只需用表头标签;替代相应的单元格标签
- 表格标题标签
caption 元素定义表格标题，通常这个标题会被居中且显示于表格之上。
caption 标签必须紧随 table 标签之后。 - 合并单元格
- 跨行合并：rowspan=“合并单元格的个数”
- 跨列合并：colspan=“合并单元格的个数”
列表标签
作用：布局
列表标签分为无序列表ul有序列表ol和自定义列表dl
表单标签（input）
作用：搜集用户信息
表单分为表单控件（表单元素）、提示信息、表单域
- **表单控件： **
包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等
提示信息：
一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
表单域：
他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。
属性：
label标签(理解)``
1. 第一种用法就是用label直接包括input表单。
```html
适合单个表单选择
- 第二种用法 for 属性规定 label 与哪个表单元素绑定。
<label for="sex">男label>
<input type="radio" name="sex" id="sex">
textarea控件(文本域）
作用：
通过textarea控件可以轻松地创建多行文本输入框
文本框和文本域区别
| 表单 | 名称 | 区别 | 默认值显示 | 用于场景 |
|---|---|---|---|---|
| input type=“text” | 文本框 | 只能显示一行文本 | 单标签，通过value显示默认值 | 用户名、昵称、密码等 |
| textarea | 文本域 | 可以显示多行文本 | 双标签，默认值写到标签中间 | 留言板 |
select下拉列表
目的：
如果有多个选项让用户选择，为了节约空间，我们可以使用select控件定义下拉列表.
- select中至少包含一对 option
- 在option 中定义selected =" selected "时，当前项即为默认选中项
form表单域
作用：实现用户信息的搜集和传递
form action="url地址" method="提交方式" name="表单名称">
各种表单控件
常用属性：
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址。 |
| method | get/post | 用于设置表单数据的提交方式，其取值为get或post。 |
| name | 名称 | 用于指定表单的名称，以区分同一个页面中的多个表单。 |
iframe内联框架
注意:
查文档W3C : http://www.w3school.com.cn/
CSS
css概念：称为css样式表作用于设置版面的布局和外观显示样式。
css样式表（书写位置）
- 行内式
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容
- 内部样式表（内嵌式）
- 外部样式表（外链式）
是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中`
link是单标签
css选择器
- 标签选择器
- 类选择器
- id选择器
- 通配符选择器
复合选择器： - 后代选择器
.class h3{color:red;font-size:16px;}
- 子元素选择器
.class>h3{color:red;font-size:14px;}
- 交集选择器
h3.class {color: red；font-size: 25px;}
- 并集选择器 ，用逗号隔开。
- 链接伪类选择器
a:link 未访问链接
a:visited 已访问链接
a:hover鼠标移动到链接上
a:active选定的链接
写的时候要按顺序 。
css字体样式属性调试工具
一、font字体
- font-size:大小
p {
font-size:20px;
} - font-family:字体
p{ font-family:“微软雅黑”;}
Unicode字体
在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。
- font-weight:字体粗细
| 属性值 | 描述 |
|---|---|
| normal | 默认值（不加粗的） |
| bold | 定义粗体（加粗的） |
| 100~900 | 400 等同于 normal，而 700 等同于 bold 我们重点记住这句话 |
4.font-style - (正常或倾斜）
5. font:综合设置字体样式
选择器 { font: font-style font-weight font-size/line-height font-family;}
使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开
不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。
二、css外观属性
6. color：文本颜色
通常用16进制
7. line-height 行高
控制行与行之间的距离
8. text-align水平对齐
设定水平的对齐方式
9. text-indent首行缩进
用于段落首行缩进2个字距离2em
10. text-decoration文本修饰
加下滑线underline取消none
复合选择器
- 后代选择器
写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔
.class h3{color:red;font-size:16px;}
- 子元素选择器
子元素只能选择作为某元素子元素（亲儿子）的元素
写法是父级标签写在前面，子级标签写在后面，中间用>链接
.class>h3{color:red;font-size:14px;}
- 交集选择器
是由两个选择器构成 既有标签一的特点，又有标签二的特点
h3.class {color: red；font-size: 25px;}
第一个为标签选择器，第二个为类选择器，两个选择器之间不能有空格
交集选择器 是 并且的意思。 即…又…的意思
比如： p.one 选择的是： 类名为 .one 的 段落标签。
用的相对来说比较少，不太建议使用。
4. 并集选择器
通常用于集体声明
任何形式的选择器都可以作为并集选择器的一部分
并集选择器用逗号隔开，可以理解为和的意思
比如 .one, p , #test {color: #F00;}
表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色。
通常用于集体声明。
5. 链接伪类选择器
伪类用冒号
链接伪类：a:link 未访问链接
a:visited 已访问链接
a:hover鼠标移动到链接上
a:active选定的链接
写的时候要按顺序
伪类选择器和伪元素
- 伪类选择器
：：before在元素前面插入内容
：：after在元素内部后面插入内容 - 伪类选择器注意事项
（1）before 和 after 必须有 content 属性
（2）before 在内容前面，after 在内容后面
（3）before 和 after 创建的是一个元素，但是属于行内元素
（4）创建出来的元素在 Dom 中查找不到，所以称为伪元素
（5）伪元素和标签选择器一样，权重为 1
（6）用于添加添加字体图标
2. 在CSS3中，伪类用单冒号:表示；而伪元素用双冒号::表示。伪元素：：写法在一些浏览器中不兼容，既可以使用：又可以写：：。
3. CSS3中伪类和伪元素的语法不同，伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素。
4. 可以同时使用多个伪类，却只能同时使用一个伪元素。
5. 首先伪类是用单冒号表示：如:link, :visited, :hover, :active, :focus, :first-child, :last-child, :nth-child, :nth-last-child, :not()
然后伪元素用双冒号表示：如::first-letter, ::first-line, ::before, ::after
- 伪类元素： ”需要注意的是在CSS的定义中，同一个元素的:hover必须位于:link、:visited之后才能生效，:active必须位于:hover之后才能生效。
- 伪类用于向某些选择器添加特殊的效果。CSS 伪元素用于向某些选择器设置特殊效果。
标签显示模式（display）
即标签以什么方式进行显示
html标签分为块标签和行内标签，也称为块元素和行内元素
- 块元素（block-level）
常见的有h,p,div,ul,ol,li,等，其中div是最典型的块元素
特点：（1）独占一行
（2）高度，宽度、外边距以及内边距都可以控制
（3）宽度默认是容器（父级宽度）的100%
4）是一个容器及盒子，里面可以放行内或者块级元素。
- 只有 文字才 能组成段落 因此 p 里面不能放块级元素，特别是 p 不能放div
- 同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
- 行内元素（inline-level）
常见的行内元素有
（2）高、宽直接设置是无效的。
（3）默认宽度就是它本身内容的宽度。
（4）**行内元素只能容纳文本或则其他行内元素
3. 行内块元素（line-block）
img,input,td可以设置宽高和对齐属性，称为行内块元素
行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。
转换：- 块转行内：display:inline;
- 行内转块：display:block;
- 块、行内元素转换为行内块： display: inline-block;
行高（line-height）
- 行高测量（顶线中线基线底线）基线与基线的距离为行高
- 单行垂直居中
- 如果 行高 等 高度 文字会 垂直居中
- 如果行高 大于 高度 文字会 偏下
- 如果行高小于高度 文字会 偏上
css背景（background）
- 背景颜色（color）
background-color:颜色值; 默认的值是 transparent 透明的 - 背景图片（image）
. background-image : none | url (url) .
background-image : url(images/demo.png);
url不加引号 - 背景平铺（repeat）
background-repeat : repeat | no-repeat | repeat-x | repeat-y
4. 背景位置（position）
background-position : length || length
background-position : position || position
-
- 必须先指定background-image属性
- position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
- 如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致
- 如果只指定了一个方位名词，另一个值默认居中对齐。
- 如果position 后面是精确坐标， 那么第一个，肯定是 x 第二的一定是y
- 如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中
- 如果指定的两个值是 精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标
- 背景附着
背景附着就是解释背景是滚动的还是固定的
background-attachment : scroll | fixed - 背景简写
background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; - 背景透明
background: rgba(0, 0, 0, 0.3);
css三大特性
- 层叠行
所谓层叠性是指多种CSS样式的叠加
- 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
- 样式不冲突，不会层叠
- 继承性
子标签会继承父标签的某些样式，如文本颜色和字号。
子元素可以继承父元素的样式（**text-，font-，line-这些元素开头的可以继承，以及color属性 - 优先级
- 选择器相同，则执行层叠性
- 选择器不同，就会出现优先级的问题。
（1）权重计算公式
（2）权重叠加
数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。
（3）继承权重是0
） 如果选中了，那么以上面的公式来计权重。谁大听谁的。
2） 如果没有选中，那么权重是0，因为继承的权重为0.
css盒子模型（重点）
cs学习三大重点：css盒子模型、浮动、定位。
网页布局本质：利用css设置盒子大小，然后摆放盒子位置，最后把网页元素放入盒子里面
盒子模型（box Model）
- 盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。
- 盒子里面的文字和图片等元素是 内容区域
- 盒子的厚度 我们成为 盒子的边框
- 盒子内容与边框的距离是内边距（类似单元格的 cellpadding)
- 盒子与盒子之间的距离是外边距（类似单元格的 cellspacing）
一、盒子边框(border)
- 属性：border-width 边框粗细
,border-style边框样式,
-
- none：没有边框即忽略所有边框的宽度（默认值）
- solid：边框为单实线(最为常用的)
- dashed：边框为虚线
- dotted：边框为点线
border-color边框颜色
2. 边框综合设置
border : border-width || border-style || border-color
没有顺序
3. 总结表
| 上边框 | 下边框 | 左边框 | 右边框 |
|---|---|---|---|
| border-top-style:样式; | border-bottom-style:样式; | border-left-style:样式; | border-right-style:样式; |
| border-top-width:宽度; | border- bottom-width:宽度; | border-left-width:宽度; | border-right-width:宽度; |
| border-top-color:颜色; | border- bottom-color:颜色; | border-left-color:颜色; | border-right-color:颜色; |
| border-top:宽度 样式 颜色; | border-bottom:宽度 样式 颜色; | border-left:宽度 样式 颜色; | border-right:宽度 样式 颜色; |
- `` 表格的细线边框
table{ border-collapse:collapse; }
border-collapse:collapse; 表示相邻边框合并在一起
内边距（padding）
padding属性用于设置内边距。 是指 边框与内容之间的距离
属性padding-left左内边距padding-right右内边距padding-top上内边距padding-bottom下内边距
注意：. 内容和边框 有了距离，添加了内边距。
. 盒子会变大了。
3. 内盒尺寸计算
盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框
注意：如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子。
外边距（margin）
margin属性用于设置外边距。 margin就是控制**盒子和盒子之间的距离
- 属性:margin-left左外边距margin-right右外边距margin-top上外边距margin-bottom下外边距
- 块级盒子水平居中
（1）盒子必须指定宽度
（2）给左右的外边距都设置为atuo
.header{ width:960px; margin:0 auto;}
- 文字居中和盒子居中区别
（1）. 盒子内的文字水平居中是 text-align: center, 而且还可以让 行内元素和行内块居中对齐
(2.) 块级盒子水平居中 左右margin 改为 auto - 插入图片和背景图片区别
（1. ）插入图片 我们用的最多 比如产品展示类 移动位置只能靠盒模型 padding margin
(2. ）背景图片我们一般用于小图标背景 或者 超大背景图片 背景图片 只能通过 background-position - 清除元素的默认内外边距
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
- 外边距合并
(1). 相邻块元素垂直外边距的合并
- 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom
- 下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和
- 取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。
- 解决方案：尽量给只给一个盒子添加margin值。
- (2). 嵌套块元素垂直外边距的合并（塌陷）
- 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框
- 父元素的上外边距会与子元素的上外边距发生合并
- 合并后的外边距为两者中的较大者
- 解决方案：
- 可以为父元素定义上边框。
- 可以为父元素定义上内边距
- 可以为父元素添加overflow:hidden。
还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题，后面咱们再总结。。
盒子模型布局稳定性
我们根据稳定性来分，建议如下：
按照 优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）。
width > padding > margin
- 原因：
- margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。
- padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。
- width 没有问题（嗨皮）我们经常使用宽度剩余法 高度剩余法来做
拓展：1. 圆角边框
语法:border-radius:length;
2. 盒子阴影
语法：box-shadow:水平阴影h-shadow 垂直阴影v-shadow（必写） 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影；
书写规范
空格规范：【强制】 选择器 与 { 之间必须包含空格。
选择器规范
【强制】 并集选择器，每个选择器声明必须独占一行
属性规范
【强制】 属性定义必须另起一行。
【强制】 属性定义后必须以分号结尾。
浮动(float)
网页布局的核心——就是用css来摆盒子
css布局的3种机制：
（1）普通流（标准流）
- 块级元素会独占一行，从上向下顺序排列；
- 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
- 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；
- 常用元素：span、a、i、em等
（2）浮动、
让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示
（3）定位。
将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效
一、浮动概念：
元素的浮动是指设置了浮动属性的元素会
- 常用元素：span、a、i、em等
- 脱离标准普通流的控制
- 移动到指定位置。
作用： - 让多个盒子(div)水平排列成一行**，使得浮动成为布局的重要手段。
- 可以实现盒子的左右对齐等等…
- 浮动最早是用来控制图片，实现文字环绕图片的效果
语法：
选择器 { float: 属性值; }
| 属性值 | 描述 |
|---|---|
| none | 元素不浮动（默认值） |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
小结：1.float` 属性会让盒子漂浮在标准流的上面
2. 浮动的盒子，把自己原来的位置漏给下面标准流的盒子，就是不占有原来位置，是脱离标准流的，我们俗称 “脱标”。
3. 特性 float属性会改变元素display属性。
任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 生成的块级框和我们前面的行内块极其相似。
float —— 浮漏特
| 特点 | 说明 |
|---|---|
| 浮 | 加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面。 |
| 漏 | 加了浮动的盒子是不占位置的，它原来的位置漏给了标准流的盒子。 |
| 特 | 特别注意：浮动元素会改变display属性， 类似转换为了行内块，但是元素之间没有空白缝隙 |
应用：浮动和标准流的父盒子搭配
我们知道，浮动是脱标的，会影响下面的标准流元素，此时，我们需要给浮动的元素添加一个标准流的父亲，这样，最大化的减小了对其他标准流的影响。
**注意：实际重要的导航栏中，我们不会直接用链接a 而是用 li 包含链接(li+a)的做法。
- li+a 语义更清晰，一看这就是有条理的列表型内容。
- 如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名
扩展：1. - 子盒子的浮动参照父盒子对齐
-
不会与父盒子的边框重叠，也不会超过父盒子的内边距
-
2.在一个父级盒子中，如果前一个兄弟盒子是：
-
浮动的，那么当前盒子会与前一个盒子的顶部对齐；
-
普通流的，那么当前盒子会显示在前一个兄弟盒子的下方
- 浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。
二、清除浮动
（1） 原因：因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子。
而是清除浮动后造成的影响 -
语法：
选择器{clear:属性值;} clear 清除
| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| right | 不允许右侧有浮动元素（清除右侧浮动的影响） |
| both | 同时清除左右两侧浮动的影响 |
但是我们实际工作中， 几乎只用 clear: both;
（2）方法
1）额外标签法（隔墙法）
在浮动元素末尾添加一个空的标签
- 优点： 通俗易懂，书写方便
- 缺点： 添加许多无意义的标签，结构化较差
2）父级添加overflow属性方法
可以给父级添加： overflow为 hidden| auto| scroll 都可以实现
优点： 代码简洁
缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
3）使用after伪元素清除浮动
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {*zoom: 1;} /* IE6、7 专有 */
- 优点： 符合闭合浮动思想 结构语义化正确
- 缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
- 代表网站： 百度、淘宝网、网易等
4）使用双伪元素清除浮动
```css
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
- 优点： 代码更简洁
- 缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
- 代表网站： 小米、腾讯等
总结：1. 父级没高度
- 子盒子浮动了
- 影响下面布局了，我们就应该清除浮动了。
| 清除浮动的方式 | 优点 | 缺点 |
|---|---|---|
| 额外标签法（隔墙法） | 通俗易懂，书写方便 | 添加许多无意义的标签，结构化较差。 |
| 父级overflow:hidden; | 书写简单 | 溢出隐藏 |
| 父级after伪元素 | 结构语义化正确 | 由于IE6-7不支持:after，兼容性问题 |
| 父级双伪元素 | 结构语义化正确 | 由于IE6-7不支持:after，兼容性问题 |
后面两种伪元素清除浮动，大家暂且会使用就好， 深入原理，我们后面学完伪元素再讲。
定位（position）
将盒子定在某一个位置 自由的漂浮在其他盒子(包括标准流和浮动)的上面
所以，我们脑海应该有三种布局机制的上下顺序
标准流在最底层 (海底) ------- 浮动 的盒子 在 中间层 (海面) ------- 定位的盒子 在 最上层 （天空）
一. 边偏移
在 CSS 中，通过 top、bottom、left 和 right 属性定义元素的边偏移：（方位名词）
| 边偏移属性 | 示例 | 描述 |
|---|---|---|
top |
top: 80px |
顶端偏移量，定义元素相对于其父元素上边线的距离。 |
bottom |
bottom: 80px |
底部偏移量，定义元素相对于其父元素下边线的距离。 |
left |
left: 80px |
左侧偏移量，定义元素相对于其父元素左边线的距离。 |
right |
right: 80px |
右侧偏移量，定义元素相对于其父元素右边线的距离 |
定位的盒子有了边偏移才有价值。 一般情况下，凡是有定位地方必定有边偏移
二、定位模式（position）
在 CSS 中，通过 position 属性定义元素的定位模式，语法如下：
选择器 {
position: 属性值; }
定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。
| 值 | 语义 |
|---|---|
static |
静态定位 |
relative |
相对定位 |
absolute |
绝对定位 |
fixed |
固定定 |
- 静态定位
静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none， 不要定位的时候用。 - 相对定位（relative）
相对定位是元素相对**于它 原来在标准流中的位置 来说的
相对定位的特点：（务必记住）
- 相对于 自己原来在标准流中位置来移动的
- 原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。
- 绝对定位(absolute) - 重要
绝对定位是元素以带有定位的父级元素来移动位置 （拼爹型）
完全脱标 —— 完全不占位置；
父元素没有定位，则以浏览器为准定位（Document 文档）。
父元素要有定位**
-
将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位
-
绝对定位的特点：（务必记住）
-
绝对是以带有定位的父级元素来移动位置 （拼爹型） 如果父级都没有定位，则以浏览器文档为准移动位置
-
不保留原来的位置，完全是脱标的
定位口诀 —— 子绝父相子绝父相** —— 子级是绝对定位，父级要用相对定位
- 固定定位(fixed) - 重要
定定位是绝对定位**的一种特殊形式： （认死理型） 如果说绝对定位是一个矩形 那么 固定定位就类似于正方形
完全脱标 —— 完全不占位置；
只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；
- 跟父元素没有任何关系；单独使用的
- 不随滚动条滚动。
- 绝对定位的盒子居中
注意**：绝对定位/固定定位的盒子不能通过设置margin: auto设置水平居中。
left: 50%;：让**盒子的左侧**移动到**父级元素的水平中心位置**； .margin-left: -100px;`：让盒子向左移动自身宽度的一半。 - 堆叠顺序（z-index）
在使用定位布局时，可能会出现盒子重叠的情况。
加了定位的盒子，默认后来者居上， 后面的盒子会压住前面的盒子。
应用 z-index 层叠等级属性可以调整盒子的堆叠顺序
z-index 的特性如下：
属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；. 如果属性值相同，则按照书写顺序，后来居上；
. 数字后面不能加单位。
注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。
7. 定位改变display属性
前面我们讲过， display 是 显示模式， 可以改变显示模式有以下方式:
- 可以用inline-block 转换为行内块
- 可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
- 绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。
所以说， 一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。
同时注意：*
浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。 （我们以前是用padding border overflow解决的）
也就是说，我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了。
8. 圆角矩形设置4个角
圆角矩形可以为4个角分别设置圆度， 但是是有顺序的
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
-
如果4个角，数值相同
border-radius: 15px; -
里面数值不同，我们也可以按照简写的形式，具体格式如下:
border-radius: 左上角 右上角 右下角 左下角;
还是遵循的顺时针
定位小结
| 定位模式 | 是否脱标占有位置 | 移动位置基准 | 模式转换（行内块） | 使用情况 |
|---|---|---|---|---|
| 静态static | 不脱标，正常模式 | 正常模式 | 不能 | 几乎不用 |
| 相对定位relative | 不脱标，占有位置 | 相对自身位置移动 | 不能 | 基本单独使用 |
| 绝对定位absolute | 完全脱标，不占有位置 | 相对于定位父级移动位置 | 能 | 要和定位父级元素搭配使用 |
| 固定定位fixed | 完全脱标，不占有位置 | 相对于浏览器移动位置 | 能 | 单独使用，不需要父级 |
注意：
- 边偏移需要和定位模式联合使用，单独使用无效；
top和bottom不要同时使用；left和right不要同时使用
网页布局总结
一个完整的网页，有标准流 、 浮动 、 定位 一起完成布局的。每个都有自己的专门用法。
1). 标准流
可以让盒子上下排列 或者 左右排列的
2). 浮动
可以让多个块级元素一行显示 或者 左右对齐盒子 浮动的盒子就是按照顺序左右排列
3). 定位
定位最大的特点是有层叠的概念，就是可以让多个盒子 前后 叠压来显示。 但是每个盒子需要测量数值
css高级技巧
- 元素的显示与隐藏
显示与隐藏总结
| 属性 | 区别 | 用途 |
|---|---|---|
| display | 隐藏对象，不保留位置 | 配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛 |
| visibility | 隐藏对象，保留位置 | 使用较少 |
| overflow | 只是隐藏超出大小的部分 | 1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围 |
- CSS用户界面样式
2.1 鼠标样式cursor
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
| 属性值 | 描述 |
|---|---|
| default | 小白 默认 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
用户界面样式总结
| 属性 | 用途 | 用途 |
|---|---|---|
| 鼠标样式 | 更改鼠标样式cursor | 样式很多，重点记住 pointer |
| 轮廓线 | 表单默认outline | outline 轮廓线，我们一般直接去掉，border是边框，我们会经常用 |
| 防止拖拽 | 主要针对文本域resize | 防止用户随意拖拽文本域，造成页面布局混乱，我们resize:none |
- vertical-align 垂直对齐
vertical-align 垂直对齐，它只针对于行内元素或者行内块元素，
注意：
vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，
特别是行内块元素， 通常用来控制图片/表单与文字的对齐。
3.1. 基线对齐vertical-alain:baseline;
垂直居中vertical-alian: middile;
顶部对齐vertical-alain: top;
3.2 去除图片底侧空白缝隙
原因：
图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。
就是图片底侧会有一个空白缝隙。
解决的方法就是：
- 给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐
给img 添加 display：block; 转换为块级元素就不会存在问题了
- 溢出的文字省略号
/1. 先强制一行内显示文本/
white-space: nowrap;
/2. 超出的部分隐藏/
overflow: hidden;
/3. 文字用省略号替代超出的部分/
text-overflow: ellipsis;
5. 精灵技术（sprite）
**为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。
出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图。精灵技术使用的核心总结
首先我们知道，css精灵技术主要针对于背景图片，插入的图片img 是不需要这个技术的。
精确测量，每个小背景图片的大小和 位置。
给盒子指定小背景图片时， 背景定位基本都是 负值。
6. 滑动门
核心技术就是利用CSS精灵（主要是背景位置）和 盒子padding撑开宽度, 以便能适应不同字数的导航栏
拓展
margin负值之美
CSS三角形之美
我们用css 边框可以模拟三角效果
宽度高度为0
我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了
为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0。
div {
width: 0;
height: 0;
border-color: green red blue purple;
border-width: 80px 40px 20px 20px;
border-style: solid;
}
盒子阴影
- 盒子阴影分为内阴影和外阴影（outset ， inset），默认为outset。
box-shadow:/*水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影*/;- 阴影扩展即阴影面积。
- 文字阴影：
text-shadow:/*水平偏移 垂直偏移 模糊度 阴影颜色*/;
HTML5+CSS3新增知识点和使用
一、
HTML5新增语义化标签
增了那些语义化标签
header— 头部标签nav— 导航标签article— 内容标签section— 块级标签aside— 侧边栏标签footer— 尾部标签
多媒体音频标签
- 音频audio 支持格式ogg、MP3、wav
属性 autoplay="autoplay"音频马上播放
controls="controls"向用户显示控件，比如播放按钮
loop="loop"重新开始播放
src="url"播放音频的url
因为不同浏览器支持不同的格式，所以我们采取的方案是这个音频准备多个文件 - 视频video
支持格式ogg、mpeg 4、WebM
属性autoplay="autoplay"视频自动播放
controls="controls"向用户显示播放控件
width、height、设置宽度和高度
loop="loop"循环播放
src="url"视频url地址
poster="lmgurl"加载等待画面图片
muted="muted"静音播放
多媒体标签总结
- 音频标签与视频标签使用基本一致
- 多媒体标签在不同浏览器下情况不同，存在兼容性问题
- 谷歌浏览器把音频和视频标签的自动播放都禁止了
- 谷歌浏览器中视频添加 muted 标签可以自己播放
- 注意：重点记住使用方法以及自动播放即可，其他属性可以在使用时查找对应的手册
新增input标签
属性tyle="email"限制用户输入必须为Email类型
type="url"限制用户输入必须为url类型
type="date"限制用户输入必须为日期类型
"time"时间 "month"月"week"周
tyle="number"限制用户输入必须为数字类型
tyle="tel"手机号码
tyle="search"搜索框
tyle="color"生成一个颜色选择表单
新增表单属性required="required"表单拥有该属性内容不能为空，必填
placeholder提示文本 表单的提示信息，存在默认值将不显示
autofocus="autofocus"自动聚焦属性
autocomplete="off/on"浏览器基于之前输入的值显示 默认打开on关闭off
需要放在表单内同时加name属性
multiple="multiple"可以多选文件提交
二、CSS
属性选择器
E[att] 选择具有att属性的E元素
E[att=“val”]选择具有att属性且属性值等于val的E元素
E[att^=“val”]匹配具有att属性且以val开头的E元素
$=匹配具有att属性且以val结尾的E元素
*=匹配具有且值中含有val的E元素
结构伪类选择器
属性E:first-child匹配父元素的第一个子元素
last最后一个
E:nth-child(n)匹配父元素的第n个子元素
E:first-of-type 指定类型E的第一个
last最后一个
E:nth-of-type(n)指定类型的第n个
nth-child 详解
- 注意：本质上就是选中第几个子元素
- n 可以是数字、关键字、公式
- n 如果是数字，就是选中第几个
- 常见的关键字有
even偶数、odd奇数 - 常见的公式如下(如果 n 是公式，则从 0 开始计算)
- 但是第 0 个元素或者超出了元素的个数会被忽略
- 2n偶数
- 2n+1奇数
- 5n 5 10 15
- n+5 从第5个开始到最后
- -n+5 前5个（包含第5个）
区别
-
nth-child选择父元素里面的第几个子元素，不管是第几个类型 -
nt-of-type选择指定类型的元素
伪类选择器
：：before在元素前面插入内容
：：after在元素内部后面插入内容
伪类选择器注意事项 -
before和after必须有content属性 -
before在内容前面，after 在内容后面 -
before和after创建的是一个元素，但是属于行内元素 -
创建出来的元素在
Dom中查找不到，所以称为伪元素 -
伪元素和标签选择器一样，权重为 1
-
用于添加添加字体图标
2D转换
移动translate:
transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)
translate` 最大的优点就是不影响其他元素的位置
行内标签没有效果
旋转totate:单位（deg）
img:hover {
transform: rotate(360deg)
}
设置旋转中心点：
transform-origin: x y;
注意：1. translate可以沿X，Y轴移动，中间需要用逗号隔开。
2. translate与rotate连写时用空格隔开。
缩放scale:
transform: scale(x, y)
注意，x 与 y 之间使用逗号进行分隔
-
同时使用多个转换，其格式为
transform: translate() rotate() scale() -
顺序会影响到转换的效果(先旋转会改变坐标轴方向)
动画（anination）
动画的基本使用 -
先定义动画
-
在调用定义好的动画`
@keyframes 动画名称 {
0% {
width: 100px;
}
100% {
width: 200px
}
}
div {
/* 调用动画 */
animation-name: 动画名称;
/* 持续时间 */
animation-duration: 持续时间；
}
常见属性：
@keyframes 规定动画
animation 动画的简写属性
animation-name 规定动画名称
animation-duration 花费一个周期需要的时间
animation-timing-function 速度曲线 默认ease
（linear匀速）（steps步长）
animation-dely 规定动画何时开始
animation-iteration-count 动画播放次数 infinite无限
animation-direction 规定是否逆向播放 alternate逆播放
animation-play-state 是否暂停默认running 暂停paused
animation-fill-mode 结束后状态 保持forwards 回到起始backwards
简写
/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode
3D转换
3D` 的特点
-
近大远小
-
物体和面遮挡不可见
三维坐标系 -
x 轴：水平向右 – 注意：x 轴右边是正值，左边是负值
-
y 轴：垂直向下 – 注意：y 轴下面是正值，上面是负值
-
z 轴：垂直屏幕 – 注意：往外边的是正值，往里面的是负值
3D` 转换知识要点 -
3D位移：translate3d(x, y, z) -
3D旋转：rotate3d(x, y, z) -
透视：
perspctive后跟像素 -
3D呈现transfrom-style -
3D
移动就是在2D` 移动的基础上多加了一个可以移动的方向，就是 z 轴方向 -
transform: translateX(100px)：仅仅是在 x 轴上移动 -
transform: translateY(100px)：仅仅是在 y 轴上移动 -
transform: translateZ(100px)：仅仅是在 z 轴上移动 -
transform: translate3d(x, y, z)：其中x、y、z 分别指要移动的轴的方向的距离 -
注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充
透视perspective
- 透视需要写在被视察元素的父盒子上面
-
透视也称为视距，所谓的视距就是人的眼睛到屏幕的距离
-
距离视觉点越近的在电脑平面成像越大，越远成像越小
-
透视的单位是像素
- 如果想要网页产生3D效果需要透视 -
z 轴越大(正值)，我们看到的物体就越大
3D旋转
3D 旋转指可以让元素在三维平面内沿着 x 轴、y 轴、z 轴 或者自定义轴进行旋转
语法
-
transform: rotateX(45deg)– 沿着 x 轴正方向旋转 45 度 -
transform: rotateY(45deg)– 沿着 y 轴正方向旋转 45 度 -
transform: rotateZ(45deg)– 沿着 z 轴正方向旋转 45 度 -
transform: rotate3d(x, y, z, 45deg)– 沿着自定义轴旋转 45 deg 为角度 -
左手准则
-
左手的手拇指指向 x 轴的正方向
-
其余手指的弯曲方向就是该元素沿着 x 轴旋转的方向
-
左手准则
-
左手的拇指指向 y 轴的正方向
-
其余的手指弯曲方向就是该元素沿着 y 轴旋转的方向(正值)
rotate3d` -
transform: rotate3d(x, y, z, deg)– 沿着自定义轴旋转 deg 为角度 -
x, y, z 表示旋转轴的矢量，是标识你是否希望沿着该轴进行旋转，最后一个标识旋转的角度
transform: rotate3d(1, 1, 0, 180deg)– 沿着对角线旋转 45degtransform: rotate3d(1, 0, 0, 180deg)– 沿着 x 轴旋转 45deg
3D呈现transform-style`
transform-style- ☆☆☆☆☆
- 控制子元素是否开启三维立体环境
transform-style: flat代表子元素不开启3D立体空间，默认的transform-style: preserve-3d子元素开启立体空间- 代码写给父级，但是影响的是子盒子