目录
2.offsetHeight /clientheight/scrollHeight
9.页面引入样式时，使用link与@import有什么区别？
11.前端设置宽高时height： 100% 和 100vh 的区别
15.position的值，relative和absolute分别是相对于谁进行定位的？
两种：怪异（IE）盒子模型、标准（W3C）盒子模型；
盒模型包括内容（content）、内边距（padding）、外边距（margin）、边框（border）;
区别：
CSS3中有个box-sizing属性可以控制盒子的计算方式，
【box-sizing:content-box】padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和。（W3C盒子模型）
【box-sizing:border-box】padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值。（IE6盒子模型）
offsetHeight = 内容高度 + padding + border
clientheight = 内容高度 + padding
scrollHeight = 内容实际尺寸 + padding
不同点：
相同点：定位方式一样，如果父元素设置了定位元素（position设置为relative或absolute），则相对于定位元素定位，否则就是相对于根元素定位。
BFC(Block Formatting Context)块级格式化上下文，是Web页面一块独立的渲染区域，处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。
触发BFC的条件
BFC应用：
（1）解决 margin 的重叠问题：由于 BFC 是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个 BFC，就解决了 margin 重叠的问题。
（2）解决高度塌陷的问题：在对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为 0。解决这个问题，只需要把父元素变成一个BFC。常用的办法是给父元素设置overflow:hidden。
（3）创建自适应两栏布局：可以用来创建自适应两栏布局：左边的宽度固定，右边的宽度自适应
高度塌陷：
父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷。父元素的高度一旦塌陷,所有标准流中元素的位置将会上移，导致整个页面的布局混乱
解决方法：
分成五大类
（1）!important，无论引入方式是什么，选择器是什么，它的优先级都是最高的。
（2）引入方式，行内样式的优先级要高于嵌入和外链，嵌入和外链如果使用的选择器相同就看他们在页面中插入的顺序，在后面插入的会覆盖前面的。
（3）选择器，选择器优先级：id选择器>（类选择器 | 伪类选择器 | 属性选择器 ）> （后代选择器 | 伪元素选择器 ）> （子选择器 | 相邻选择器） > 通配符选择器 。
（4）继承样式，是所有样式中优先级比较低的。
（5）浏览器默认样式，优先级最低。
内联样式（行内）：样式写在标签对中，一般很少使用，尽量不要写在标签内，不利于代码维护。
内部样式（嵌入式）：将样式集中写在head标签对中，适用于一个页面。
外部样式（外链式）：将所有样式放在一个或多个.css为扩展名的外部样式表文件中，通过
标签将样式链接到HTML文档中。
注意：选择器的权值加到一起,大的优先;如果权值相同,后定义的优先，写在后边的样式会把写在前面的样式覆盖
vh就是当前屏幕可见高度的1%，也就是说height:100vh == height:100%;
但是有个好处是当元素没有内容时候，设置height:100%该元素不会被撑开，设置height:100vh，该元素会被撑开屏幕高度一致
（1）块级元素：独占一行，可以设置宽高。ul、li、form、h1-h6、hr、p、div、table
（2）行级元素：不会独占一行，不可以设置宽高。a、big、br、em、label、span、strong
（3）行级块元素：既可以跟其他元素共占一行，又可以设置宽高。input、select、textarea、button、img
块级元素与行级元素相互转换：
把行级元素转成块级元素：display:block
把块级元素转成行级元素：display:inline
转为行级块元素：dipslay:inline-block
| 元素 |
水平居中 |
垂直居中 |
| 行内元素 |
|
|
| 块级元素 |
|
|
垂直居中：
①绝对定位+margin:负值（-子元素宽高一半），要求盒子要定宽高
②绝对定位+margin:auto,子元素所有方向都为0，要求盒子要定宽高
③绝对定位+transform,子元素left和top设置50%，transform:translate(-50%,-50%)盒子可以不定宽高
④flex弹性布局：display:flex; justify-content:center，盒子可以不定宽高
⑤grid网格布局，盒子可以不定宽高
⑥table布局，父display:table-cell;text-align:center;vertical-align:middle;子display:inline-block,
（1）相对定位（position:relative），不会脱离文档流。对定位元素相对于其自身在文档流中的位置来定位。相对定位不会改变元素的性质，块元素还是块元素，内联元素还是内联元素。
（2）绝对定位（position:absolute），会脱离文档流。
绝对定位的元素是相对于距离他最近的开启了定位的祖先元素进行定位，如果所有的祖先元素都没开启定位，则相对于浏览器窗口进行定位。绝对定位会改变元素的性质。内联变块，块的高度和宽度都被内容撑开，并且不独占一行。
（3）固定定位（position:fixed），固定定位是一种特殊的绝对定位，它的特点大部分都和绝对定位一样。不同的是，固定定位的元素永远都是相对于浏览器窗口进行定位的。并且他不会随滚动条滚动。
absolute :生成绝对定位的元素，相对于最近一级的定位不是static的父元素来进行定位。
fixed（老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或frame进行定位。
relative生成相对定位的元素，相对于其自身在普通流中的位置进行定位。
static默认值。没有定位，元素出现在正常的流中
sticky生成粘性定位的元素，容器的位置根据正常文档流计算得出
CSS变量为自定义属性，由自定义编辑设定值【--main--bg-color:#ddd;】,通过var()函数来获取值【color:var(--main-bg-color);】。css变量可在css文档中重复使用，当需要修改时，仅需要修改设定值，设定的变量名最好是设置为语义化的标签
a标签有四种状态：链接访问前、链接访问后、鼠标滑过、激活，分别对应四种伪类:link、:visited、:hover、:active；顺序为LVHA；L和V顺序可以交换
设置【height:0.5px】，在不同的浏览器会有差异（ 不同系统的不同浏览器对小数点的px有不同的处理）
（1）采用meta viewport的方式（针对移动端）
<meta name="viewport" content="width=device-width,initial-sacle=0.5">
//width=device-width表示将viewport视窗的宽度调整为设备的宽度，这个宽度通常是指物理上宽度。（2）采用border-image的方式：首先需要自己制作一个0.5像素的线条作为线条背景图片。
p{ border-width: 0 0 1px 0; border-image: imageUrl 2 0 round; }（3）采用transform: scale()的方式【height: 1px;transform: scale(0.5)】
（4）使用canvas绘制
var drawing = document.getElementById("drawing");
if (drawing.getContext){
var context = drawing.getContext("2d");
context.lineWidth = 0.5;
context.beginPath();
context.moveTo(30, 30);
context.lineTo(200, 100);
context.stroke();
}
（5）svg
<svg id="svgLineTutorial" height="200px" width="200px" xmlns="http://www.w3.org/2000/svg">
<line x1="50" y1="50" x2="200" y2="200" style="stroke:Green;stroke-width:0.5"/>
</svg>// 创建link标签
const myCSS = document.createElement( "link" );
myCSS.rel = "stylesheet";
myCSS.href = "mystyles.css";
// 插入到header的最后位置
document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling )
（2）设置link标签media属性为noexis，浏览器会认为当前样式表不适用当前类型，会在不阻塞页面渲染的情况下再进行下载。加载完成后，将media的值设为screen或all，从而让浏览器开始解析CSS
<link rel="stylesheet" href="mystyles.css" media="noexist" onload="this.media='all'">（3）通过rel属性将link元素标记为alternate可选样式表，也能实现浏览器异步加载。同样别忘了加载完成之后，将rel设回stylesheet
<link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='stylesheet'">