目录

1.盒模型

2.offsetHeight /clientheight/scrollHeight

3.left与offsetLeft

4.对BFC规范的理解

5.解决元素浮动导致的父元素高度塌陷的问题

6.CSS样式的先级

7.隐藏页面元素

8.display: none 与 visibility: hidden 的区别

9.页面引入样式时，使用link与@import有什么区别？

10.em/px/rem/vh/vw区别

11.前端设置宽高时height： 100% 和 100vh 的区别

12.标签元素可以划分为哪几类

13.标签水平垂直居中

14.相对定位、绝对定位、固定定位

15.position的值，relative和absolute分别是相对于谁进行定位的？

16.CSS变量

17.伪类

18.画一条 0.5px 的线

19.css可继承的属性

20.CSS提高性能方法，CSS方面的优化

---

6.CSS样式的先级

分成五大类

（1）!important，无论引入方式是什么，选择器是什么，它的优先级都是最高的。

（2）引入方式，行内样式的优先级要高于嵌入和外链，嵌入和外链如果使用的选择器相同就看他们在页面中插入的顺序，在后面插入的会覆盖前面的。

（3）选择器，选择器优先级：id选择器>（类选择器 | 伪类选择器 | 属性选择器 ）> （后代选择器 | 伪元素选择器 ）> （子选择器 | 相邻选择器） > 通配符选择器 。

（4）继承样式，是所有样式中优先级比较低的。

（5）浏览器默认样式，优先级最低。

标签将样式链接到HTML文档中。

注意：选择器的权值加到一起,大的优先;如果权值相同,后定义的优先，写在后边的样式会把写在前面的样式覆盖

7.隐藏页面元素

• opacity:0：本质上是将元素的透明度将为0，就看起来隐藏了，但是依然占据空间且可以交互
• display:none: 这个是彻底隐藏了元素，元素从文档流中消失，既不占据空间也不交互，也不影响布局
• visibility:hidden: 与上一个方法类似的效果，占据空间，但是不可以交互了
• overflow:hidden: 这个只隐藏元素溢出的部分，但是占据空间且不可交互
• z-index:-9999: 原理是将层级放到底部，这样就被覆盖了，看起来隐藏了
• transform:scale(0,0): 平面变换，将元素缩放为0，但是依然占据空间，但不可交互

8.display: none 与 visibility: hidden 的区别

• 修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘
• 读屏器不会读取display:none;元素内容；会读取visibility:hidden;元素内容
• display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility:hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见
• display:none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility:hidden;是继承属性，子孙节点消失由于继承了hidden，通过设置visibility:visible;可以让子孙节点显式

9.页面引入样式时，使用link与@import有什么区别？

• ①link是XHTML标签，除了加载CSS外还可以用于定义RSS,定义Ref连接属性等作用。而@import是CSS所提供的只能用于加载CSS
• ②link引入CSS时是在页面载入的同时加载的，而@import是页面网页完全载入之后加载的
• ③link是XHTML标签没有兼容问题，@import是CSS2.1提供的，低版本(ES5以下)的浏览器不支持
• ④link支持使用javascript控制DOM去改变样式，而@import不支持

10.em/px/rem/vh/vw区别

• px：绝对单位，页面按精确像素展示
• %：相对于父元素的宽度比例
• em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值
• rem：相对单位，可理解为root em, 相对根节点html的字体大小来计算
• vh、vw：主要用于页面视口大小布局，在页面布局上更加方便简单
•       vw：屏幕宽度的1%
•       vh：屏幕高度的1%
•       vmin：取vw和vh中较小的那个（如：10vh=100px 10vw=200px则vmin=10vh=100px）
•       vmax：取vw和vh中较大的那个（如：10vh=100px 10vw=200px则vmax=10vw=200px）

11.前端设置宽高时height： 100% 和 100vh 的区别

vh就是当前屏幕可见高度的1%，也就是说height:100vh == height:100%;

但是有个好处是当元素没有内容时候，设置height:100%该元素不会被撑开，设置height:100vh，该元素会被撑开屏幕高度一致

12.标签元素可以划分为哪几类

（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

13.标签水平垂直居中

元素	水平居中	垂直居中
行内元素	text-align: center flex布局设置父元素：display: flex; justify-content: center	单行文本父元素确认高度：height === line-height 多行文本父元素确认高度：display: table-cell; vertical-align: middle
块级元素	定宽:margin: 0 auto 绝对定位+left:50%+margin:负自身一半	position: absolute设置left、top、margin-left、margin-top(定高) display: table-cell transform: translate(x, y) flex(不定高，不定宽) grid(不定高，不定宽)，兼容性相对比较差

垂直居中：

①绝对定位+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,

14.相对定位、绝对定位、固定定位

（1）相对定位（position:relative），不会脱离文档流。对定位元素相对于其自身在文档流中的位置来定位。相对定位不会改变元素的性质，块元素还是块元素，内联元素还是内联元素。

（2）绝对定位（position:absolute），会脱离文档流。

绝对定位的元素是相对于距离他最近的开启了定位的祖先元素进行定位，如果所有的祖先元素都没开启定位，则相对于浏览器窗口进行定位。绝对定位会改变元素的性质。内联变块，块的高度和宽度都被内容撑开，并且不独占一行。

（3）固定定位（position:fixed），固定定位是一种特殊的绝对定位，它的特点大部分都和绝对定位一样。不同的是，固定定位的元素永远都是相对于浏览器窗口进行定位的。并且他不会随滚动条滚动。

15.position的值，relative和absolute分别是相对于谁进行定位的？

absolute :生成绝对定位的元素，相对于最近一级的定位不是static的父元素来进行定位。

fixed（老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或frame进行定位。

relative生成相对定位的元素，相对于其自身在普通流中的位置进行定位。

static默认值。没有定位，元素出现在正常的流中

sticky生成粘性定位的元素，容器的位置根据正常文档流计算得出

<meta name="viewport" content="width=device-width,initial-sacle=0.5">
//width=device-width表示将viewport视窗的宽度调整为设备的宽度，这个宽度通常是指物理上宽度。

p{ border-width: 0 0 1px 0; border-image: imageUrl 2 0 round; }

 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(); 
  }

  <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 )

<link rel="stylesheet" href="mystyles.css" media="noexist" onload="this.media='all'">

<link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='stylesheet'">