02、CSS基础
link标签和import标签的区别
2、页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。
3、link是html标签，因此没有兼容性，而@import只有IE5以上才能识别。
4、link方式样式的权重高于@import的。
CSS盒模型
就是用来装页面上的元素的矩形区域。CSS中的盒子模型包括IE盒模型和标准的W3C盒模型。
IE盒模型只在IE5及以前版本使用，IE6及以后都是使用W3C盒模型。
一、可以手动设置盒模型（宽高的计算方式）
box-sizing : border-box | padding-box | content-box | inherit //padding-box是火狐私有属性。inherit继承父元素的box-sizing
一、标准默认的W3C盒模型（content-box）
css设置的宽度是content的宽度，实际宽度 = css设置的宽度 + 左右填充 + 左右边框。
二、IE盒模型（border-box）
css设置的宽度是border及以内的宽度，设置的内填充、左右边框等等都会往里面压缩。
transition和animation的区别
Animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值。
1、transition需要触发一个事件才能改变属性，而animation不需要触发任何事件的情况下才会随时间改变属性值。
2、transition为2帧，从from .... to，而animation可以一帧一帧的
容器垂直居中
一、margin-auto
父元素有宽高并设置相对定位，子元素有宽高并绝对定位。上下左右都为0，margin设置为auto
二、margin负值
父元素有宽高并设置相对定位，子元素有宽高并绝对定位。上50%，下50%；margin-top设置为 负子元素高度的一半，margin-left设置为 负子元素宽度的一半。
三、translate
父元素有宽高并设置相对定位，子元素有宽高并绝对定位。上50%，下50%；移动自身元素，transform:translate(-50%,-50%);
四、flex布局
父元素设置为display:flex，并且设置align-items:center ， justify-content:center
position定位
默认static，没有定位
元素出现在正常的流中（忽略top, bottom, left, right 或者 z-index 声明）
relative相对定位
1、使用了相对定位后，即使上下左右进行移动，原来的位置还会保留。
2、父元素使用相对定位后，子元素可以相对于父元素进行绝对定位
absolute绝对定位
1、相对于最近的一个使用relative的元素进行定位，若都没有则相对于body定位
2、使用了绝对定位后，脱离文档流，自身原来的位置不会存在
fixed固定定位
1、相对于浏览器窗口进行定位，定位后一直固定显示在的屏幕中，Fixed定位的元素和其他元素重叠。
2、脱离文档流，自身位置不存在
sticky粘性定位
1、元素先按照普通文档流定位，然后相对于该元素在流中的flow root（BFC）和 containing block（最近的块级祖先元素）定位。
2、元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
inherit 继承定位
1、规定应该从父元素继承position 属性的值。
关于js动画和css3动画的差异性
区别：
功能涵盖面，js比css大
实现/重构难度不一，CSS3比js更加简单，性能跳优方向固定
对帧速表现不好的低版本浏览器，css3可以做到自然降级
css动画有天然事件支持
css3有兼容性问题
块元素和行元素
行元素：不会独占一行，width和height会失效，并且在垂直方向的padding和margin会失
效。
浮动清除
在浮动元素后使用一个空元素如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。
二、使用CSS的overflow属性
给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。
在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。
三、给浮动的元素的容器添加浮动
给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。
四、使用邻接元素处理
什么都不做，给浮动元素后面的元素添加clear属性。
五、使用CSS的:after伪元素
结合:after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。
给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动
css3新特性
CSS3边框如border-radius，box-shadow等；CSS3背景如background-size，background-origin等；CSS3 2D，3D转换如transform等；CSS3动画如animation等。
怎么样让一个元素消失
2. visibility：hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
3. display：none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉。
display:none和visibilty:hidden的区别
1. visibility：hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
2. display：none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉
三栏布局的实现方式
两列定宽一列自适应：
1、使用float+margin：
给div设置float：left，left的div添加属性margin-right：left和center的间隔px,right的div添加属性margin-left：left和center的宽度之和加上间隔
2、使用float+overflow：
给div设置float：left，再给right的div设置overflow:hidden。这样子两个盒子浮动，另一个盒子触发bfc达到自适应
3、使用position：
父级div设置position：relative，三个子级div设置position：absolute，这个要计算好盒子的宽度和间隔去设置位置，兼容性比较好，
4、使用table实现：
父级div设置display：table，设置border-spacing：10px//设置间距，取值随意,子级div设置display:table-cell，这种方法兼容性好，适用于高度宽度未知的情况，但是margin失效，设计间隔比较麻烦，
5、flex实现：
parent的div设置display：flex；left和center的div设置margin-right；然后right 的div设置flex：1；这样子right自适应，但是flex的兼容性不好
6、grid实现：
parent的div设置display：grid，设置grid-template-columns属性，固定第一列第二列宽度，第三列auto，
对于两侧定宽中间自适应的布局，对于这种布局需要把center放在前面，可以采用双飞翼布局：圣杯布局，来实现，也可以使用上述方法中的grid，table，flex，position实现
什么是BFC
BFC也就是常说的块级格式化上下文，这是一个独立的渲染区域，规定了内部如何布局，并且这个区域的子元素不会影响到外面的元素，
其中比较重要的布局规则有内部box垂直放置，计算BFC的高度的时候，浮动元素也参与计算，触发BFC的规则有根元素，浮动元素，position为absolute或fixed的元素，display为inline-block，table-cell，table-caption，flex，inline-flex，overflow不为visible的元素
//另外一个
BFC区域不会与float box重叠
BFC是页面上的一个独立容器，子元素不会影响到外面
计算BFC的高度时，浮动元素也会参与计算
那些元素会生成BFC：
根元素
float不为none的元素
position为fixed和absolute的元素
display为inline-block、table-cell、table-caption，flex，inline-flex的元素
overflow不为visible的元素
overflow的原理
当元素设置了overflow样式且值部位visible时，该元素就构建了一个BFC，BFC在计算高度时，内部浮动元素的高度也要计算在内，也就是说技术BFC区域内只有一个浮动元素，BFC的高度也不会发生塌缩，所以达到了清除浮动的目的，
z-index的定位方法
z-index属性设置元素的堆叠顺序，拥有更好堆叠顺序的元素会处于较低顺序元素之前，z-index可以为负，且z-index只能在定位元素上奏效，该属性设置一个定位元素沿z轴的位置，如果为正数，离用户越近，为负数，离用户越远，它的属性值有auto，默认，堆叠顺序与父元素相等，number，inherit，从父元素继承z-index属性的值
知道属性选择器和伪类选择器的优先级吗
优先级相同
inline-block，inline和block的区别；为什么img是inline还可以设置宽高
内联：设置宽度和高度无效，边距在正确方向上无效，padding在水平方向垂直方向都有效，前后无换行符
内联块：能设置宽度高度，边距/填充水平垂直方向都有效，前后无换行符
了解重绘和重排吗，知道如何去减少重绘和重排吗，让文档分开文档流有某种方法
添加或删除可见的DOM元素，
元素尺寸位置的改变
浏览器页面初始化，
浏览器窗口大小发生改变，重排一定导致重绘，重绘不一定导致重排，
减少重绘重排的方法有：
不在布局信息改变时做DOM查询，
使用csstext，className一次性更改属性
使用碎片
对于多次重排的元素，可以说动画。使用绝对定位分开文档流，使其不影响其他元素
//还有
渲染 = 重排 + 重绘
重排 = 计算网页中各个元素的位置关系
重绘 = 获取元素的样式，将样式绘制到浏览器中
每一次dom的操作都会引发重排/重绘。
引发重排必定引发重绘，引发重绘只是将该元素样式重新绘制一遍
CSS画正方体，三角形
三角形
#triangle02{
width: 0;
height: 0;
border-top: 50px solid blue;
border-right: 50px solid red;
border-bottom: 50px solid green;
border-left: 50px solid yellow;
}
正方形
.front{
transform:translateZ(1em);
}
.bottom{
transform:rotateX(-90deg) translateZ(1em);
}
.top{
transform:rotateX(90deg) translateZ(1em);
}
.left{
transform:rotateY(-90deg) translateZ(1em);
}
.right{
transform:rotateY(90deg) translateZ(1em);
}
.back{
transform:translateZ(-1em);
}
两个嵌套的div，position都是absolute，子div设置top属性，那么这个top是相对于父元素的哪个位置定位的。
border内侧 padding外侧
css布局
圣杯布局是指布局从上到下分为header、container、footer，然后container部分定为三栏布局。这种布局方式同样分为header、container、footer。圣杯布局的缺陷在于 center 是在 container 的padding中的，因此宽度小的时候会出现混乱。
双飞翼布局给center 部分包裹了一个 main 通过设置margin主动地把页面撑开。
Flex布局是由CSS3提供的一种方便的布局方式。
绝对定位布局是给container 设置position: relative和overflow: hidden，因为绝对定位的元素的参照物为第一个postion不为static的祖先元素。 left 向左浮动，right 向右浮动。center 使用绝对定位，通过设置left和right并把两边撑开。 center 设置top: 0和bottom: 0使其高度撑开。
表格布局的好处是能使三栏的高度统一。
网格布局可能是最强大的布局方式了，使用起来极其方便，但目前而言，兼容性并不好。网格布局，可以将页面分割成多个区域，或者用来定义内部元素的大小，位置，图层关系。
浙公网安备 33010602011771号