一 。。。选择器知道哪些 CSS选择器优先级 css的权重计算、
css3新增选择器：1 属性选择器。2 结构伪类选择器。3 伪元素选择器。
1属性选择器。
input[value] { }
input[type="text"] { }
div[class^=icon]{} //选择div，class属性，而且以icon开头的。
div[class$=icon]{} //选择div，class属性，以$结尾的。
div[class*="icon"]{}//选择只要有icon就行！
通配符选择器，继承选择器是0.
标签选择器。1
类选择器，属性选择器，伪类选择器。权重都是10.
id选择器。100.
行内样式！
import选择器。
2 结构伪类选择器：文档结构。兄弟，或则第几个。：就是伪类选择器。
ul li :first-child 。第一个孩子。
ul li :last-child.
nth-child(n):n是第几个元素。n是数字，关键字，公式。匹配父元素的子元素。把所有孩子排列序号，如果序号没有匹配标签(div)，则会不显示，
ul li :nth-child(2) n是数字。
ul li :nth-child(odd) even偶数，odd奇数。
ul li :nth-child(n) n每次从0开始，每次+1，依次计算！只能写字母n！
ul li:nth-child(2n),(2n+1),(5n),(n+5),(-n+5)。+n从5开始，-n前5个。
nth-of-type(): 指定类型E第n个。指定元素的排序（div:）。(指定孩子类型）
3 伪元素选择器：
不用在父盒子添加html标签，否则结构会很麻烦。而是使用css创建新的标签元素。
::before。元素内部的前面插入内容。
::after。元素内部的后面插入内容。
1 before，after创建一个元素，行内元素。
2 文档中找不到，所以称为是伪元素。
3 div::before{}。放在盒子里面的前面！div::after。盒子的后面！（相对于content的前后）
4 content必须要写！是放在content的前面，或者后面。
5 伪元素选择器和标签选择器一样。选中为1。div::before。权重是2.
属性4 css3计算calc（）。计算盒子的宽度。calc(100%-80px)
属性5 css3过渡（随着时间盒子做变换）。transition: 要过渡的属性 花费时间（0.5s） 运动曲线（ease） 何时开始！
随做过渡给谁加！ div{+transition:} .div:hover{}
transition: width .5s
transition：width .5s, height .5s。
transition：all 0.5s。
移动盒子的位置：1 定位 2盒子的外边距margin 3 2D转换。
属性6 transform： translate(x,y)x就是x轴上移动的，y就是y轴移动的。
1
transform: translate(100px,0);
transform: translateX(100px)
transform: translateY(100px)
最大的优点：不会影响其他盒子的位置！对行内标签没有影响。
2 %。如果里面是%，那么移动的是盒子自身的宽度或者高度来移动的。
div{ transform:translate(50%,50%)}
{transform: translate(-50%,-50%}
{margin-left: -width/2; margin-top:-height/2}
top:50%.50%.
二。。。 css盒模型 盒模型的理解 css盒子模型 css 盒模型 Css中盒子模型，CSS盒模型 说说盒模型，boxsizing 怪异盒模型 ，盒子模型、块级格式化上下文
https://www.bilibili.com/video/BV13V411z7do?from=search&seid=14409236289928815414
1盒子模型的组成：context，padding，border， margin，
2 盒子模型的类型：box-sizing: content-box，border-box
3 盒子模型的外部显示模式（相邻盒子的布局） ：bolck，inline，inline-block
盒子的内部显示模式（父盒子内部子盒子的排列方式）：flex,grid
border: 画三角形。
margin:边距塌陷，负值。
inline模式设置 padding，margin。水平方向都会其效果。竖直方向是没有什么效果的。
1border的应用：border-letf,border-radius, transparent绘制出一个扇形 实现一个同心圆 ,实现一个三角形？ boder-top: boder-bottom:,border-left, boder-right.
2外边距重叠解决 ?margin塌陷和合并。margin的负值运用。（父子元素取最大值，兄弟之间取最大值）
垂直方向上：父子嵌套，元素垂直方向上，margin取最大值。（）
原理:父子嵌套元素在垂直方向的margin,父子元素是结合在一起的,他们两个的margi会取其中最大的值.
正常情况下,父级元素应该相对浏览器进行定位,子级相对父级定位.
但由于margin的塌陷,父级相对浏览器定位.而子级没有相对父级定位,子级相对父级,就像坍塌了一样.
margin合并
原理:两个兄弟结构的元素在垂直方向上的margin是合并的，50px的下边框和 10px上边框，会取max值，50px。
margin是负值的情况以及应用。
margin：margin-left：想左边移动一格。相对定位压住标准流，和其他盒子。
3
4 行内元素是否可以设定padding，border，margin？
padding四个方向都设置了，将背景层撑大。但是，由于内联元素的高度是由内容决定的，所以加了上下padding以后会与临近行的元素产生干涉，如图所示。
margin只设置了左右，达到控制元素间距的目的；
margin：0 aotu只能对于普通文档流！不能对浮动和定位。
三。。。 css传统的布局方式：1 普通流。（标准流，文档流）2 浮动 3 定位
1 文档流：标签按照默认方式排列。1 块级独占一行。2 行内元素，从左到右顺序排序。
2 浮动：如何div排列成一行？如何实现两个盒子的左右对齐。
浮动产生的原因：文字的环绕的效果。小图片设置为浮动，文字会自动环绕。
浮动应用：让多个快级别元素一行显示。块级元素纵向找标准流，块级元素横向找浮动。
浮动定义：1 按照次序属性用于创建浮动框，2 将其移动到一边，左边缘或者右边缘 触及 包含块 或者浮动框 边缘。
浮动特性：1 浮动元素会脱离标准流。2 浮动元素 行内显示 而且元素顶部对齐。3 浮动元素具有行内块元素的特性。
1 脱离标准流的控制（浮到上空中，漂浮在普通流的上面，不占位置），移动到指定位置（动），俗称脱标。2 浮动的盒子不在保留原来的位置。
2 顶部对齐。在一行对齐。（可能高度不一定）
3 行内块特性。 可以设置宽高。但是可以在一行显示。不需要在进行转化为行内块元素。（块级盒子宽度 默认和父级元素一样宽，但是添加浮动后，大小根据内容决定）
浮动布局要素：1 浮动元素和标准流父级别使用：伪类约束浮动元素的位置，一般是标准流父元素上下排列，内部子元素采取浮动排列的左右位置，复合元素布局的第一准则。2 父元素中，有一个兄弟浮动，其他兄弟也要浮动。否则，标准流是独占一行，浮动盒子之后影响后面的标准流，不会影响起前面的标准流。
清除浮动：一般标准流父盒子是不设置高度的，因为不方便设置高度！子盒子会撑开盒子。浮动元素不是标准流，但是父盒子是标准流，没有人撑开父盒子，高度会塌陷，会影响下面的标准流盒子！
清除浮动的本质。清除浮动造成的影响。
如果父盒子本身有高度，则不需清除浮动。
清除浮动之后，父级根据浮动子盒子自动检测高度。父级有了高度，不会影响下面的标准流。
选择器 {claer：属性值}
clear:both,left,right。
清除浮动策略是: 闭合浮动。
overflow: hidden;（既可以弄外边距合并，又可以清除浮动，子不教，父之过。但是无法解决溢出部分！）
为什么需要清楚浮动：？
1 父盒子没有高度。2 子盒子浮动了。3 影响下面布局，就应该清楚浮动。
隔墙法，子元素最后一个清楚浮动。父元素overflow：hidden（溢出隐藏）。父元素添加after为元素。父元素：after双伪元素。
1 某些元素自由盒子内移动，并且压住其他盒子。
2 滚动窗口的时候，某些盒子固定在盒子上！
定位定义：盒子定义在某个位置。
定位=：定位模式+ 定偏移。
定位模式： position属性。 static， relative， absolute，fixed（固定）。
边偏移：top，left，right，bottom（相对于父元素，上下左右的距离，只有position属性才能使用）。
static：就是标准流，没有边偏移。
relative：原来的位置（自恋形 ，相对于自身位置移动，占有位置，不会影响正常的文档流。当父亲。 ） 特点：1 相对于原来的位置偏离。2 不脱标，不脱离标准流，位置还保留！后面位置不能移动到上面。应用：给绝对定位当爹的！
absolute（相对于带有定位的父级，不占有位置）：相对于祖先元素来说（拼爹型）。特点：1 没有父元素，或者父元素没有定位，以浏览器为定位。2 父元素 有定位，那么孩子就是在父元素里面移动。（会和最近一级带有定位的定位！！！如果父亲没有，爷爷有，那么就根据爷爷定位）3 绝对定位不在占有原来的位置！会飘起来！不保留。后面会占在前面。（脱标）
fixed：浏览器的可视窗口（浏览器可视区，不占有位置）。1 和父元素没有任何关系，不会随着滚动条滚动。2 不占有原先的位置。脱标的。 应用1：left:50%。 margin-left:div,width/2
粘性定位 sticky：相对定位+绝对定位的混合。必须添加top，left，right，有一个才有效！
定位叠放次序：z-index。正整数，负整数，0.数值越大，盒子越靠上！数值相同，后面的在上面。数字不能加单位。 只有定位的盒子才有z-index属性。！！！（标准流和浮动是没有这个属性的）
z-index: 浏览器对于人脸的位置。距离越大，层数越高。必须在position里面其效果。
定位的扩展！
1垂直居中。margin：aotu对position没有作用。
2 行内元素添加绝对定位，或者固定定位，可以直接设置宽度。块级添加绝对或者而固定定位，不给宽度高度，默认大小是内容的大小。
3 脱离标准流的盒子不会触发外边距塌陷！
4 浮动的元素不会压住标准流的文字，或者照片，但是会压标准流的盒子。但是绝对定位会压住 标准流的所有内容！。
六。。。flex的理解，Flex实现三栏等宽布局，flex实现双栏布局，左边宽度固定右边自适应 Flex布局 （ 伸缩布局= 弹性布局=伸缩盒布局= 弹性盒布局=flex布局。）
布局原理： 任何容器指定为flex布局，就是通过父盒子添加flex属性，来控制子盒子的位置和排列方式。
采取flex布局的元素，成为flex容器，容器。父元素设为flex：子元素的float，clear，和 vertical-align 属性将失效。
子元素自动成为容器的成为，flex项目，项目。
父项常见的属性：
1 flex-direction 主轴（x轴）和 侧轴(y轴)（交叉轴）。row ，元素跟着主轴排列的。
2 justify-content(对齐）：flex-start,center,space-around,space-between.
3
4
5
6
子项常见的属性：
flex:1 flex:2 flex:1.2/4.
七。。。 CSS隐藏元素的方式 CSS display: block inline inline-block， flex，grid。css隐藏元素的方式？
最基本方式如下：
display: none隐藏对应的元素，脱离文档。display:block显示文档流。
visibility: hidden。隐藏对应的元素，在文档流保留原理空间。继续占有原来的位置。
技巧性：设置宽高0，透明度（opacity不透明）是0，z-index是-1000。
overflow： hidden。visible。（溢出的部分隐藏）
八。。。BFC BFC 什么是BFC，BFC的作用，如何开启BFC
九 页面布局方式 双兰布局，三栏布局。两列布局(左边固定,右边自适应)。 自适应布局。三栏纵列布局，宽度一样，怎么实现 。css实现两列布局的方法。圣杯布局，双飞翼布局。
9 css 水平垂直居中的几种方法 固定宽高元素的水平垂直居中 水平垂直居中 水平垂直居中 水平垂直居中 元素居中的多种方式。说一下垂直居中的方式？父元素和子元素宽度都不一定
1 定位。子绝父相。top，left50% 。-margin。
2 css3 的transform：translate的50%。
3
vertical-align:实现行内元素，或者行内块元素垂直居中。 middle。(vertical垂直的) disply：inline-block。
12 px,rem,em.（rem是基于什么原理进行适配的）
11 浏览器的css运行机制。 重排和重绘。
12 一般来说css放在head里，js放在body最后。如果它们交换位置，看到的页面加载是什么样的？
html第一行！doctype是做上面用的
在页面中的动画，设置一个定时器，间隔一段时间就动一次，考虑性能，以及考虑整个页面的刷新时间，应该设置多长时间？
浏览器怎么渲染 html css js 这些文件，哪个先渲染？ 浏览器渲染的全过程（如何解析、如何渲染、光栅化）
第八题，如果需要手动写动画，你认为最小时间间隔是多久，为什么？多数显 示器默认频率是60Hz，即1秒刷新60次，所以理论 上最小 间隔为1/60*1000ms＝16.7ms
其他小点：
label for 的用处
data-src = 是拿来做什么的
transform有哪些属性