阅读 87

CSS

display: none; 与 visibility: hidden; 的区别

  • 联系:它们都能让元素不可见

  • 区别:

    1.display:none;会让元素完全从渲染树中消失,渲染的时候不占据任何空间;visibility: hidden;不会让元素从渲染树消失,渲染师元素继续占据空间,只是内容不可见

    2.display: none;是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示;visibility:hidden;是继承属性,子孙节点消失由于继承了hidden,通过设置visibility: visible;可以让子孙节点显式

    3.修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘

    4.读屏器不会读取display: none;元素内容;会读取visibility: hidden元素内容

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

// 把上、左、右三条边隐藏掉(颜色设为 transparent)
#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}
复制代码

谈谈浮动和清除浮动

浮动的框可以向左或向右移动,直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上

请解释一下 CSS3 的 Flexbox(弹性盒布局模型)以及适用场景

怎么让Chrome支持小于12px 的文字?

  .shrink{
    -webkit-transform:scale(0.8);
    -o-transform:scale(1);
    display:inline-block;
  }
复制代码

抽离样式模块怎么写,说出思路?

CSS可以拆分成2部分:公共CSS 和 业务CSS:

1.网站的配色,字体,交互提取出为公共CSS。这部分CSS命名不应涉及具体的业务
2.对于业务CSS,需要有统一的命名,使用公用的前缀。可以参考面向对象的CSS
复制代码

清除浮动最佳实践

.clearfix:after{
    content: "\200B";
    display: table; 
    height: 0;
    clear: both;
  }
  .clearfix{
    *zoom: 1;
  }
复制代码
文章分类
阅读
文章标签