css 问题汇总

盒模型

盒模型的组成，由里向外content,padding,border,margin.

在IE盒子模型中，width表示content+padding+border这三个部分的宽度

在标准的盒子模型中，width指content部分的宽度

box-sizing的使用

  box-sizing: content-box 是W3C盒子模型
  box-sizing: border-box 是IE盒子模型

box-sizing的默认属性是content-box

 

如何解决html设置height：100%无效的问题？

解决方法：

1. html, body { height: 100%; }
2. div { height: 100%; position: absolute; } 前提是，父元素要设置宽高，并且使用position定位:relative/absolute....

css的height:100%和height:inherit有什么区别？

    height: 100%; 是会继承父元素的100%的高度  ，     height: inherit; 是会继承父元素的高度

1. 兼容性差异
    height:100%             IE6+ √
    height:inherit            IE8+ √

2. 绝对定位大不同

css如何让height:100%起作用？

1. 显式指定高度

html, body {
  height: 100%; 
}

    2.使用绝对定位。

.div {
    position: absolute;
    height:100%;
}

在使用height: 100%;时需要注意的一些事项

1. Margins 和 padding 会让你的页面出现滚动条。
2. 如果你的元素实际高度大于你设定的百分比高度，那元素的高度会自动扩展。

用css3实现文字发光的效果

1. text-shadow属性的基本语法：text-shadow：h-shadow v-shadow blur color；
2. h-shadow: 水平阴影的位置(阴影水平偏移量)，可为负值。v-shadow: 垂直阴影的位置(阴影垂直偏移量)，可为负值。
3. blur: 阴影模糊的距离(默认为0)。
4. color: 阴影颜色，一般默认为字体的颜色。
5. 此外我们还可以使用text-shadow的另外一个特性：同时设置多个阴影(使用逗号分隔设置多个阴影)。

你有使用过css的属性background-blend-mode吗？说说它的运用场景有哪些？

      background-blend-mode：属性定义了背景层的混合模式（图片与颜色）/不兼容IE

语法

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

CSS优先级算法

1. 优先级（就近原则）：!important > [ id > class > tag ]   (!important 比内联优先级高)
2. 元素选择符： 1、class选择符： 10、id选择符：100、元素标签：1000
3. !important声明的样式优先级最高，如果冲突再进行计算。
4. 如果优先级相同，则选择最后出现的样式。
5. 继承得到的样式的优先级最低

display:none与visibility：hidden的区别

1. display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘 --性能方面） 
2. visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘 --性能方面）

CSS优化、提高性能的方法

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

设置Chrome支持小于12px 的文字

p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是缩放比例

单行文本的溢出显示省略号

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

多行文本溢出

• display: -webkit-box;
• -webkit-box-orient: vertical;
• -webkit-line-clamp: 3;  //行數
• overflow: hidden;

calc, support, media各自的含义及用法？

• @support主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补。
• calc() 函数用于动态计算长度值。 calc()函数支持 "+", "-", "*", "/" 运算；
• @media 查询，你可以针对不同的媒体类型定义不同的样式。

css水平、垂直居中的写法

水平居中

• 行内元素: text-align: center
• 块级元素: margin: 0 auto

• {
      position:absolute；
      left:50%；
      transform:translateX(-50%)；
  }

• {
      display:flex；
      justify-content: center
  }

 

垂直居中

• 设置line-height 等于height

•    position：absolute ;
     top:50%;
     transform:translateY(-50%);
  

 

•      display:flex ;
       align-items: center;

•     display:table;
      display:table-cell ;
      vertical-align: middle;

画一条0.5px的直线？

height: 1px;
transform: scale(0.5);

鼠标形状

cursor：鼠标形状参数

default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize	此光标指示矩形框的边缘可被向下移动（南）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
help	此光标指示可用的帮助（通常是一个问号或一个气球）。