HTML / CSS 常见知识点

1、src 和 href 的区别

【】src： 表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置。src会将其指向的资源下载并应⽤到⽂档内，如请求js脚本。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，所以⼀般js脚本会放在页面底部
【】href： 表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。当浏览器识别到它他指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理。 常用在a、link等标签上

2、渐进增强和优雅降级之间的区别

【】渐进增强（progressive enhancement）：主要是针对低版本的浏览器进行页面重构，保证基本的功能情况下，再针对高级浏览器进行效果、交互等方面的改进和追加功能，以达到更好的用户体验
【】优雅降级 graceful degradation： 一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容

3、CSS 优化和提升性能的方法

【】加载性能

• css 压缩：将写好的css进行打包压缩，可以减小文件体积
• css单一样式：当需要下边距和左边距的时候，很多时候会选择使用 margin:top 0 bottom 0
• 减少使用@import，建议使用link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载

【】选择器性能

• 避免使用通配规则，比如 * 计算次数惊人
• 尽量少使用后代选择器，选择器的深度不要过高，CSS 选择符是从右到左进行匹配的
• 了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则

【】渲染性能

• 慎重使用高性能属性：浮动、定位。尽量减少页面重排、重绘
• 选择器优化嵌套，尽量避免层级太深
• 属性值为浮动小数0.**，可以省略小数点之前的0

4、CSS中的 “flex:1;” 是什么意思

【】flex 是 flex-grow, flex-shrink 和 flex-basis的简写

【】当 flex 取值为 1 时，对应的三个值分别为 1 1 0%

【】当 flex 取值为 0 时，对应的三个值分别为 0 1 0%

【】auto (1 1 auto) 和 none (0 0 auto)

5、页面导入样式时，使用 link 和 @import 有什么区别

【】link 属于HTML标签，而 @import 是css提供的

【】页面被加载时，link 会同时被加载，而 @import 引用的css会等到页面被加载完再加载

【】link 是XHTML标签，无兼容问题，而 @import 只在IE5以上才能识别

【】link 方式的样式的权重高于 @import 的权重

6、CSS3新增了哪些特性

【】选择器（兄弟选择器、伪类选择器、伪元素选择器、否定选择器、状态选择器）

【】新样式（border-radius. box-shadow. border-image. box-shadow. 背景相关）

【】文字（word-wrap. text-shadow. text-overflow. text-decoration)

【】过渡、转换、动画、渐变、flex 弹性布局、grid 网格布局、媒体查询、混合模式等

7、CSSOM 树和 DOM 树是同时解析的吗

【】浏览器会下载 HTML 解析页面生成 DOM 树，遇到 CSS 标签就开始解析 CSS，这个过程不会阻塞，但是如果遇到了 JS 脚本，此时假如 CSSOM 还没有构建完，需要等待 CSSOM 构建完，再去执行 JS 脚本，然后再执行 DOM 解析，此时会阻塞

8、canvas 在标签上设置宽高，与在 style 中设置宽高有什么区别

【】canvas标签的width和height是画布实际宽度和高度，绘制的图形都是在这个上面

【】而style的width和height是canvas在浏览器中被渲染的高度和宽度

【】如果canvas的width和height没指定或值不正确，就被设置成默认值

9、CSS 动画和 JS 实现动画分别有哪些优缺点

【】CSS 动画

• 优点：浏览器可以对动画进行优化；代码相对简单；对于帧速表现不好的低版本浏览器，CSS3可以做到自然降级
• 缺点：运行过程控制较弱,无法附加事件绑定回调函数；

【】JS 动画

• 优点：控制能力很强；动画效果比css3动画丰富；JS大多时候没有兼容性问题
• 缺点：代码的复杂度高于CSS动画；会出现丢帧的情况

10、z-index 属性什么时候会失效

【】z-index元素的position属性需要是relative，absolute或是fixed

【】失效情况：

• 父元素position为relative时，子元素的z-index失效。解决：父元素position改为absolute或static
• 元素没有设置position属性为非static属性
• 元素在设置z-index的同时还设置了float浮动。解决：float去除，改为display：inline-block；

11、CSS 中1像素问题是什么？有哪些解决方案

【】CSS中 1px 是物理像素，在像素比（dpr = 物理像素 / 逻辑像素）大于2的屏幕上，设置为 1px 的边框实际占用了大于2的逻辑像素密度，导致边框变粗的视觉体验

【】解决方案：通过设置元素的 box-sizing 为 border-box，然后构建伪元素，再使用 CSS3 的 transform 缩放

	.one-pixel-border {
	  position: relative;
	  box-sizing: border-box;
	}
	
	.one-pixel-border::before {
	  display: block;
	  content: "";
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  width: 200%;
	  height: 200%;
	  border: 1px solid red;
	  transform: translate(-50%, -50%) scale(0.5, 0.5);
	}

12、letter-spacing 与 word-spacing 的区别

【】letter-spacing作用于所有字符，但word-spacing仅作用于空格字符。换句话说，word-spacing的作用就是增加空格的间隙宽度

13、min-width/max-width 和 min-height/max-height 属性间的覆盖规则

【】max-width 会覆盖 width，即使 width 是行类样式或者设置了 !important

【】min-width 会覆盖 max-width，此规则发生在 min-width 和 max-width 冲突的时候

14、对 BFC 的理解

【】BFC 全称：Block Formatting Context， 名为 “块级格式化上下文”

【】BFC是一个完全独立的空间（布局环境），空间里的子元素不会影响到外面的布局

【】出发 BFC 的方法：

• overflow: hidden
• display: inline-block
• display: flex
• display: table-cell
• position: absolute
• position: fixed

【】BFC 解决的问题：

• 使用 Float 脱离文档流，高度塌陷
• Margin边距重叠
• 两栏布局（float 实现的）

15、画一个三角形

	.box {
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 50px 50px;
		border-color: transparent transparent red;
	}

16、两栏布局，右侧自适应

【】浮动实现

	  <style>
	    .box{
	       overflow: hidden; 
	    }
	    .left {
	       float: left;
	       width: 200px;
	       background-color: gray;
	       height: 400px;
	    }
	    .right {
	       margin-left: 210px;
	       background-color: lightgray;
	       height: 400px;
	    }
	</style>
	<div class="box">
	    <div class="left">左边</div>
	    <div class="right">右边</div>
	</div>

【】flex 实现

  <style>
    .box{
       display: flex;
    }
    .left {
       width: 100px;
       background-color: skyblue;
       height: 400px;
    }
    .right {
       flex: 1;
       background-color: pink;
       height: 200px;
    }
  </style>
  <div class="box">
    <div class="left">左边</div>
    <div class="right">右边</div>
  </div>

17、三栏布局，中间自适应

  <style>
    .wrap {
        display: flex;
        justify-content: space-between;
    }
    .left,
    .right,
    .middle {
        height: 500px;
    }
    .left {
        width: 200px;
        background: coral;
    }
    .right {
        width: 120px;
        background: lightblue;
    }
    .middle {
        background: #555;
        width: 100%;
        margin: 0 20px;
    }
  </style>
  <div class="wrap">
    <div class="left">左侧</div>
    <div class="middle">中间</div>
    <div class="right">右侧</div>
  </div>

17、响应式布局

【】响应式设计与自适应设计的区别：响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；自适应需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务层，返回不同的页面

【】布局方案

• 媒体查询
• 百分比布局：计算复杂，百分比相父元素的属性不唯一
• rem 布局：rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化
• 视口单位：vw 和 vh
• 图片响应式：使用max-width、使用srcset、使用background-image、使用pictrue标签

【】综合方案

• 用rem来做字体的适配，用srcset来做图片的响应式，宽度可以用rem，flex，栅格系统等来实现响应式，然后可能还需要利用媒体查询来作为响应式布局的基础

18、如何实现小于 12px 的字体效果

【】transform:scale()这个属性只可以缩放可以定义宽高的元素

【】而行内元素是没有宽高的，所以对于行内元素设置小于12px，我们可以加上一个display:inline-block

19、文本超出显示省略号

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

20、line-height 三种赋值方式有何区别？（带单位、纯数字、百分比）

【】带单位：px 是固定值，而 em 会参考父元素 font-size 值计算自身的行高

【】纯数字：会把比例传递给后代。例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px

【】百分比：将计算后的值传递给后代

21、圣杯布局与双飞翼布局

【】都是熟练应用padding、margin、float、margin-left、position、left

【】圣杯布局与双飞翼布局