1.html
实体
网页中需要些特殊符号，使用html中的实体，语法为: &实体名字；
例如：
> <
meta标签：
description：用于指定网站的描述，显示在结果页面
http-equiv：用于重定向，时间+网址
语义化标签
长引用，短引用
块元素和行内元素
块元素中可以放任何东西（
内什么都不能放）
行内元素是不可以使用width和height来设置
我们可以使用display来设置元素显示的类型：
inline表示将元素设置为行内元素
block表示将元素设置为块元素
inline-block（尽量不用）表示将元素设置为行内块元素，可以设置宽高但是不会独占一行
none元素不在页面中显示
visiblity用来设置元素的显示状态
visible默认值，元素在页面中正常显示
hidden元素在页面中隐藏，不显示，但是依旧占据位置
列表
无序列表
有序列表
自定义列表
list-style:设置样式
超链接
其中的href属性为跳转路径，如果设置为#，返回顶部。href="#"
如果设置了id属性，那么我们可以在href中设置：#目标元素id值，进行跳转
动href="javascript:;"表示一个空的跳转，也就是什么都不懂
target属性：打开超链接的方式，_self在当前页面打开,_blank新页面打开
路径：
./当前文件所在目录 ../表示上级目录
图片标签
这是一个替换元素。
src：路径，alt：显示不出来就显示alt中文字，并且搜索引擎根据alt中的内容来识别图片
内联框架
用于向当前页面中引入一个其他页面,网页中嵌套网页
src：指定要引入的网页的路径
frameborder：边框
音视频
音视频文件引入时，默认情况下不允许用户控制
替换元素，src，source都是指明地址，source可以指定失败时的文字，可以多版本文件选择，兼容性更好。
controls：允许用户控制，autoplay：设置自动播放，loop：循环播放
替换元素，src
表格table
tr表示一行
td表示单元格
td，可以使用vertical-align和text-align修改td中内容的位置
colspan：横向合并单元格，例如
rowspan：纵向合并单元格
表格同样可以分为三个部分：thead，tbody，tfoot
如果表格中没哟砽tbody而是直接使用了tr，那么浏览器会自动创建一个tbody，并且将tr全部放到tbody中
tr不是table的子元素，而是tbody的子元素。
border-spacing：指定边框之间的距离
border-collapse：设置边框的合并
表单form
属性：action：需要提交的地址
input：text文本框，submit提交按钮，password密码框
提交必须要有一个name
单选按钮type=“radio”，必须是相同的name属性，checked默认选中
多选框type=“checkbox”，
下拉选项：select，option
自动补全：autocomplate=“off”
只读数据会提交：readonly 禁止数据不会提交 disabled
自动获取焦点：autofocus
CSS
设置样式：
0.通常情况下我们需要去除浏览器的默认样式，
*{margin：0；padding：0；}
1.通过标签内style属性来设置元素样式---内联样式表
例如：style="color:red;font-size:60px"
2.写到head中的中的标签---内部样式表
div{内容}
3.样式编写到css文件中---外部样式表
在head中连接到外部样式表
例如：
编写到外部文件，可以使用浏览器的缓存机制，加快网页的加载速度，提高用户体验。
语法：
注释：/**/
选择器 声明块（名：值；）
选择器：
单个选择器：
元素选择器：直接把元素名写下来即可
id选择器：语法：#id属性值 { }
class选择器：语法：.class属性值{ }，多个class可以使用空格隔开
通配选择器：* { }
复合选择器：
交集选择器：语法：选择器1选择器2选择器3 { }
如果有元素选择器，必须使用其开头
并集选择器：选多个选择器
语法：选择器1，选择器2，选择器3 { }
父子兄弟选择器：
子元素选择器：语法：父元素>子元素
注意只能隔一代，孙子元素不行
后代元素选择器：语法：祖先 （空格）后代
既可以隔一代也可以多代，选择的是全部
兄弟元素选择器
选下一个兄弟 语法：前一个+后一个
选下边所有的兄弟 语法：前一个~后面所有
属性选择器
语法：【属性名】选择含有指定属性的元素
【属性名=属性值】选择含有指定属性和属性值的元素
【属性名^=属性值】选择属性值和指定值开头的元素
【属性名$=属性值】选择属性值和指定值开头的结尾
【属性名*=属性值】选择属性值中含有指定值的
伪类选择器：
不固定的元素可以使用伪类标签添加样式
开头第一个元素： ：first-child 例如：ul>li:first-child{}
最后一个元素： ：last-child
第n个子元素： ：nth-child(n) 如果写n表示全选，2n表示选中偶数，2n+1为基数
odd表示奇数，even表示偶数
以上这些伪类都是根据所有的子元素排序，如下例子第一个为span，所以如果我们设置ul>li:first-child{}就无效。因为没有第一个li
如果需要在相同类型元素中排序我们可以使用,用下述伪类选择器就可以忽略掉上栗中的span。
:first-of-type :last-of -type :nth-of-type
否定伪类：
：not（）将符合条件的元素从选择器中去除，如下例子：除了第三个元素都设置为绿色
超链接伪类：
：link用来表示正常的链接（不论是否访问过）
：visited用来表示访问过的链接，由于隐私的问题，所以visited伪类只能修改链接的颜色
：hover用来表示鼠标移入的状态，悬停状态
：active用来表示鼠标点击，正在点击
伪元素选择器：
表示页面中特殊的位置。使用：：例如选择第一个字母：p：：first-letter{}
：：first-letter 第一个字母
：：first-line 第一行
：：selection 表示选中的内容（鼠标选中内容）
：：before 元素的开始
：：after 元素的结束，这两个必须结合content属性使用，并且鼠标无法选中
例如：
权重
继承
单位
字体：
px：像素
em：相对于当前字体大小
rem：相对于当前html字体大小
颜色：
文档流
网页是多层结构，通过css为每个层设置样式，用户只看得到最上面一层，最下层称之为文档流，是网页的基础。我们所创建的元素都在默认在文档流中排列的
对我们来说元素共有两种状态：在文档流中，不在文档流中
元素在文档流中的特点：
块元素：独占一行，默认宽度是父元素的全部（会把父元素撑满），默认高度被内容撑开
行内元素：不会独占一行，只占自身大小，行内元素在页面中从左向右排列，如果一行中没法容纳所有元素，换到第二行自左向右排列。
盒子模型
可见框：content+padding+border
content：内容区 ，使用height，width设置长宽
padding：内边距，会影响到盒子大小，背景颜色会延伸到内边距上
border：边框：要设置边框，需要至少设置三个样式
border-width:其中还有border-xxx-width可以设定上下左右，缺省3px
border-color:同上，缺省黑色
border-style:缺省为none
margin：外边距，可以写负值，影响到盒子的实际占地大小
水平方向布局
width,,margin-left,margin-right可以设置为auto，auto的值会自动调整auto使等式成立
如果没有设置auto就自动调整margin-right来使等式满足
如果将一个宽度和一个外面距设置为auto，则宽度会调整到最大
如果三个值都设置为auto，则外边距都是0，宽度最大
如果将两个外边距设置为auto，跨度固定那么居中
垂直方向布局
如果子元素大小超过了父元素，那么子元素会从父元素中移除
我们可以使用overflow属性来设置父元素如何处理溢出的子元素
overflow：visible，缺省，hidden，scroll，auto
同时还有overflow-x,overflow-y
同时这个还可以用来设置BFC
外边距的折叠问题
相邻的垂直方向外边距会发生重叠现象
兄弟元素：兄弟元素之间的响铃外边距会取两者之间绝对值较大的
父子元素：父子之间的相邻外边距，子元素的会传递给父元素（上外边距）
会影响到布局，需要处理
行内元素的盒模型
行内元素不支持设置宽度和高度
行内元素可以设置padding，但是垂直方向padding不会影响页面的布局
行内元素可以设置border，垂直方向不影响
行内元素可以设置margin，垂直方向不会影响布局
这里说的不影响是指不会把其他垂直方向的元素挤到其他位置，而是会覆盖
盒子的大小
默认情况下，盒子可见框的大小由内容区决定，内边距和边框共同决定的
我们可以通过设置box-sizeing来设置盒子尺寸的计算方式（设置width和height的作用）
当我们设置为content-box时：缺省，宽高设置内容区
当我们设置为border-box时：宽高设置整个盒子可见框
border样式
border：会影响格式
outline：不会影响布局，设置轮廓线
我们可以设置阴影：不会影响布局使用box-shadow
box-shadow：左偏移量 右偏移量 模糊半径 颜色；
我们可以设置圆角，使用border-radius,参数是设置半径大小
同样可以设置椭圆，设置两个参数，第一个为x轴，第二个为y轴
这个时候需要使用/来设置椭圆
设置圆形：border-radius：50%；
浮动
通过浮动可以使一个元素向父元素的左右移动使用float设置
none：缺省，元素不浮动
left：元素向左移动
right：右浮动
这个时候我们的元素已经脱离了文档流，我们之前的等式不需要绝对成立。
浮动元素不会覆盖文字，文字会自动环绕在浮动元素周围，可以用作文字环绕图片的效果 。
元素脱离文档流之后元素的特点会发生变化。
元素脱离文档流之后元素的特点会发生变化。
块元素：
1.块元素不再独占一行
2.脱离文档流之后，块元素的宽高和高度默认都被内容撑开
行内元素：
1.行内元素脱离文档流之后变成块元素，特点同上
高度塌陷：
父元素的高度默认被子元素撑开，当子元素浮动之后，脱离文档流，无法撑起父元素的高度，导致父元素高度丢失。
解决方法（BFC）：Block Formatting Context 块级格式化环境
是css中的一个隐含属性，可以为一个元素开启BFC,开启BFC钙元素会变成一个独立的布局区域。和其他块不同。
开启后特点：1.元素不会被浮动元素覆盖
2.元素子元素和父元素外边距不会重叠
3. 元素可以包含浮动的子元素
开启BFC方式：设置浮动（不推荐），
将元素设置为行内块元素（不推荐）
将元素的overflow设置为非visible的值（常用）
overflow：hidden
方法2：after伪类选择器
原理：在结尾使用一个div，并且设置clear：both来消除浮动元素的影响。例如
但是这样不好。因为我们使用html来修改了我们的样式，增加了耦合，不符合理念。但是我们有伪类选择器，我们可以选择到这个元素的最后也就是box1：：after
可是这样并不能解决问题，因为：：after是一个行内元素，所以清除浮动没有任何影响，我们需要把它设置为一个块元素，所以最终方案就是：
类似的我们可以用来解决外边距重叠问题
父元素共享了子元素的margin，如果子元素设置了margin我们父元素同样会跟着子元素漂移，所以我们可以按照上述思想来解决问题，外边距重叠如下所示：
我们在box1和box2中设置一个东西撑开接口实现我们想要的效果，这个时候我们需要使用到的就是before伪类选择器，我们display设置为table可以避免出现设置为inline-block（直接当成一个字）时会出现的跳出一段距离的问题。
clearfix
直接在需要的地方添加上clearfix类即可，直接设置为table可以同时解决两个问题
Clear
用过clear属性来去除浮动元素对当前元素的影响，left：清除左边浮动元素对当前元素的一下昂，right：清除右边的影响，both：清除两侧中最大影响的那侧。设置需要清除影响的元素，而不是浮动的元素。
原理：设置清除之后，浏览器会自动为元素设置一个上外边距，一遍其位置不受其他元素影响
定位
是一种更高级的布局方式，可以把元素摆到任意位置，使用position属性来定位
可选值： static缺省，元素是静止的没有开启定位
relative相对定位
absolute绝对定位
fixed固定定位
sticky粘滞定位
偏移量（只有开启定位了才可以使用偏移量）：
top：定位元素和定位位置上边的距离
bottom：定位元素和定位位置下边的距离
left：定位元素距离定位位置左侧的距离
right：定位元素距离定位位置右侧的距离
相对定位
开启相对定位之后如果不设置偏移量，元素不会发生任何变化。
相对定位是参照于文档流中元素本身的位置，这个操作不会使元素脱离文档流，同样也不会改变元素性质，块开始块，行内还是行内。
相对定位会提升元素的层级
绝对定位
开启绝对定位之后，如果不设置偏移量元素位置不会改变。
元素会从文档流中脱离，绝对定位会改变元素的性质。行内编程块，块的宽高被内容撑开。
绝对定位会提高元素层级。
绝对定位元素是相对于其包含块进行定位的。也就是最近的开启了定位的祖先元素。
水平方向上的布局等式需要添加left和right两个值规则和之前一样。
当出现了过度约束，如果没有auto则自动调整right，如果有auto则自动调整auto元素。left和right默认值是auto。
垂直方向上的布局等式同样要满足。
所以我们可以通过绝对定位设置正中心
包含块（containing clock）
正常情况下：就是当前元素的最近的祖先元素，没有脱离文档流的情况下
开启绝对定位情况下：包含块就是离他最近的开启了定位的祖先元素。
html，根元素，初始包含块。
固定定位
也是一种绝对定位。
唯一不同的是，固定定位永远参考与浏览器的视口（不论浏览器是否有滚动都不动）
粘滞定位（兼容性差）
和相对定位特点基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定
当到0的位置的时候就固定不动。
元素层级
只要是定位层级就是一样的。
祖先元素的层级再高也不会盖住后代。
对于开启了定位的元素，可以只用z-index来设置元素层级，z-index需要一个整数作为参数，越大层级越高。有限显示靠下的。
字体族
color：用来设置字体颜色
font-size：字体大小
font-family：字体族（字体格式）可选值：serif衬线字体 sans-serif非衬线字体 monospace等宽字体
可以指定多个字体，使用逗号隔开，优先前面的字体生效。
图标字体（iconfont）
网页中经常需要使用一些图标，但是使用图片来引用图标，不灵活而且图片本身就较大。所以我们可以在使用图标的时候，将图标直接设置为字体，然后通过font-face来引入。
国外图标字体：font awesome
注意css和webfonts需要在同一级目录下
通过伪元素设置图标字体，在content中设置字体编码，
行高（line-height）
行高指的是文字战友的实际高度，可以通过line-height来指定行高，行高可以指定一个大小（px，em）也可以指定一个整数。如果是整数，意味着行高是字体的指定倍数。默认行高1.33。行高还经常用来设置文字行间距。
字体框
字体框就是字体的格子，设置font-size就是设置字体框的大小
解决图片底部有空白问题
默认情况下会有空白
解决方法：vertical-align
文本
text-align：文本的水平对齐
left，right，center，justify两端对齐
vertical-align：文本的垂直对齐
baseline，top，bottom，middle，直接设置值
text-decoration：设置文本修饰
none，underline，line-through，overline
white-space：设置网页如何处理空白
normal，nowrap不换行，pre保留空白，就是保留格式
案例：如何设置多余内容使用省略号展示？
案例：下拉框显示案例：p86
背景
background-image：url("");
background-repeat：repeat，repeat-x，repeat-y，no-repeat
background-position：top，left，right，bottom，center，需要指定两个值，不然第二个值默认center
同样可以通过偏移量设定背景图片，水平方向，垂直方向
background-clip：border-box：默认值，背景会出现在边框下面
padding-box：背景不会出现在边框，只出现在内容区和内边距
content-box：只出现在内容区
background-origin：边距图片的偏移量计算的原点
padding-box：默认值，background-position从内边距开始计算
ventent-box：背景图片的偏移量从内容区处计算
border-box：偏移量从边框处开始计算
background-size：向这样写可以设置原来尺寸的缩小，如果只写一个，第二个默认值是auto
cover:图片比例不变，将元素铺满
contain：图片比例不变，将图片在元素中完整显示
background-attachment：背景图片是否跟随元素移动
scroll：默认值，背景元素会跟随元素移动
fixed：背景会固定在页面中，将元素在元素中完整显示
background：背景相关的间歇，没有顺序要求，使用/隔开，background-position/background-size
注意，background-origin background-clip，origin要写在clip前面
解决图片闪烁问题（雪碧图）
下图就是一个雪碧图：特点是一次性将多个图片记载到页面中，降低了请求的次数，加快了访问速度，提升了用户体验。
渐变
渐变是图片，需要通过background-image实现
linear-gradient（）线性渐变，颜色沿着一条直线发生变化
可以指定渐变方向： to left,to right, to bottom,to top
也可以使用度数来渐变：XXXdeg
用圈来渐变：Xturn
渐变如果是定多个颜色，多个颜色默认情况下是平均分布，也可以手动指定渐变情况，数字指的是从哪开始渐变。
repeating-linear-gradient（）平铺的线性渐变，这个时候指定渐变情况表示的是一个渐变的范围（如下如所示）
radial-gradient（）径向渐变（放射性效果）
默认情况下，圆心是根据元素形状来计算，同样可以指定径向渐变大小
circle圆，ellipse椭圆，同样可以指定渐变位置（使用at）
过渡transition
通过过渡我们可以指定一个属性发生变化时的切换方式。
transition-preperty：指定要执行的过渡的属性，width，height，颜色，all等大部分都支持过渡。只要值可以计算就可以过渡。注意过渡的时候过渡前后的数值必须要有效。
transition-duration：指定过渡效果的持续时间，s，ms。注意可以分别指定时间。
transition-timing-function：过渡的时序函数，也就是动画的过渡方式
ease：缺省，慢速开始，先加速，后减速
linear：匀速运动
ease-in：加速，ease-out：减速
ase-in-out：先加速后减速
cubic-bezier：贝塞尔曲线，参数是两个点坐标，使用工具
steps：分步执行过渡效果，steps（n），表示分n步执行。
end，start表示在某个时间点的开始还是结束启动。
transition-delay：过渡效果的延迟，就是等待一段时间后执行
动画
自动触发动态效果，设置动画效果，必须要设置一个关键帧，关键帧设置了动画的每一个执行步骤。
animation-name：要对当前元素生效的关键帧名字
animation-duration：动画的执行时间
animation-delay：动画延时
animation-iteration-count：动画执行次数。infinite无限执行
animation-direction：指定动画运行的方向
normal：默认从from到to
reverse：从to到from
alternate：从frome到to，重复执行动画时反向
alternate-reverse：和上面相反
animation-play-state：设置动画的执行状态
running：默认值，执行动画
paused：动画暂停
animation--fill-mode动画的填充方式
none：动画播放完毕，回到原来位置
forwards：动画播放完毕，停止在结束位置
backwards：动画延时等待的时候，元素就会处于from的开始位置
both：结合forwards和backwards
变形 transform
变形的原点
transform-origin
通过css来改变元素的形状和位置，变形不会影响到页面的布局,,不会导致偏离文档流
平移： translateX（）translateY （）translateZ （）
元素居中
z轴平移 translateZ
调整元素在z轴的位置，正常情况下就是调整元素到人眼之间的距离，距离越大，元素离人越近。默认情况不支持透视。如果需要看见效果，必须设置网页的视距才能看到效果。
设置视距举例：perspective：800px；
旋转
通过旋转可以使元素沿着x，y，z旋转指定的角度
rotateX（），rotateY（），rotateZ（）需要指定角度例如45deg
注意如果我们设置了视距，那么就会出现远近的透视效果，如果没设置视距就是简单旋转。
backface-visibility背面是否可见
visible：可见
hidden：不可见
设置3D变形效果
transform-style：preserve-3d
缩放scale
scaleX（），scaleY（），scale（）双方向
弹性盒flex
是css中的另一种布局手段，主要用来替代浮动完成页面的布局
可以使元素具有弹性，让元素随着页面大小改变而改变
弹性容器：
要使用弹性盒，必须要先将一个元素设置为弹性容器
通过display设置
display：flex 设置为块级弹性容器
display：inline-flex 设置为行内弹性容器
弹性容器样式：
flex-direction：指定容器中弹性元素的排列方式
row：缺省，水平排列，同时确定主轴方向，自左向右
row-reverse：反向排列，同时确定主轴方向， 自右向左
column：纵向排列，同时确定主轴方向，自上向下
column-reverse：反向纵向排列，同时确定主轴方向，自下向上
主轴：弹性元素的排列方向成为主轴
侧轴：和主轴垂直方向的成为
flex-wrap：设置弹性元素是否在弹性容器中自动换行
nowrap：缺省，不会自动换行
wrap：沿着侧轴自动换行
wrap-reverse：元素沿着侧轴反向换行
flex-flow：是flex-direction和flex-wrap的简写属性
justify-content：如何分配主轴上的空白空间，就是主轴上的元素如何排列。
flex-start：元素沿着主轴起边排列
flex-end：元素沿着主轴终边排列
center：居中
space-around：空白分布在所有元素的两侧
space-between：空白均匀分布到元素间
space-evenly：空白分布到元素的单侧
元素双方向居中
align-items：元素在侧轴上如何对齐
stretch：缺省，将元素长度设置为相同值。指的是同一行的元素长度相同，如果是不同行会有不同
flex-start：元素不会拉伸，而是侧轴起边对齐
flex-end：沿着福州的终边对齐
center：居中对齐
align-centent：侧轴空白空间分布
center：空白在两边
flex-start：空白在下边
flex-end：空白在上边
space-around：元素两边都有空白
space-between：空白在中间
align-self：用来覆盖当前弹性元素上的align-items
弹性元素：
弹性容器的直接子元素是弹性元素，一个元素可以同时是弹性容器和弹性元素。
弹性元素样式
flex-basis：元素的基础长度
如果主轴是横向的，该值指定的是元素的宽度
如果主轴是纵向的，该值指定的是元素的高度
flex-grow：指定弹性元素的伸展系数，当父元素有多余空间时，子元素的分配方式。默认值是0，父元素的剩余空间，会按照比例分配。
flex-shrink：当父元素中的空间不足以容纳所有元素的时候，对子元素进行收缩。0表示不允许收缩，同样的值越大收缩越多。
flex：综合上述三个样式，顺序要求：flex 增长 缩减 基础
order：决定弹性元素的排列顺序，越大越后
less是css的预处理语言
less是css的增强版，通过less编写更少的代码实现更强大的功能。
less本身是无法直接执行的，需要转换成css才能执行到浏览器中
变量重名时，后面的覆盖前面的