Css部分

1、CSS 选择符有哪些

1id选择器 # 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优先级算法如何计算

1CSS优先级比较

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

2CSS权重计算

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

第一等代表内联样式如: 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方式

不同点

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

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

3link 支持使用 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和emrem的区别

相同点都是长度单位

异同点

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

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

3rem相对于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分别是相对于谁进行定位的

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

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

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

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

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

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

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

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

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

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

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

6inherit规定应该从父元素继承 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分别适合什么场景使用

1margin

需要在 border 外侧添加空白

空白处不需要背景色

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

2padding

需要在border 内侧添加空白

空白处需要背景颜色

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

3兼容性的问题

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

通过改变 padding 或者指定盒子的 displayinline 解决。

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 属性是一种布局方式定义元素在哪个方向浮动。

类似于优先级机制positionabsolute/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 ,marginpadding

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。

1content-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

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

3padding-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布局

  1Flex布局

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

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

  2Flex布局的各种属性

  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 实现。

  属性overflowhiddentransitionall 1000ms ease

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

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

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

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

  41、视差滚动效果

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

  实现方式

  1CSS3 实现

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

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

  2jQuery 实现

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

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

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

  插件实现方式

  例如parallax-scrolling兼容性比较好

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

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

  -webkit-font-smoothingantialiased 是最佳的灰度平滑。
  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-imagebackground- repeatbackground-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;
  }