实际应用，更多的使用italic属性值
实际应用中， 行高的数值通过设计图获取， 量取数值时需要使用一些辅助软件工具
选中文字工具，属性选中：不消除锯齿
字体、 字号、 行高、 加粗、 斜体 都是font综合属性的单一属性。
font属性五个单一属性的值可以进行合写， 属性值可以有2到多个， 值之间用空格进行分隔。
font进行综合书写时， 必须有字号和字体参与， 而且必须字号在前， 字体在后， 不能颠倒顺序。
font属性经常对字体、 字号、 行高进行合写， 书写顺序必须是字号、 行高、 字体， 字号和行高之间必须用/进行分隔
如果font属性需要设置加粗和斜体， 两个属性值只能写在最前面， 两个值之间可以互换位置。 后面的字号、 行高、 字体不能更改位置
作用：设置文本整体是否有线条的装饰效果
作用：设置段落首行是否进行缩进
实际应用中，常用em
属性值区分正负， 正数表示向右缩进， 负数表示向左缩进
浏览器控制台中的盒模型图
作用： 设置可以添加元素内容的区域的宽度。
作用： 设置可以添加元素内容的区域的高度。
如果一个元素不添加 height 属性， 默认属性值为auto， 浏览器会自动计算出实际高度， 也就是是内部元素内容自动撑开的高度。 元素的高度自适应内部内容的高度。
书写四个方向单一属性时， 一般是按照顺时针规律书写： 上、 右、 下、 左
设置四个属性值， 分配方向上、 右、 下、 左。
设置三个值分配给上、 左右、 下。
设置两个值， 分配给上下、 左右 。
设置属性值只有一个， 四边的值相同。
作用： 设置边框的颜色。
属性值： 颜色名或颜色值， 整体类似 padding 综合属性写法。
每个单一属性都必须与复合属性 border 一致， 设置三个属性值。
书写四个方向单一属性时， 一般是按照顺时针规律书写： 上、 右、 下、 左
设置四个属性值， 分配方向上、 右、 下、 左。
设置三个值分配给上、 左右、 下。
设置两个值， 分配给上下、 左右 。
设置属性值只有一个， 四边的值相同。
给 <body>标签设置整体文字样式， 让大部分后代标签全部去继承
设计图中盒子高度占位是固定的， 后面同级元素在高度下面加载。多余内容会溢出盒子。
设置了高度的盒子， 如果内部元素的加载高度超过父级， 会溢出。可以通过一个溢出的属性 overflow， 进行溢出部分内容的显示效果设置。
要求盒子高度必须自适应内部内容的高度。
或者设置height的属性值是自动的。
一个元素内部嵌套的子元素， 在父元素中居中。
针对类似 <div>样式上必须独占一行的盒子， 如果子盒子宽度低于父盒子宽度， 可以设置子盒子的 margin 值， 水平方向的值都设置为 auto。
原因： auto 只在水平方向有作用， 水平方向的 margin 如果设置为 auto， 边距会自动无限增大， 直到撑满整个父元素除了子元素宽度之外剩余的区域， 如果两个水平方向都是 auto， 两边都要无限大， 只能达到一个平衡， 两边距离相同， 导致盒子居中。
一般情况下， 一个父元素内部可以放一个或多个子元素， 而且多个子元素要排成一行显示， 必须保证父元素的宽度一定要足够（不考虑溢出情况） ， 需要遵循一个设置尺寸的规律： 所有子元素的宽度加在一起不能大于父元素的宽度 width。父元素的width ≥ 所有子元素width + padding + border + margin
如果不满足条件： 要么多余的子元素掉下来不能在一排， 要么溢出父元素
父子盒模型中， 只有一个子元素， 且子元素是类似 <div>标签必须占一行的。不设置子元素的 width 属性， 子元素的 width 属性值会自动加载父级元素的 width。如果同时设置了子元素水平方向的 padding 和 border 、 margin， 不需要手动去进行内减， 子元素的 width 会自动收缩尺寸。
子元素所有的水平方向的位置所有属性的加和等于父元素的 width 。
在垂直方向如果有两个元素的外边距有相遇的， 浏览器中加载的真正的外边距不是两个间距的加和， 而是两个边距中值较大的， 边距值小的塌陷到了边距值大的值内部。
上面的元素有下边距， 下面的元素有上边距， 两个边距相遇， 真正的盒子间距离是较大的那个值
父子元素之间也会出现 margin 塌陷， 父元素和子元素都设置了同方向的margin-top 值， 两个属性之间没有其他的内容进行隔离， 导致两个属性相遇， 发生margin 塌陷。
本身父元素与上一个元素的距离是0， 子元素如果设置了垂直方向的上边距， 会带着父级一起掉下来。
水平方向的 margin 没有塌陷现象。
在标准流中， 大部分元素是区分等级的， 习惯将元素划分为几种常见的加载级别：块级元素、 行内元素、 行内块元素等。
大部分容器级标签包括p标签都是块级元素， 比如 <div>、 <h1>等。
大部分的文本级标签， 比如 <span>、 <a>、 <b>等。
比如 <img>、 <input>等。
可以通过 display 属性更改一个标签的显示模式。
属性值： 元素根据属性值不同， 可以加载对应元素等级的显示模式的特点。
display 属性更改的显示模式并没有改变标准流本质性质， 页面还是只能从上往下加载， 存在空白折叠现象等微观性质。 要想实现更多的界面布局效果需要脱离标准流的限制。
标签元素脱离标准流的方法包括： 浮动、 绝对定位、 固定定位。
margin 塌陷现象出现在标准流中的， 浮动元素已经脱离标准流， 不再具有 margin塌陷现象。
与前面压盖效果结构类似， 同级元素中前面的元素浮动， 后面的元素不浮动， 不浮动的元素内部还有一些文字， 浮动的蓝盒子会压盖住粉盒子的一部分， 但是文字内容不会被盖住， 粉盒子中的文字会让开蓝盒子位置， 围绕它进行加载。这种效果称为字围现象。
可以利用字围现象制作一些特殊的图文混排布局效果
给标准流的父元素强制给一个合适的高度
作用： 清除标签元素自身受到的前面的浮动元素的影响。
给标准流父元素添加 clear 属性， 父元素不受前面浮动影响， 不会再占有浮动让出的位置。
给内部有浮动子元素的父元素添加溢出隐藏 overflow: hidden属性， 可以解决浮动的所有问题。
父元素有了高度后， 可以管理住内部所有的浮动元素， 不会延伸到后面标签中影响贴边。
<a>标签可以根据用户行为不同， 划分为四种状态， 通过<a>标签的伪类可以将四种状态选中设置为不同的样式效果， 用户触发对应行为， 就可以加载对应的样式。
一般会将访问前和访问后状态设置为一样的效果， 保证了页面的统一性， 可以选择性的设置鼠标移上和鼠标点击状态。
更加常用的一种设置方式如下：
<a>标签任何普通的选择器， 可以同时选中四种状态， 可以将四种状态设置为相同的样式， 属性可以设置所有的 <a>默认显示样式的属性， 包括盒模型、 文字等。
a:hover 伪类选择器： 设置鼠标移上时不一样的样式属性。
属性值都是使用代表方向的单词进行书写。
使用像素值作为背景定位的属性值。
百分比表示法使用百分比数字作为属性值。
100%代表的数值：
background 属性可以将五个单一属性的值进行合写。
属性值： 可以有 1-5 个属性值， 值之间用空格进行分隔， 背景定位的两个属性值算作一个属性值， 不能被分开也不能颠倒顺序。 五个属性值之间可以互换位置。
在<h1>标签是权重最高的标签， 一般会在内部书写最重要的内容， 比如 logo 图片、 最大的标题等。
另外 <h1>内部的文字， 可以帮助提高 SEO 搜索排名。
在设置的是 logo 图片时， 如果使用插入图， 就不能书写搜索关键字。
如果想解决 SEO 问题， 可以将 HTML 结构中， 插入图换成搜索关键字， 然后使用 css 添加背景图给 <a>标签或 <h1>标签。
在一个盒子中有背景图部分， 而且有文字内容， 文字会让开背景图区域进行加载，
背景区域应该使用 padding 挤出位置。
四个方向的 padding 都可能用于添加背景图。
当用户访问一个网站时， 需要向服务器发送请求， 网页上的每张图像都要经过一次求才能展现给用户。
然而， 一个网页中往往会应用很多小的背景图像作为修饰， 当网页中的图像过多时，服务器就会频繁地接受和发送请求， 这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数， 提高页面的加载速度， 出现了 CSS精灵技术（也称 CSS Sprites、 CSS 雪碧） 。
CSS 精灵是一种处理网页背景图像的方式。
它将一个页面涉及到的所有零星背景图像都集中到一张大图中去， 然后将大图应用于网页， 这样， 当用户访问该页面时， 只需向服务发送一次请求， 网页中的背景图像即可全部展示出来。
通常情况下， 这个由很多小的背景图像合成的大图被称为精灵图。
CSS3 支持背景半透明的写法， 颜色值增加了一种 rgba 模式。
rgba 模式 ： 在 rgb 基础上增加了一个不透明度的设置， 不透明度 alpha 取值范围在0-1 之间， 0 表示完全透明， 1 表示完全不透明， 0.5 表示半透明。
书写方式： rgba(红色， 绿色， 蓝色， 不透明度)
注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响。
通过 background-size 设置背景图片的尺寸， 就像我们设置 <img>的尺寸一样， 在移动 Web 开发中做屏幕适配应用非常广泛。
CSS3 中规定， 一个盒子上， 可以添加多个背景图片。
background-image 的属性值书写时， 以逗号分隔多背景的 URL路径地址。
注意： 背景加载时， 先写的背景压盖后写的背景图片。
属性名： position。
作用： 设置定位的元素， 它需要根据某个参考元素发生位置的偏移。
定位的元素要想发生位置的移动， 必须搭配偏移量属性进行设置。
水平方向： left、 right。
垂直方向： top、 bottom。
属性值： 常用 px 为单位的数值， 或者百分比。
子绝父相、 子绝父绝、 子绝父固
属性值： absolute， 绝对的意思。
参考元素： 参考的是距离最近的有定位的祖先元素， 如果祖先都没有定位， 参考<body>。必须搭配偏移量属性才会发生位置移动。
性质： 绝对定位的元素脱离标准流， 会让出标准流位置， 可以设置宽高， 也可以随时定义位置， 绝对定位的元素不设置宽高只能被内容撑开。
注意1： 绝对定位的参考元素是不固定的， 不同的参考元素以及不同的偏移量组合，会导致绝对定位元素的参考点不同， 具体位移效果不同。
注意2： 在绝对定位中， 由于参考点不同， left 正值不再等价于 right 的负值。
以 <body>为参考元素时， 参考点的确定与偏移量方向有关
第一， 如果有 top 参与的定位， 参考点就是 <body>页面的左上顶点和右上顶点。 自身的对比点是盒子的所有盒模型属性最外面的左上角或右上角。
第二， 如果有 bottom 参与的绝对定位， 参考点是 <body>页面首屏的左下顶点或右下顶点。 对比点是盒子的所有盒模型属性最外面的左下角或右下角。
实际应用中， 如果以 <body>为参考元素， 不同分辨率的浏览器中， 绝对定位的元素位置是不同的， 所以较少使用 <body>作为参考元素。
祖先级为参考元素
如果祖先级中有定位的元素， 就不会去参考 <body>。
参考元素： 参考的是祖先元素中有任意定位的， 在 HTML 结构中距离目标最近的祖先。
如果绝对定位的参考元素是某个祖先级， 参考点是盒子 border 以内的四个顶点， 组合方向决定了参考点。 绝对定位的元素只关心对比点和参考点之间的距离， 会忽视参考元素的 padding 区域。
所有的定位类型都可以实现压盖效果。
由于绝对定位的元素脱标， 不占标准流位置， 压盖效果更彻底， 实际工作中， 常见的是 绝对定位制作压盖。
定位的元素不区分定位类型， 都会去压盖标准流或浮动的元素。
如果都是定位的元素， 在 HTML 中 后写定位压盖先写的定位 。
更改定位的元素的压盖顺序， 设置一个 z-index 属性。
属性值： 数字。
CSS什么是样式表
CSS是Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
你可能对CSS这个名词比较陌生，实际上无论你用Internet Explorer还是
Netscape Navigator在网上冲浪，几乎随时都在与CSS打交道，在网上没有使用过CSS的网页可能不好找。不管你用什么工
具软件制作网页，都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼，为什么同样内容的网页，有的人做出来有
几十KB，而高手做出来只有十几KB，CSS在其中的作用是不言而喻的。我把我在使用CSS中的一些小经验以及一些网友来信
提问的问题整理出来，供诸位参考。
1、CSS在网页制作中一般有三种方式的用法，那么具体在使用时该采用哪种用法？
当有多个网页要用到的CSS，采用外连CSS文件的方式，这样网页的代码大大减少，修改起来非常方便；只在单个网页
中使用的CSS，采用文档头部方式；只有在一个网页一、两个地方才用到的CSS，采用行内插入方式。
2、CSS的三种用法在一个网页中要以混用吗？
三种用法可以混用，且不会造成混乱。这就是它为什么称之为“层叠样式表”的原因，浏览器在显示网页时是这样处
理的：先检查有没有行内插入式CSS，有就执行了，针对本句的其它CSS就不去管它了；其次检查头部方式的CSS，有就执行
了；在前两者都没有的情况下再检查外连文件方式的CSS。因此可看出，三种CSS的执行优先级是：行内插入式、头部方
式、外连文件方式。
3、在Dreamweaver3中如何使外部文件式CSS？
在Dreamweaver3中使用外连文件式CSS并没有特殊要求，同样是用记事本创建一个*.css文件，在网页的<head>与
</head>之间加上一句这样的代码：<link rel="stylesheet" href="在这里填上你的CSS文件地址（相对路径+文件
名）" type="text/css">就行了。
4、如何用Dreamweaver3快速创建CSS外连式文件？
对于一个初接触CSS的网页设计人员来讲，要用记事之类的编辑器，去创建一个CSS外连式文件是相当困难的。由于
Dreamweaver3对CSS支持的很好，用它来帮助就轻松多了。具体可以这样操作：
1）先在纸上写好在网站的网页中可能要用到的格名称，然后在Dreamweaver3的编辑窗中调出CSS面板，一个一个地定
义，并在一个空白页上适当地写一点相关内容，边定义边试用，效果不满意，立即修改；
2）全部定义好后，再用记事本创建一个空的CSS外连式文件，把在<head>与</head>之间的那段定义好的CSS复制
到CSS文件中去，就大功告成了。整个过程就是点鼠标，方便吧？
5、在Dreamweaver3中采用行内插入式CSS要手动写代码吗？
不用！先用CSS面板定义好要用的CSS，然后，在要插入CSS的标记插入：style=""，再把你刚才定义的CSS从<head>
后面拖到这个双引号中来，把花括号以外的部分删去就行了。
6、在方档头部方式和外连文件方式的CSS中都有“<!--”和“-->”，好象没什么用，不要可以吗？
这一对东东的作用是为了不引起低版本浏览器的错误。如果某个执行此页面的浏览器不支持CSS，它将忽略其中的内
容。虽然现在使用不支持CSS浏览器的人已很少了，由于互联网上几乎什么可能都会发生，所以还是留着为妙。
7、如何给一部分文字加背景色？
给文字加上不同颜色，在DW3中只要在属性面板上选取文字的颜色就行了，非常方便，但要给部分文字加不同的背景色
却没有相应的功能，我们可以先做一个定义背景色的CSS（如：bgstyle），在DW3中点几下鼠就完成了。如一个定义淡黄色
背景的CSS是这样的：
<style type="text/css">
<!--
.bgstyle { background: #FFFFCC}
-->
</style>
在要用时选取那段文字，再在CSS面板上点一下“bgstyle”就行了。
8、如何给部分文字加背景图像？
与加背景色操作类似，中是在背景在选择加载图象就是了，一个定义好的加背景图象的CSS例子的代码是这样的：
<style type="text/css">
<!--
.imgbgstyle { background-image: url(/logo.gif)}
-->
</style>
在要用时选取那段文字，再在CSS面板上点一下“imgbgstyle”就行了。
9、如何使页面的背景在文字“滚动”时背景图案静止不动？
要使背景图案不随文字“滚动”的CSS是这样的：
<style type="text/css">
<!--
BODY { background: purple url(/bg.jpg)
background-repeat:repeat-y
background-attachment:fixed
}
-->
</style>
10、如何定义字间距？
在DW3中CSS的属性定义对话框（style Definition for .style1)的“Block”上的“letter spaceing”属性定义的就
是字间距，它指的是每一个字符之间的额外间距，经长度为单位，正负值均可，当取负值时产生字符挤在一起的效果。下
面代码是一个定义好的字间距CSS例子：
<style type="text/css">
<!--
.style1 { letter-spacing: 3px}
-->
</style>
11、如何给文字加上划线、下划线、删除线和闪烁？
在DW3中CSS的属性定义对话框(style Definition for .style1)的“Type”上的“decoration”属性定义的就是这些
内容，要注意的是闪烁属性有些版本的浏览器不支持，少用为好。下面是一个定义好上述效果的CSS例子：
<style type="text/css">
<!--
.style1 { text-decoration: underline overline line-through blink}
-->
</style>
其中： “underline”是定义下划线；“overline ”是定义上划线；“ line-through”定义的是删除线；“blink”
定义的是文字闪烁。
12、如何使网页具有“首行缩进”功能？
由于DW3输入空格不方便，利用“首行缩进”将弥补这个不足。在DW3中CSS的属性定义对话框（style Definition
for .style1)的“Block”上的“text-indent”属性定义的就是“首行缩进”，所谓“首行”是指每段内容的第一行，也
就是直接按回车键就形成了一个新的段落。缩进最好以“em”（字符）为单位，比如：汉字编排要求每段开始缩进两个汉
字，设置好的CSS如下所示：
<style type="text/css">
<!--
.style1 { text-indent: 2em}
-->
</style>
在DW3要注意：在DW3中CSS的属性定义对话框（style Definition for .style1)的“Block”上的“text-indent”右
面的缩进单位选择框中“ems”指的就是“em”。
13、在用表格进行排版时，能使某一方向上的内容离开表格线一点吗？
可以！在DW3中CSS的属性定义对话框（style Definition for .style1)的“Box”上的“margin”定义的就是内容离
开边缘的距离，分别可定义四个方向：“top”“bottom”“left”“right”。下面就是定义在左边离开“10px”的CSS例
子代码：
<style type="text/css">
<!--
.style1 { margin: 0px 0px 0px 10px}
-->
</style>
14、能给某部分内容加边框吗？
用CSS可以给某部分内容加边框，在DW3中CSS的属性定义对话框（style Definition for .style1)的“Border”定义
的就是边框线，“top”“bottom”“left”“right”四边可分别定义线的粗细和颜色，这些定义好后不要忘记在下面的
“style”中定义线型，否则将看不边框线，因为默认的线型是“none”。下面是一个定义了上边框为：蓝色细线；左边框
为：绿色中粗线的CSS例子：
<style type="text/css">
<!--
.style1 { border: solidborder-width: thin 0px 0px mediumborder-color: #0000FF black black #00FF00}
-->
粗细font-weight
设置文字是否加粗显示 。 有两种类型 ：单词类型、数字类型
单词类型 | 属性值 | 说明
| normal | 默认值，定义批准的字体
| bold | 定义粗体字符 ，b strong标签 的默认值
| bolder | 定义更粗的字体
| ligher | 定义更细的字体
数字类型 100-900之间的整百数字。数字越大文字显示越粗。 400==normal 700==bold
字体风格font-style
设置字体是否斜体显示。
| 属性值 | 说明
|normal | 设置正规的字体 ， 大多是标签的默认值
| italic | 设置斜体的文字 ，主要针对英文，要求英文以字体中的斜体样式显示
| oblique | 设置斜体的文字 ， 只是将文字倾斜显示 ， 与字体无关
**行高 line-height **
设置的是一行文字实际占有的高度，文字字号在行高中是垂直居中的。
| px 像素值 | 设置的行高的具体像素值
| 百分比数值 | 设置的本身字号像素值的百分比
字体综合font
1.字号 、 字体
2.字号 /行高 、字体重点是字号和行高之间使用 /
3.加粗和斜 体两个值之间可以互 换位置 、 字号、行高、字体不能更改位置。
水平对齐text-align
设置文本水平方向的对齐
| 属性名 | 作用 |
| left | 居中对齐，大部分标签的默认值
| center | 居中对齐
|right| 居右对齐
文本修饰 text-decoration
设置文本整体是否有线条的修饰效果
| 属性名 | 作用 |
| none| 没有修饰， 大部分标签的默认值
| overline | 上划线
| line-through | 中划线，删除线<del>标签的默认值
| underline | 下划线，<a>标签的默认值
**缩进 text-indent **
设置段落首行是否进行缩进
| px 单位 | 表示首行缩进多少像素
| em单位 | 首行缩进几个中文字符的位置
| 百分比 | 表示缩进文字所在标签的父级标签width 属性值的百分比
书写元素内容区域 width+height
盒子可以实体化的区域 width + height + padding + border
盒子实际占位的位置width + height + padding + border + margin
宽度width 高度height
设置可以添加元素内容的区域的宽度
| auto | 默认值，浏览器可计算出实际的宽度
| px | 像素值定义的宽度
| % | 定义参考父元素宽度width 的百分比宽度
内边距padding 、 外边距margin
内边距padding：设置的是元素的边框内部到宽高区域之间的距离。
外边距margin： 设置的是盒子与盒子之间的距离。
四值法 上右下左 padding : 10px 20px 30px 40px
三值法 上 左右 下
二值法 上下 左右
单值法 四个值相同
边框border
设置的是内边距外面的边界区域 作为盒子的实体化的最外层
border ：“宽度 线 颜色 “
border-style | 属性值 | 说明
| none | 定义无边框
| solid | 定义实线
| dashed | 定义虚线 在大多数浏览器中呈现为实线
| dotted | 定义点状边框，在大多数浏览器中呈现为实线
| double | 定义为双线，双线的边框的宽度等于 border-width的值
| groove | 定义3D凹槽边框，其效果取决于border-color 的值
| ridge| 定义3D垄装边框，其效果区域于border-color 的值
| inset| 定义3D内容凹陷效果，其效果取决于border-color 的值
| outset | 定义3D内容凸出效果，其效果取决于border-coloe 的值
清除默认样式
1.大部分容器标签都有默认边距，要么用标签选择器的并集方式，要么通配符清除。
2.<ul>和<li>两种列表有默认的列表前缀，清除list-style属性
3.<a>标签的默认样式，顺带设置页面中常用的a的公共样式：color和text-decorstion
4.清除默认加粗效果:设置font-weight
父子盒模型
父元素的width >= 所有子元素width + padding + border + margin
margin塌陷现象
margin塌陷现象：在垂直方向如果有两个元素的外边距有相遇的，浏览器中加载的 真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到 了边距值大的值内部
同级元素塌陷： 大的margin吃掉小的
标准文档流：指得是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排版方式。前面内容发生了变化，后面的内容位置也会随着发生变化
微观现象
1.空白折叠现象。
2.文字类的元素如果排在一行会出现一种高低不齐、底边对齐效果。
3.自动换行，元素内一行内容写满元素的width时会自动进行换行。[图片上传失败...(image-5327c1-1604048626452)]
元素等级
块级元素：大部分容器级标签包括p标签都是块级元素，比如div,h1-h6,p,pre,ul,ol,li,form,table,label
行内元素：大部分的文本及标签比如 a,span，i（斜体）,em（强调）,sub(下标)，sup（上标） 等。
行内块元素： (img，button,input，textarea,select), img等
显示模式display
display 属性更改的显示模式并没有改变标准流本质性质
| 属性值 |作用
|block|表示元素要以块级元素模式加载，具备块级特点
|inline|表示元素要以行内元素模式加载，具备行内特点
|inline-block| 表示标签及行内块模式加载，具备行内块特点
|none| 表示标签及内容直接隐藏，让出原有标准流的位置
脱离标准流
标签元素脱离标准流的方法包括：浮动、绝对定位、固定定位
浮动定义
1.浮动 (float)：让元素脱离标准流，同一级的浮动的元素可以并排在一排显示
float : right / left
浮动的问题二：父元素没有高度，会影响后面元素的标准流位置，如果福哦的那个的子元素足够高，有可能影响到后面浮动的贴边。
[图片上传失败...(image-7923f-1604048626452)]
清除浮动方法
清除浮动一：给标准流的父元素强制给一个合适的高度height
解决：浮动元素影响后面元素标准流位置和贴边。
问题：父元素不能高度自适应，后面父元素之间如果有margin效果不正确。
清除浮动五：溢出隐藏
overflow：hidden
总结 如果父元素高度是固定的，建议使用height属性解决
如果父元素告诉需要自适应，建议使用overflow属性解决浮动问题
要想让每个伪类的状态正常加载，书写顺序必须是：访问前link、访问后visited、 鼠标移上hover、鼠标点击active。
-背景颜色 background-color
-背景图片 background-image 属性 url(图片路径)
-背景重复 background-repeat
| repeat | 重复，默认属性值，表示会使用背景重复加载填满整个盒子背景区域
| no-repeat| 不重复，不论背景图是否大于盒子范围，都只加载依次图片
| repeat-x | 水平重复，使用背景图片水平重复加载铺满第一行，垂直方向不重复
| repeat-y | 垂直重复，使用背景图片垂直重复加载铺满第一列，水平方向不重复
-背景定位 background-position 主要用于设置 不重复 的图片在背景区域的加载开始位置
单词表示法 水平方向可选单词：left、center、right
垂直方向可选单词：top、center、bottom
像素表示法 水平 垂直 border以内的
百分比表示法 100%代表的数值
水平方向，等价于盒子的border以内的背景区域宽度减去图片的宽度。
垂直方向，等价于盒子的border以内的背景区域高度减去图片的高度。
-背景附着 background-attachment
| scroll | 滚动的，表示背景图片与盒子保持相对位置不变，随着页面的滚动而滚走
| fixed| 固定的，背景图的定位的参考点从盒子border，以内的左上顶点变为了浏览器窗口的左 上顶点，页面滚动时，浏览器窗口的左上顶点是不变的，导致背景图固定在浏览器窗口 的某个位置，不会随着页面滚动而滚走
background 属性可以将五个单一属性的值进行合写。 属性值：可以有 1-5 个属性值，值之间用空格进行分隔，背景定位的两个属性值算作 一个属性值，不能被分开也不能颠倒顺序。五个属性值之间可以互换位置。
-背景缩放background-size 设置<img>的尺寸
| px值| 1-2个像素值，只设置1个值，垂直方向等比例拉伸；设置2个值，按照设置值 加载
| 百分比 | 同像素值设置方法相同，设置百分比时，数值参照盒子的宽、高属性
| cover| 自动调整缩放比例，把背景图像扩展至足够大，以使背景图像完全覆盖背景区 域。如有溢出部分则会被隐藏。
| contain | 自动调整缩放比例，把图像图像扩展至最大尺寸，保证图片始终完整显示在背 景区域
-相对定位 relative
相对定位的元素不能脱离标签的原始状态(标准流、浮动),不会让出原来占有的位置
-绝对定位 absolute 脱离标准文档流
子绝父相 、 子绝父绝 、 子绝父固
-固定定位 fixed 脱离标准文档流
-压盖顺序 z-index
HTML5
[图片上传失败...(image-974217-1604048626452)]
<audio>音频标签 ogg mpeg wav
| 属性 | 值 |描述
| autoplay| autoplay| 如果出现该属性，则音频在就绪后马上播放
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮
| loop |loop | 如果出现该属性，则每当音频结束时重新开始播放。
| preload | preload | 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
| src | url|要播放的音频的 URL。
<video>视频标签 ogg mp4 webm
[图片上传失败...(image-361a85-1604048626452)]
| 属性 | 值 |描述
|autoplay | autoplay | 视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）
| controls | controls | 向用户显示播放控件
| loop | loop|放完是否继续播放该视频，循环播放
| preload | auto |（预先加载视频）
none（不应加载视频） 规定是否预加载视频(如果有了autoplay 就忽略该属性）
| src | url | 视频url地址
|width |pixels(像素) |设置播放器宽度
| height | pixels(像素) |设置播放器高度
| poster| Imgurl | 加载等待的画面图片
|muted |muted| 静音播放
属性值 描述
type="email" 限制用户输入必须为Email类型
type="url" 限制用户输入必须为URL类型
type="date" 限制用户输入必须为日期类型
type="time" 限制用户输入必须为时间类型
type="month" 限制用户输入必须为月类型
type="week" 限制用户输入必须为周类型
type="number" 限制用户输入必须为数字类型
type="range"滑动条
type="tel" 手机号码
type="search" 搜索框
type="color" 生成一个颜色选择表单
<datalist>标签
• <datalist>标签规定了 <input>元素可能的选项列表。
• <datalist>元素包含了一组<option>元素，这些元素表示预定义可选值，在<input>元素输入
过程中，会自动响应<option>元素的值。
• 绑定的<input>标签必须设置 list 属性，属性值等于<datalist>标签的 id 属性值。
新增表单属性
属性 值 描述
required required 表单拥有该属性表示其内容不能为空，必填
placeholder提示文本表单的提示信息，存在默认值将不显示
autofocus autofocus 自动聚焦属性，页面加载完成自动聚焦到指定表单，一般页面中放1个
autocomplete off / on当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填 写的选项。
默认已经打开，如 autocomplete=”on “
关闭 autocomplete =”off”
-需要放在表单内同时加上name属性
-同时成功提交
multiple multiple 可以多选文件提交
CSS3
子级选择器
子级选择器用于选取带有特定父元素的元素 书写语法element1>element2
[图片上传失败...(image-bb266d-1604048626452)]
兄弟选择器
--相邻兄弟选择器 用于选择 紧接 在另一个元素后的兄弟元素，而且二者有相同的父元素。
| element1+element2 | 匹同一个父元素中紧跟在element1后面的一个element2元素
--其他兄弟选择器 匹配同一个父元素中在element1后面的 所有 element2元素
| elemenet~element2 | 匹配同一个父元素中elemenet1后面的所有element2元素
E:first-of-type 指定类型E的第一个
E:last-of-type 指定类型E的最后一个
E:nth-of-type(n) 指定类型E的第n个 这个是元素的第几个在元素下选取
属性选择器
E[att] 选择具有att属性的E元素
E[att="val"] 选择具有att属性且属性值等于val的E元素
E[att^="val"] 匹配具有att属性、且值以val开头的E元素
E[att$="val"] 匹配具有att属性、且值以val结尾的E元素
E[att*="val"] 匹配具有att属性、且值中含有val的E元素
box-sizing属性
content-box 标准模式 盒子总体大小为 width(height) + padding + border
border-box 怪异模式盒子总体大小为 width 和 height
[图片上传失败...(image-cdef05-1604048626452)]
文字阴影text-shadow
|属性值 |简介
|h-shadow |必需。水平阴影的位置。允许负值。
|v-shadow |必需。垂直阴影的位置。允许负值。
| blur |可选。模糊的距离。
|color |可选。阴影的颜色。
--transition-property过渡的属性
• none 表示没有属性过渡
• all 表示所有变化的属性都过渡
• 属性名 使用具体的属性名，多个属性名中间逗号分隔
--时间
以秒为单位 0s必须加单位
--transition-timing-function 时间曲线
对元素进行移动、缩放、旋转、拉长或拉伸。配合过渡和即将学习的动画知识，可 以取代大量之前只能靠Flash才可以实现的效果。
位移translate()
translate(x,y)x,y分别为水平和垂直方向位移的距离，可以为px值或百分比， 区分正负
translate(x) 只有一个数值，表示水平方向的位移
translate(y) 只有一个数值，表示垂直方向的位移
缩放 scale()
值 说明
scale(x, y)x,y分别为改变元素的宽度和高度的倍数
scale(n) 只有一个值，表示宽度和高度同时缩放n倍
scaleX(n) 改变元素的宽度
scaleY(n) 改变元素的高度
旋转 rotate(deg)
deg为度数单位，正数表示顺时针旋转，负数表示逆时针旋转
倾斜 skew()
transform: skew(数字deg,数字deg)
两个属性值分别表示水平和垂直方向倾斜的角度，属性值可以为正可以为负，第二个 数值不写默认为0
transform-origin 属性
设置调整元素的水平和垂直方向原点的位置
x 定义 X 轴的原点在何处。可能的值：left 、center、right、像素值、百分比
y 定义 Y 轴的原点在何处。可能的值：top、center、bottom、像素值、百分比
[图片上传失败...(image-ac107d-1604048626452)]
透视属性 perspective
作用：设置在 z 轴的视线焦点的观察位置，从而实现 3D 查看效果。
属性值：像素值，数值越大，观察点距离 z 轴原点越远，图形效果越完整且接近原始尺寸。 注意：透视属性需要设置给 3D 变化元素的父级
3D 旋转
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
[图片上传失败...(image-e781c5-1604048626452)]
3D 位移
translateX(x)设置 X 轴的位移值。
translateY(y)设置 Y 轴的位移值。
translateZ(z)定义3D位移，设置Z轴的位移值。
属性值为像素值或百分比，正负表示位移的方向。正值向对应轴的正方向移动，负值向对应 轴的负方向移动。
transform-style属性
用于设置被嵌套的子元素在父元素的 3D 空间中显示，子元素会保留自己的 3D 转换坐标轴。
属性值：
flat：所有子元素在 2D 平面呈现
preserve-3d：保留 3D 空间
浏览器兼容
Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
Chrome 和 Safari 需要前缀 -webkit-。
Internet Explorer 9 需要前缀 -ms-。
