目录
- HTML5
- CSS盒模型
- CSS选择器
- CSS新属性
- CSS预处理器
- 清除浮动
- 隐藏页面元素
- em /px /rem /vh /vw 的区别
- 层叠上下文
- BFC
- 实现元素的垂直水平居中
- 两栏布局，右侧自适应，三栏布局，中间自适应
- 实现透明
- 颜色的写法
- 画一条0.5px的线
- 画一个三角形
- 画一个正方体
- 渐进增强、优雅降级
- 图片的格式
CSS
1.HTML5
1.语义化标签：
head、footer、nav、aside、section、article、dialog、main、figure
2.表单：
类型：input增加了type = color、email、range、number、date、datetime、month、search、url、tel。由于浏览器兼容问题，很多都不适用，一般用ElementUI封装好的
属性：placeholder、maxlength、minlength、require、autofocus、autocomplete
3.多媒体标签：audio、vedio 通过src
4.canvas
5.SVG绘图：xml的2D图形语言，矢量图标 <svg>标签 ，和canvas有点像
6.地理定位：Geolocation
7.拖放API：drag、drop
8.webWorker
9.webStorage:sessionStorage/localStorage:getItem/setItem/removeItem/clear/
10.webSocket
2.CSS盒模型
1.一般说IE8及其以上为W3C盒模型，IE8以下是IE怪异盒模型，不是所有的IE都是IE盒模型
2.页面渲染时，DOM元素所采用的布局模型，可通过box-sizing进行设置，根据width的区别可分为
(1)标准盒模型box-sizing：content-box。width指content部分的宽度
(2)IE盒模型 box-sizing：border-box。width = content + padding + border
3.css盒子包含四部分：内容content、内边距padding、边框border、外边距margin
4.在w3c标准盒模型里，一个块block的总宽度= width + padding + border + margin
5.在IE盒模型里，一个块block的总宽度 = width + margin
3.CSS选择器
1.css选择器常用的有：
1、id选择器
2、类选择器
3、标签选择器
4、后代选择器(
5、子选择器(.class>.childClass)、
6、相邻同胞选择器(.class+.brotherClass)、
7、群组选择器(div,p)
8、伪类选择器(:hover/:focus/:link/:active/:visited/:first-child) CSS3
9、伪元素选择器(:before/:after/:first-letter/:first-line)
10、属性选择器(attribute) CSS3
11、层次选择器(p~ul) CSS3
2.选择器的优先级：
!important > 内联 > ID选择器 > 类选择器 > 标签选择器 > * > 继承 > 默认
3.选择器具有继承属性
4.CSS选择器**解析顺序是从右往左**解析
4.CSS新属性
1、布局：新增flex、grid
2、选择器：新增first-of-type、nth-child
3、盒模型：新增box-sizing，以选择IE的border-box和W3c的content-box
4、动画：新增animation，2d变换，3d变换
5、颜色：新增opacity、rbga
6、字体：嵌入字体、字体阴影
7、媒体查询@media
5.CSS预处理器(SASS/LESS/POSTCSS)
常用功能：嵌套、变量、循环语句、条件语句、自动前缀、单位转换、mixin复用
6.清除浮动
(1)clear：both
(2)创建父级BFC，父级添加display：auto/hidden 属性
(3)父级设置高度
(4)伪元素和IEhack
7.隐藏页面元素的方式
1.display：none
元素在页面彻底消失，元素本身占有的空间会被其他元素占有，导致浏览器的重排和重绘，自身绑定的事件不会触发，也不会有过渡效果。
特点：元素不可见，不占据空间，无法响应点击事件
2.visibility:hidden
DOM结构存在，不会触发重排，但会触发重绘，绑定事件不触发
特点：元素不可见，占据页面空间，无法响应点击事件
3.opacity:0
设置元素透明度为0后是不可见的，DOM结构存在，不引发重绘、重排
特点：改变元素透明度，元素不可见，占据页面空间，可响应点击事件
4.设置height和width模型属性为0
将元素的margin、padding、border、width、height等属性设置为0，若元素内有子元素，则设置overflow：hidden。
特点：元素不可见，不占据空间，无法响应点击事件，DOM不存在
5.position：absolute
将元素移出可视区域
`.hide{position:absolute;top:-9999px;left:-9999px} `
特点：元素不可见，不影响页面布局
6.clip-path
通过裁剪的形式
` .hide{clip-path:polygon(0px 0px 0px 0px 0px 0px 0px 0px)} `
特点：元素不可见，占据页面空间，无法响应点击事件
8.em /px /rem /vh /vw 的区别
1.px 绝对长度单位，页面按精确像素展示
2.em 相对长度单位，继承父级元素的字体大小font-size，若父级元素未设置，则用浏览器默认的字体尺寸16px，即1em=16px，整个页面的1em值不是一个固定的值
3.rem 相对长度单位，相对的只是HTML根元素font-size的值，一般在根元素html上加上html{font-size:62.5%}，之后1rem = 10px。rem集相对大小和绝地大小的优点于一身，故常用。
4.vw 根据窗口的宽度分成100等份，100vw就标识满宽，始终针对窗口的宽，vh针对窗口的高。窗口在PC端指浏览器的可视区域，在移动端指布局视口。%相对于的是父元素，不是窗口。
9.层叠上下文（stacking context）
1.盒模型是三维的，平面画布的x轴、y轴，以及表示层叠的z轴，
2.触发条件：
(1)根元素 <html>本身即根层叠上下文
(2)position属性，非static值，并设置z-index
(3)CSS属性：flex(子元素z-index不为auto)、opacity(不为1)、transform(值不为none)、filter(值不为none)、will-change
3.层叠顺序规则：
(1)在同一层叠上下文中层叠等级才有意义
(2)z-index的优先级最高
(3)具体规则：background < (z-index<0) < block块级元素 < float浮动元素 < inline行内元素 < z-index=0/auto < (z-index>0)
10.BFC
1.BFC(Block Formatting Context)，即块级格式化上下文，是页面中的一块渲染区域。
2.BFC的目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素。
3.BFC有一套属于自己的渲染规则：
1、内部的盒子会在垂直方向上一个接一个的放置
2、对于同一个BFC的两个相邻的盒子的margin会发生重叠，与方向无关
3、每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此，但是BFC的区域不会与float的元素区域重叠
4、计算BFC的高度时，浮动子元素也参与计算
5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
4.BFC的触发条件，包含不限于：
1、根元素，即html元素
2、浮动元素：float值为left、right
3、overflow值不为visible，为auto、hidden、scroll
4、display值为表格布局或弹性布局，如inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
5、绝对定位，position值为absolute、flxed
(1)解决元素间距问题：防止margin重叠(塌陷)，同一个BFC会引发margin重叠
<style>
p{background:#fcc;width:200px;line-heigth:100px;margin:100px;text-algin:center}
.wrap{overflow：hidden}
</style>
<body>
<p>haha</p>
<p>hehe</p>
</body>
根据触发规则1，根元素触发BFC，两个p元素的margin重叠，以最大的margin为准，根据渲染规则1和2，由于同一个BFC两个相邻的盒子的margin会发生重叠，所以解决方案是将p再裹一层容器，形成两个独立的BFC即可。
<div class="wrap">
<p>hehe</p>
</div>
(2)解决元素高度没了的问题：父级形成BFC可清除内部浮动，BFC内部有浮动元素时，可让它参与高度计算
<style>
.par{border:5px solid #fcc;width:300px}
.child{border:5px;width:100px;height:100px;float:left}
</style>
<body>
<div class="par">
<div class=child"></div>
<div class=child"></div>
</div>
</body>
计算par高度时，高度为0，没了，是因为子元素没有参与计算。
解决：让par形成BFC，根据BFC渲染规则5，浮动元素也会参与计算。
解决方案：.par{overflow:hidden}
(3)解决多栏布局不能自适应问题：自适应多栏布局
<style>
body{width:300px;position:relative}
.aside{width:100px;height:100px;float:left;background:#f66;}
.main{height:200px;background:#fcc;}
</style>
<body>
<div class=aside"></div>
<div class=main"></div>
</body>
由于每个元素的左边距与包含块的左边界相接触，所以即使aside为浮动元素，main的左边依然会与包含块的左边相接触
解决：根据BFC的渲染规则3，BFC不会与浮动盒子重叠
解决方案：.main{overflow: hidden}
扩展：
IFC、GFC、FFC
IFC、GFC、FFC实际上都是BFC的细化。
1.IFC(Inline formatting contexts):内联格式上下文
内联盒子的高度由其包含行内元素中最高的实际高度计算而来。
触发：display:inline-block，根据BFC触发规则4
作用：水平居中、垂直居中
2.GFC(GrideLayout formatting contexts):网格布局格式化上下文
形成一个二维表格，拥有丰富的属性，控制行列、对齐
触发：display：grid
作用：二维表格渲染
3.FFC(Flex formatting contexts):自适应格式上下文
形成一个伸缩容器
触发：display：flex/inline-flex
只有谷歌、火狐支持
11.实现元素的垂直水平居中
1、利用定位 + margin：auto（脱离文档流）
(1)父级设置为相对定位position：relative，子级绝对定位posittion：absolute
(2)子级四个定位属性left、right、top、bottom都设置为0
(3)子级设置margin：auto
<style>
.father{width:500px;height:300px;position:relative}
.son{width:100px;height:40px;left:0;top:0;right:0;bottom:0;margin:auto;background:#f66;}
</style>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
2、利用定位 + margin：负值（父元素高度变化仍然可实现，但是子元素宽高必须已知）
(1)父级设置为相对定位position：relative，子级绝对定位posittion：absolute
(2)子级四个定位属性left、top都设置为50%
(3)子级设置margin-left:-(子级宽度的50%)，margin-top：-(子级高度的50%)
3、利用定位 + transform （优点：父元素高度和子元素的宽高都不需要知道）transform：translate(x,y)，x和y表示的是x轴和y轴的值，起点是左上角，scale(n) 放大缩小比例，比如2.0和负值
(1)父级设置为相对定位position：relative，子级绝对定位posittion：absolute
(2)子级四个定位属性left、top都设置为50%
(3)子级设置transform：translate(-50%,-50%)
4、table布局（未脱离文档流） table-cell
其实是BFC/IFC内联格式化上下文的原理
(1)父级设置display:table-cell，子级设置display：inline-block
(2)父级设置vertical-align:middle，text-align:center
5、flex布局（不定高，不定宽，常用）
CSS3中的flex布局
(1)父级设置display:flex
(2)父级设置align-items：center,水平居中
(1)父级设置justify-content: center，垂直居中
6、grid布局（不定高、不定宽，兼容性相对较差）
CSS3中的grid布局
(1)父级设置display:grid
(2)父级设置align-items：center,水平居中
(1)父级设置justify-content: center，垂直居中
12.两栏布局，右侧自适应，三栏布局，中间自适应
1.两栏布局，有边自适应
(1)BFC里float，margin-left
父级添加BFC，即overflow：hidden
左边float，定宽：float:left;width:200px
右边margin-left：210px
(2)flex弹性布局
父级设置display：flex
左边定宽：width：200px
右边：flex：1
2.三栏布局，中间自适应
(1)两边float，中间margin：
父级BFC，设置overflow：hidden，解决高度没有的问题。
左边左浮动，定宽：float：left，width：200px
右边右浮动，定宽：float：right，width：100px
中间margin：margin-left：210px；margin-right：110px
` <div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
</div> `
(2)两边absolute，中间margin(脱离文档流:根据最近已经定位的祖先元素定位，不考虑html)
.left{
position:absolute;
left:0;
top:0;
width:200px
}
.right:{
position:absolute;
right:0;
top:0
width:100
}
.middle{
margin:0 110px 0 210px;
}
(3)display：table；table-layout：flexd
` <div class="container">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div> `
父级.container{
display：table；
table-layout：flexd；
width:100%；
text-align：center
}
.left .right{
display:table-cell;
width:100px
}
.middle{
width:100%; //填充剩下的宽度
display:teble-cell
}
(4)flex实现
.container{
display：flex；
justify-content: space-between //项目平均分布
}
.left .right{
width:100px
}
.middle{
flex:1; //填充剩下的宽度，或者用width:100%
}
(5)grid实现
.container{
display：grid；
grid-template-columns: 300px auto 300px;
}
13.透明的实现
14.颜色的写法
1.color Name： 颜色关键字，如red
2.HEX：#RRGGBB，十六进制记法，三个参数的取值范围是00-FF，如：#FF8800可简写为#F80
3.RGB:rgb(R,G,B) 取值范围是正整数或百分数，如rgb(255,255,255)=rgb(100%,100%,100%)
4.RGBA:在RGB的记法上增加了Alpha，透明度，取值0-1；IE6-IE8不支持RGBA颜色记法。
5.HSL：(色调Hue，饱和度Saturation,亮度Lightness),H范围0-360，S和L范围0.0%-100.0%，如(360,10%，10%)
6.HSLA：在HSL的基础上增加了Alpha透明度
7.transparent：全透明，适用于background-color和border-color
15.svg
矩形 rect标签 <svg><rect width="50" height="100"></rect></svg>
圆形 circle标签 <svg><circle cx="10" cy="10" r="40"></circle></svg>
椭圆形 ellipse标签 <svg><circle rx="80" ry="40" x="10" y="10"></circle></svg>
线 line标签 <svg><line x1 y1 x2 y2></line></svg>
折线 polyline标签
多边形 polygon标签
16.border-sizing
三个值，border-box/content-box/inhert;
border-box是指包含width = content + padding + border
17. CSS单位
em：相对长度单位，相对当前对象内文本的字体尺寸。当前对象未设置，则继承父级元素的字体尺寸，直到最外层浏览器默认的字体尺寸。浏览器默认字体高都是16px，设置font-size：62.5%，即1em=10px
rem：相对长度单位，相对的是HTML根(root)元素。兼容IE8以上浏览器，为兼容可以设置font-size：14px；font-size：0.875rem
px：像素，1in=96px,绝对长度单位。
vm：视口单位，viewPort，1vm = 视口宽度的1%。
vh：视口单位，viewPort，1vh = 视口高度的1%。
vmin：选取视口单位中vm和vh中最小的那个。实际应用：元素总是接触屏幕的两条边，width：100vmin
vmax：选取视口单位中vm和vh中最大的那个。实际应用：总是覆盖可是窗口。width：100vmax
ex:相对长度单位，相对字体“x”的高度，通常为字体高度的一半。实际应用：bottom：1ex下标推高
ch：相对长度单位，相对数字“0”的宽度。CSS3新增。
cm：厘米，绝对长度单位
mm：毫米，绝对长度单位
q：1/4毫米，绝对长度单位
in: 英寸，1in=2.54cm，绝对长度单位
pt：点，1in=72pt，绝对长度单位
pc:派克，1in=6pc，我国新四号铅笔，绝对长度单位
18. Flex布局(Flexible Box)
一、Flex容器的6个属性：flex-direction、flex-warp、flex-flow、justify-content、align-items、align-content
1.flex-direction：row | row-reverse | column | column-reverse 决定主轴的方向。
row主轴为水平方向，起点在左端，默认值；column主轴为垂直方向，起点在上沿。
2.flex-warp：nowarp | warp | warp-reverse 定义换行。
nowarp是不换行，默认值。warp换行，第一行在上方。warp-reverse换行，第一行在下方。
3.flex-flow：<flex-direction> <flex-warp> 默认值 row nowarp 简写形式
4.justify-content：flex-start | flex-end | center | space-between | space-around 定义项目在主轴的对齐方式。
flex-start，左对齐，默认值。center居中。space-between两端对齐。space-around每个项目两侧间隔相等。
5.align-items：flex-start | flex-end | center | baseline | stretch 定义项目在交叉轴上如何对齐。
flex-start:上对齐，即交叉轴起点对齐。baseline：第一行文字的基线对齐。stretch：如果项目未设置高度或设为auto，将占满整个容器的高度，默认值。
6.align-content: flex-start | flex-end | center | space-between | space-around | stretch。 定义多根轴线的对齐方式。只有一根轴线，该属性无效。stretch默认值。
二、项目的6个属性：order、flex-grow、flex-shrink、flex-basis、flex、align-self
1.order：<integer> 默认值0。定义项目的排列顺序，数值越小，排列越靠前。
2.flex-grow：<number> 默认值0。定义项目的放大比例，值为0时，如果存在剩余空间，也不放大。
3.flex-shrink：<number> 默认值1。定义项目的缩小比例，如果空间不足，项目将缩小
4.flex-basis：<length> | auto。 默认值auto。定义在分配多余空间之前，项目占据的主轴空间。
5.flex：<flex-gorw> <flex-shrink> <flex-basis> | none。三个值简写，推荐使用。三个属性默认值分别为0,1,auto。两个快捷值：auto(1,1,auto)、none(0,0,auto)。实际应用：flex：1==>flex:1 1 0%;
6.align-self:auto | flex-start | flex-end | center | baseline | stretch。 允许单个项目与其他项目有不一样的对齐方式。可覆盖align-items。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
19.多列等高布局：
1.flex布局：利用flex属性的flex-direction的默认值row和align-items的默认值stretch占满整个容器高度。
2.display属性的table-cell布局。table布局天然具有等高布局。
3.overflow：hidden.生成BFC容器，父容器设置内外边距底部正负值。
<div class="box" style="overflow:hidden">
<div></div>
<div></div>
<div></div>
</div>
<style>
.box{overflow:hidden}
.box > div{
padding-bottom：10000px；
margin-bottom：-10000px；
float：left;
width:30%
}
</style>
20. CSS选择符：
1.元素选择符：*(通配选择符：选定所有对象)、类型选择符(即标签如P/div/h1)、ID选择符、类选择符
2.关系选择符:包含选择符(ul li{color:red})、子选择符(ul>li{color:red})、相邻选择符(p+p)、兄弟选择符(p~p)
3.属性选择符：input[type="text"]{}
4.伪类选择符:a:link未访问、a:visited已访问、a:hover悬浮、a:active点击链接时，顺序是love/hate
input:focus输入焦点时、not(s)匹配不含s选择符的元素E如p:not(.ab)、
first-child匹配父元素的第一个子元素、last-child、only-child、nth-child、nth-last-child
first-of-type匹配同类型中的第一个同级兄弟元素，如：p：first-of-type、last-of-type、only-of-type、nth-of-type、nth-last-of-type
empty匹配没有任何子元素的如：<p></p> p:empty{color:red}
checked:匹配用户界面选中状态的元素
enabled：处于可选状态的元素
disenabled：处于不可选状态的元素
target：匹配相关URL指向的E元素，URl后面跟锚点#，指向文档内某个具体的元素，这个被链接的元素就是目标元素，:target选择器用于选取当前活动的目标元素。
5.伪对象选择符：
:first-letter设置对象内的第一个字符的样式，配合float和font-size制作首字下沉的效果，用于块对象
:first-line设置对象内的第一行样式，用于块对象
:before设置对象前的内容，配合content使用
:after设置对象后的内容，配合content使用
：selection设置对象被选择时的样式。
21.HMTl的块级元素、内联元素、空元素
1.块级元素：div、p、ul、ol、li、h1—h6、dl、dt、dd。两个特点：(1)独占一行.(2)宽、高、边距可设置。
2.内联元素：span、label、input、a、em(斜体强调的作用)、strong(强调黑色加粗)，块级元素通过设置display：inline也可以变成内联元素。两个特点：(1)和其他元素都在一行上(2)元素的宽度就是它包含的文字、图片的宽度。
3.内联块级元素：img 。块级元素通过设置display：inline-block
4.空元素：<img />、<input/>、<br/>、<hr/>(水平线)、<link/>、<meta />没有子级节点，没有闭合标签
22. 画一条0.5px的线
三种实现方式：
1、meta的viewport
<meta
2、采用border-image
3、采用transform：scale(0.5)
4、采用渐变方式
23. 渐进增强、优雅降级
出现的这两个概念的背景是因为CSS3的兴起，低版本浏览器不支持CSS3，高版本浏览器需要CSS的效果。主要以hack的方式即加浏览器前缀实现兼容，如-webkit-border-radius和-moz-border-radius
渐进增强：针对低版本浏览器构建布局页面，实现页面的基本功能和效果。然后再对高版本浏览器加上CSS3的交互效果，比如border-radius。
优雅降级：针对一个高版本浏览器构建页面，实现各种动态效果和CSS3的布局，然后再保证低版本浏览器有基本的功能。
24. 图片的格式
5种格式：png、jpg、gif、webp、base64
png格式：分为png8和png24。
png8：是指8位索引色位图，只有透明和不透明两种，适合小体积的图片，如图标，能显示2的8次方即256种。
png24: 是指24位索引色位图，适合摄影作品。
png34：类似png24，多了一个alpha通道。
jpg格式：有.jpg和.jpeg两种格式，jpeg是苹果，window用jpg，习惯用法，现在都可以
gif格式：支持动画，类似于png8布尔透明类型。
webp格式：谷歌推出加快图片加载速度的图片格式，体积只有jpg的2/3，有损压缩。
base64：网络上传输8bit字节码的编码方式，用于http传递长信息。
优点：1. 减少http请求 2. 避免跨域
缺点：1. 浏览器版本支持的兼容性问题 2. 增加css尺寸 3. 增加编码成本
