常见css相关问题

常见css相关问题

Link和@import的区别

两者都是外部引用CSS的方式，它们的区别如下：

• link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

• link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

• link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

• link支持使用Javascript控制DOM去改变样式；而@import不支持。

盒模型

• 盒模型都是由四个部分组成的，分别是margin、border、padding和content。

• 标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同：

  标准盒模型的width和height属性的范围只包含了content，
  IE盒模型的width和height属性的范围包含了border、padding和content。

  可以通过修改元素的box-sizing属性来改变元素的盒模型：
  box-sizeing: content-box表示标准盒模型（默认值）
  box-sizeing: border-box表示IE盒模型（怪异盒模型）

为什么有时候⽤translate来改变位置⽽不是定位

**translate** 是 **transform** 属性的⼀个值。改变**transform**或**opacity**不会触发浏览器重新布局（**reflow**）或重绘（**repaint**），只会触发复合（**compositions**）。⽽改变绝对定位会触发重新布局，进⽽触发重绘和复合。 

li 与 li 之间有看不见的空白间隔

浏览器会把inline内联元素间的空白字符（空格、换行、Tab等）渲染成一个空格。为了美观，通常是一个放在一行，这导致换行后产生换行字符，它变成一个空格，占用了一个字符的宽度。

解决办法：

（1）为li设置float:left。不足：有些容器是不能设置浮动，如左右切换的焦点图等。

（2）将所有li写在同一行。不足：代码不美观。

（3）将li内的字符尺寸直接设为0，即font-size:0。不足：li中的其他字符尺寸也被设为0，需要额外重新设定其他字符尺寸，且在Safari浏览器依然会出现空白间隔。

（4）消除li的字符间隔letter-spacing:-8px，不足：这也设置了li内的字符间隔，因此需要将li内的字符间隔设为默认letter-spacing:normal。

CSS3新特性

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

圆角 （border-radius:8px）

多列布局 （multi-column layout）

阴影和反射 （Shadoweflect）

文字特效 （text-shadow）

文字渲染 （Text-decoration）

线性渐变 （gradient）

旋转 （transform）

::before 和 :after 的双冒号和单冒号有什么区别？

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

画一条0.5px的线

transform: scale(0.5,0.5);

<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

设置小于12px的字体

• 使用css3的transform缩放属性**-webkit-transform:scale(0.5)**

• 使用图片

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

opacity作用于元素以及元素内的所有内容（包括文字）的透明度；

rgba() 只作用于元素自身的颜色或其背景色，子元素不会继承透明效果；

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

• 有空格时候会有间隙， 可以删除空格解决；
• margin正值的时候， 可以让margin使用负值解决；
• 使用font-size时候，可通过设置font-size:0、letter-spacing、word-spacing解决；

line-height 如何理解

line-height指的是一行字的高度，包含了字间距，实际上是下一行基线到上一行基线的距离。如果一个标签没有定义height属性，那么其最终表现的高度是由line-height决定的。一个容器没有设置高度，那么撑开容器的高度的是line-height,而不是容器内部的文字内容。把line-height值设置为height一样大小的值可以实现单行文字的垂直居中。line-height和height都能撑开一个高度，height会触发haslayout，而line-height不会。

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

display 属性规定元素应该生成的框的类型；position属性规定元素的定位类型；float属性是一种布局方式，定义元素在哪个方向浮动。
类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。

BFC、IFC

BFC的全称是 Block Formatting Contexts。一个决定如何渲染元素的容器

• 渲染规则

  1. 内部的块级元素会在垂直方向，一个接一个地放置

  2. 块级元素垂直方向的距离由margin决定。属于同一个BFC的两个相邻块级元素的margin会发生重叠

  3. BFC的区域不会与浮动元素重叠

  4. BFC是一个隔离的独立容器，容器里面的子元素和外面的元素互不影响

  5. 计算BFC容器的高度时，浮动元素也参与计算

• 触发条件

  根元素html

  float的值不是none。

  position的值不是static或者relative。

  display的值是inline-block、inline-flex、flex、flow-root、table-caption、table-cell。

  overflow的值不是visible。

• 应用

  清除浮动，clear:both规定左右两侧都不允许浮动。

  上下margin间距问题，利用BFC渲染规则，同一个BFC会产生，两个不同得BFC就不会产生重叠。

IFC的全称是Inline Formatting Contexts，也就是“内联格式化上下文”。

• IFC渲染规则

  子元素水平方向横向排列，并且垂直方向起点为元素顶部。

  子元素只会计算横向样式空间，【padding、border、~】，垂直方向样式空间不会被计算，【padding、border、margin】。

  在垂直方向上，子元素会以不同形式来对齐（vertical-align）

  能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框（line box）。行框的宽度是由包含块（containing box）和与其中的浮动来决定。

  IFC中的“line box”一般左右边贴紧其包含块，但float元素会优先排列。

  IFC中的“line box”高度由 CSS 行高计算规则来确定，同个IFC下的多个line box高度可能会不同。

  当 inline-level boxes的总宽度少于包含它们的line box时，其水平渲染规则由 text-align 属性值来决定。

  当一个“inline box”超过父元素的宽度时，它会被分割成多个boxes，这些 boxes 分布在多个“line box”中。如果子元素未设置强制换行的情况下，“inline box”将不可被分割，将会溢出父元素。