Css详细介绍

Css部分

1、CSS 选择符有哪些

1）id选择器（ # myid）

2）类选择器（.myclassname）

3）标签选择器（div, h1, p）

4）相邻选择器（h1 + p）

5）子选择器（ul > li）

6）后代选择器（li a）

7）通配符选择器（ * ）

8）属性选择器（a[rel = “external”]）

9）伪类选择器（a: hover, li:nth-child）

• 可继承的样式：font-size font-family color, UL LI DL DD DT;

• 不可继承的样式：borderpadding margin width height ;

2、优先级为:

（就近原则）： !important > id > class > tag （!important 比内联优先级高）

3、CSS优先级算法如何计算？

1）CSS优先级比较：

!important > 内联样式 > id > class > 标签 > 通配符 > 继承 > 默认

2）CSS权重计算：

我们把特殊性分为五个等级，每个等级代表一类选择器，每个等级的值为其所代表的选择器的个数乘以这一等级的权值，最后把所有等级的值相加得出选择器的特殊值。

第一等：代表内联样式，如: style=“”，权值为1000。

第二等：代表id选择器，如：#id，权值为100。

第三等：代表类，伪类和属性选择器，如.class，权值为10。

第四等：代表标签选择器和伪元素选择器，如div p，权值为1。

第五等：通用选择器（*），子选择器（>），相邻同胞选择器（+），并不在这个等级中，权值为0

4、css3新增伪类：

p:first-of-type----选择属于其父元素的首个

元素。

p:last-of-type----选择属于其父元素的最后

元素。

p:only-of-type----选择属于其父元素唯一的

元素。

p:only-child----选择属于其父元素的唯一子元素的每个

元素。

p:nth-child(2)----选择属于其父元素的第二个子元素的每个

元素。

:enabled、:disabled 控制表单控件的禁用状态。

:checked----单选框或复选框被选中。

5、CSS3新特性：

新增各种CSS选择器 (: not(.input): 所有class不是“input”的节点）

圆角：border-radiuis

多列布局：multi-column layout

阴影和反射： multi-column layout

文字特效：text-shadow

线性渐变： gradient

旋转：transform

缩放，定位，倾斜，动画，多背景：transform: \scale(0.85,0.90) \ translate(0px, -30px) \ skew(-9deg, 0deg) \ Animation

6、CSS的可继承属性（部分）

可继承

font-size：设置字体的尺寸、font-family、color
text-indent：文本缩进
text-align：文本水平对齐
text-shadow：设置文本阴影
line-height：行高
元素可见性：visibility
光标属性：cursor

不可继承的样式：border, padding, margin, width, height

7、页面导入样式时,使用link和@import有什么区别？

相同点：都是外部引用CSS方式；

不同点

（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;

（2）link 引用 CSS 时候，页面载入时同时加载，而@import引用的CSS会等到页面被加载完再加载;

（3）link 支持使用 javascript 控制去改变样式，而@import 不支持。

（3）@import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

（5） link 方式的样式的权重高于 @import 的权重。

（6）@import 在 html 使用时候需要

8、CSS中link 和@import的区别是？

(1) link属于HTML标签，而@import是CSS提供的;

(2) 页面被加载的时，link会同时被加载，而@import被引用的CSS会等到引用它的CSS文件被加载完再加载;

(3) import只在IE5以上才能识别，而link是HTML标签，无兼容问题;

(4) link方式的样式的权重 高于@import的权重.

9、css中px和em，rem的区别

相同点：都是长度单位；

异同点：

1）px的值是固定的，指定是多少就是多少，计算比较容易。

2）em得值不是固定的，并且em会继承父级元素的字体大小。浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

3）rem相对于html

10、px/em/rem/vh/vw

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的

em是相对长度单位。相对于当前父元素的字体尺寸。如未设置，则相对于浏览器的默认字体尺寸

rem是CSS3新增的一个相对单位。使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素

css3新单位，view width的简写，是指可视窗口的宽度。假如宽度是1200px的话。那10vw就是120px

css3新单位，view height的简写，是指可视窗口的高度。假如高度是1200px的话。那10vh就是120px

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

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

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

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

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

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

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

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

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

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

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

5）sticky ：粘性定位，相当于相对定位和固定定位的混合。粘性定位根据一个阈值决定，在大于等于阈值时采用相对定位，小于阈值后则为固定定位。

6）inherit：规定应该从父元素继承 position 属性的值。

13、absolute 的 containing block 计算方式跟正常流有什么不同？

无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断：

a、若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；

b、否则,则由这个祖先元素的 padding box 构成。

如果都找不到，则为 initial containing block。

补充：

static(默认的)/relative：简单说就是它的父元素的内容框（即去掉padding的部分
absolute: 向上找最近的定位为absolute/relative的元素
fixed: 它的 containing block 一律为根元素(html/body)

14、margin和padding分别适合什么场景使用？

1）margin：

需要在 border 外侧添加空白

空白处不需要背景色

上下相连的两个盒子之间的空白，需要相互抵消时。

2）padding：

需要在border 内侧添加空白

空白处需要背景颜色

上下相连的两个盒子的空白，希望为两者之和。

3）兼容性的问题：

在IE5 IE6中，为 float 的盒子指定 margin 时，左侧的 margin 可能会变成两倍的宽度。

通过改变 padding 或者指定盒子的 display：inline 解决。

15、width: auto 和 width: 100% 的区别？

width: 100% 会使元素 box 的宽度等于父元素的 content 的宽度；

width: auto 会使元素撑满整个父元素，margin, border, padding, content 区域会自动分配水平空间；

16、display 有哪些值？说明他们的作用?

block：块类型。默认宽度为父元素宽度，可设置宽高，换行显示。

none：缺省值。像行内元素类型一样显示。

inline：行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。

inline-block：默认宽度为内容宽度，可以设置宽高，同行显示。

list-item：像块类型元素一样显示，并添加样式列表标记。

table：此元素会作为块级表格来显示。

inherit：规定应该从父元素继承 display 属性的值。

17、display:none和visibility:hidden的区别？

display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。

visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。

18、position跟display、overflow、float这些特性相互叠加后会怎么样？

display 属性规定元素应该生成的框的类型；

position 属性规定元素的定位类型；

float 属性是一种布局方式，定义元素在哪个方向浮动。

类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者 absolute 定位的元素，只能是块元素或表格。

19、常见块级元素，行内元素，css盒模型？

块级元素：div p h1 h2 h3 h4 form ul 行内元素: a b br i span input select

空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img Css盒模型：内容，border ,margin，padding

20、style标签写在body后与body前有什么区别？

写在后面可能会造成FOUC(浏览器样式闪烁或者叫做无样式内存闪烁)，写在前面是比较好的

加载顺序，在前就在 body 前加载， 在后就在 body 加载后，再加载

这跟浏览器爬虫有关，载入页面爬虫进入html模式，写在body前，页面还未开始展示，不会出现页面白屏效果；写在body后，爬到css代码的时候，爬虫进入css模式，可能会出现白屏的情况。

一般样式都是放在 head 之间的。 如果样式放在底部。 他会加载标签， 然后渲染样式。 如果加载慢的话， 你会看到他会跳舞。

21、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

标准盒子模型：宽度 = 内容的宽度（content）+ border + padding + margin

低版本IE盒子模型：宽度 = 内容宽度（content + border + padding）+ margin

22、介绍一下box-sizing属性？

box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。

1）content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高

布局所占宽度Width：

Width = width + padding-left + padding-right + border-left + border-right

布局所占高度Height:

Height = height + padding-top + padding-bottom + border-top + border-bottom

2）border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content

布局所占宽度Width：

Width = width(包含padding-left + padding-right + border-left + border-right)

布局所占高度Height:

Height = height(包含padding-top + padding-bottom + border-top + border-bottom)

3）padding-box：

布局所占宽度Width：

Width= width(包含padding-left + padding-right) + border-top + border-bottom

布局所占高度Height:

Height = height(包含padding-top + padding-bottom) + border-top + border-bottom

标准浏览器下，按照W3C规范对盒模型解析，一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。

23、怎么让Chrome支持小于12px 的文字？

（1）用图片：如果是内容固定不变情况下，使用将小于12px文字内容切出做图片，这样不影响兼容也不影响美观。

（2）使用12px及12px以上字体大小：为了兼容各大主流浏览器，建议设计美工图时候设置大于或等于12px的字体大小，如果是接单的这个时候就需要给客户讲解小于12px浏览器不兼容等事宜。

（3）继续使用小于12px字体大小样式设置：如果不考虑chrome可以不用考虑兼容，同时在设置小于12px对象设置-webkit-text-size-adjust:none，做到最大兼容考虑。

（4）使用12px以上字体：为了兼容、为了代码更简单从新考虑权重下兼容性。

24、解决li和li之间的看不见的空白间隙问题

浏览器的默认行为是把inline元素间的空白字符（空格换行tab）渲染成一个空格，也就是我们上面的代码

• 换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度。

• 方法一：既然是因为

• 换行导致的，那就可以将
• 代码全部写在一排，如下

• 方法二：.wrap ul{font-size:0px;}

  方法三：.wrap ul{letter-spacing: -5px;} 加 .wrap ul li{letter-spacing: normal;}

  25、title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别？

  title 属性没有明确意义，只表示标题；h1 表示层次明确的标题，对页面信息的抓取也有很大的影响；

  strong 标明重点内容，语气加强含义；b 是无意义的视觉表示；

  em 表示强调文本；i 是斜体，是无意义的视觉表示；

  视觉样式标签：
  <b> <i/> <u/> <s/>

  语义样式标签：
  <article>、<section>、<nav>、<aside>、<header>、<footer>、<time>

  26、::before 和 :after中双冒号和单冒号的区别？解释这2个伪元素的作用

  单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。

  伪元素由双冒号和伪元素名称组成。双冒号是在css3规范中引入的，用于区分伪类和伪元素。但是伪类兼容现存样式，浏览器需要同时支持旧的伪类，比如:first-line、:first-letter、:before、:after等。

  对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。

  提醒，如果你的网站只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用CSS2的单冒号写法

  27、rgba()和 opacity 的透明效果有什么不同？

  rgba()和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的

  所有内容的透明度，而 rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果！）

  28、清除浮动

  清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。

  在浮动元素后面添加空标签 clear:both

  给父标签使用overflow: hidden/auto;zoom:1

  父级div定义, 使用伪类:after和zoom

  .clearfloat:after{display:block;clear:both;content:“”;visibility:hidden;height:0}

  .clearfloat{zoom:1}

  29、浮动元素引起的问题和解决办法？

  浮动元素引起的问题：

  （1）父元素的高度无法被撑开，影响与父元素同级的元素

  （2）与浮动元素同级的非浮动元素（内联元素）会跟随其后

  （3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

  解决方法：

  使用CSS中的clear:both;属性来清除元素的浮动可解决2、3问题，对于问题1，添加如下样式，给父元素添加clearfix样式：

  .clearfix:after{content:“.”;display: block;height:0;clear: both;visibility: hidden;}

  .clearfix{display: inline-block;} /* for IE/Mac */

  清除浮动的几种方法：

  1）额外标签法，<divstyle=“clear:both;”>（缺点：不过这个办法会增加额外的标签使HTML结构看起来不够简洁。）

  2）使用after伪类

  #parent:after{
  content:“.”;
  height:0;
  visibility:hidden;
  display:block;
  clear:both;
  }

  3）浮动外部元素

  4）设置overflow为hidden或者auto

  30、解释CSS Sprites, 以及你要如何使用?

  CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

  31、介绍flex布局

  1）Flex布局

  a、即弹性布局，当一个布局需要自适应或者，一边固定宽度，其他自适应的情况下，使用flex布局

  b、当想要使用flex布局的时候，找到其父元素，给父元素的类添加display:flex即可，在固定宽度的位置固定宽度，其他需要自适应的兄弟元素，分配flex，意思就是父盒子总宽度 - 固定宽度为剩余总宽度，把剩余需要自适应的兄弟元素按照需要的比例去分配剩余总宽度

  2）Flex布局的各种属性

  a、flex-direction调整主轴方向（默认为水平方向）

  b、justify-content调整主轴对齐

  c、align-items调整侧轴对齐（子元素可以使用align-self覆盖）

  d、flex-wrap控制是否换行

  e、align-content堆栈（由flex-wrap产生的独立行）对齐

  f、flex-flow是flex-direction + flex-wrap的简写形式

  g、flex是子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配

  h、order控制子项目的排列顺序，正序方式排序，从小到大

  3）主轴属性

  a、flex-direction

  b、flex-wrap

  c、flex-flow

  d、justify-content

  e、align-items

  f、align-content

  4）交叉轴属性

  a、order

  b、flex-grow

  c、flex-shrink

  d、flex-basis

  e、flex

  f、align-self

  32、实现多行文本溢出显示…

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;

  33、让图文不可复制

  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;

  34、改变 placeholder 的字体颜色大小

  其实这个方法也就在 PC 端可以。
  input::-webkit-input-placeholder {
  font-size:14px; /* WebKit browsers /
  color: #333;
  }
  input::-moz-placeholder {
  font-size:14px; / Mozilla Firefox 19+ /
  color: #333;
  }
  input:-ms-input-placeholder {
  font-size:14px; / Internet Explorer 10+ */
  color: #333;
  }

  35、实现不使用 border 画出1px高的线，在不同浏览器的Quirks mode和CSS Compat模式下都能保持同一效果

  36、如何实现一个 div 的上下垂直居中？

  1）水平居中

  a、使用 margin: 0 auto;（只适用于子盒子有宽的时候）

  .child {
   	margin: 0 auto;
  }
  

  b、text-align + display（子盒子有或没有宽度的时候都适用）

  .parent {
   	text-align: center;
  }
  .child {
   	display: inline-block;
  }
  

  c、position 定位（只适用于子盒子有宽度和高度的时候）

  .parent {
   	position: relative;
  }
  .child {
   	position: absolute;
  	top: 0;
  	left: 50%;
  	margin-left: -25px;  /* 子盒子自身宽度一半 */
  }
  

  d、position + transform（子盒子有或没有宽高的时候都适用）

  .parent {
   	position: relative;
  }
  .child {
   	position: absolute;
  	top: 0;
  	left: 50%;
  	transform: translate(-50%, 0);
  }
  

  e、flex 布局（弹性布局）（子盒子有或没有宽高的时候都适用）

  .parent {
   	display: flex;
   	justify-content: center;
  }
  

  2）垂直居中

  a、行高法 line-height

  如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如：

  p { 
  	height:30px; 
  	line-height:30px; 
  	width:100px; 
  	overflow:hidden; 
  }
  

  b、内边距法 padding

  这一种方法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用 padding 将内容垂直居中，比如：

  p { padding:20px 0; }
  

  c、position + CSS3的 transform 来实现

  .parent {
   	position: relative;
  }
  .child {
   	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
  }
  

  d、flex 布局

  .parent {
      display: flex;  /*flex 布局*/
      align-items: center;  /*实现垂直居中*/
      justify-content: center;  /*实现水平居中*/
  }
  

  e、position 定位（适用于子盒子有宽度和高度的时候）

  .parent {
   	position: relative;
  }
  .child {
   	position: absolute;
  	top: 50%;
  	left: 50%;
  	margin-top: -25px;  /* 子盒子自身高度一半 */
  	margin-left: -25px;  /* 子盒子自身宽度一半 */
  }
  

  37、浏览器是怎样解析CSS选择器的？

  CSS选择器的解析是从右向左解析的。

  a、若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。

  b、若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。

  c、两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。

  而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。在建立 Render Tree 时（WebKit 中的Attachment过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。

  38、在网页中的应该使用奇数还是偶数的字体？为什么呢？

  尽量使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。

  39、全屏滚动的原理是什么？用到了CSS的哪些属性？

  原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过 transform 进行y轴定位，也可以通过 margin-top 实现。

  属性：overflow：hidden；transition：all 1000ms ease；

  40、什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

  响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。

  基本原理是通过媒体查询 @media 检测不同的设备屏幕尺寸做处理。

  兼容低版本IE 可以使用JS辅助一下来解决。

  41、视差滚动效果？

  视差滚动（Parallax Scrolling）通过在网页向下滚动的时候，控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。

  实现方式：

  1）CSS3 实现

  优点：开发时间短、性能和开发效率比较好；

  缺点是不能兼容到低版本的浏览器

  2）jQuery 实现

  通过控制不同层滚动速度，计算每一层的时间，控制滚动效果。

  优点：能兼容到各个版本的，效果可控性好

  缺点：开发起来对制作者要求高

  插件实现方式

  例如：parallax-scrolling，兼容性比较好

  42、让页面里的字体变清晰，变细用CSS怎么做？

  -webkit-font-smoothing 在window系统下没有起作用，但是在IOS设备上起作用

  -webkit-font-smoothing：antialiased 是最佳的，灰度平滑。
  43、position:fixed; 在 android 下无效怎么处理？

  < meta name=“viewport”
  content=“width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no”
  />

  44、如果需要手动写动画，你认为最小时间间隔是多久，为什么？

  多数显示器默认频率是 60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。

  45、display:inline-block 什么时候会显示间隙？

  有空格时候会有间隙——解决：移除空格

  margin 正值的时候——解决：margin使用负值

  使用 font-size 时候——解决：font-size:0、letter-spacing、word-spacing

  46、CSS属性 overflow 属性定义溢出元素内容区的内容会如何处理?

  参数是 scroll 时候，必会出现滚动条。

  参数是 auto 时候，子元素内容大于父元素时出现滚动条。

  参数是 visible 时候，溢出的内容出现在父元素之外。

  参数是 hidden 时候，溢出隐藏。

  47、阐述一下CSS Sprites（雪碧图）

  将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background- repeat，background-position 的组合进行背景定位。

  利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能；CSS Sprites能减少图片的字节。

  48、Sass、Less 是什么？大家为什么要使用他们？

  他们是CSS预处理器。是CSS上的一种抽象层。它们是一种特殊的语法、语言编译成CSS。

  a、Less 是一种动态样式语言。将CSS赋予了动态语言的特性，如变量，继承，运算，函数。Less即可以在客户端上运行（支持IE6+,Webkit,Firefox），也可以在服务端运行（借助Node.js）。

  b、Sass 变量必须是 $ 开始，而 Less 变量必须使用 @ 符号开始。

  为什么要使用它们？

  a、结构清晰，便于扩展。

  b、可以方便地屏蔽浏览器私有语法差异。（这个不用多说，封装对浏览器语法差异的重复处理，减少无异议的机械劳动。）

  c、可以轻松实现多重继承。

  完全兼容CSS代码，可以方便地应用到老项目中。Less 只是在CSS语法上做了扩展，所以老的CSS代码也可以与 Less 代码一同编译。

  49、如何适配移动端？【 经典 】

  （1）使用百分比长度来取代固定长度。如果做不到这一点，也应该尝试使用与视口相关的单位（ vw、vh、vmin 和 vmax ），它们的值解析为视口宽度或者高度的百分比。

  （2）当你需要在较大分辨率下得到固定宽度时，使用max-width而不是width，因为它可以适应较小的分辨率，而无需使用媒体查询。

  （3）不要忘记为替换元素（ 比如 img、object、video、iframe等 ）设置一个 max-width，值为100%

  （4）假如背景图片需要完整地铺满一个容器，不管容器的尺寸如何变化，background-size:cover; 这个属性都可以做到。但是，我们也要时刻牢记–带宽并不是无限的，因此在移动网页中通过 css 把一张大图缩小显示往往是不明智的。

  （5）当图片（ 或其他元素 ）以行列式进行布局时，让视口的宽度来决定列的数量。弹性盒布局（ 即Flexbox ）或者 display:inline-block; 加上常规的文本折行行为，都可以实现这一点。

  （6）在使用多行文本时，指定 column-width （ 列宽 ）而不是指定 column-count（ 列数 ），这样它就可以在较小的屏幕上自动显示为单例布局。

  50、CSS优化技巧

  合理使用选择器

  减少DOM操作，减少重绘和重排

  去除无效的选择器

  文件压缩

  异步加载文件

  减少@import的使用

  避免过度约束避免后代选择符避免链式选择符使用紧凑的语法避免不必要的命名空间避免不必要的重复最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么避免 !important，可以选择其他选择器尽可能的精简规则，你可以合并不同类里的重复规则
  

  51、用纯CSS创建一个三角形的原理是什么？

  /*
  采用的是相邻边框链接处的均分的原理
  将元素的宽高设为0，只设置 border ,
  将任意三条边隐藏掉（颜色设为 transparent ）,剩下的就是一个三角形
  */
  #demo{
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
  }