最全面试题CSS(含答案)

发布时间:2024-04-12 17:01

1、display:none; 和visibility:hidden;的区别是什么?

display:none; 彻底消失,释放空间。能引发页面的reflow回流(重排)。

visibility:hidden; 就是隐藏,但是位置没释放,好比opacity:0; 不引发页面回流。


2、CSS 优先级和权重值如何计算

内嵌样式>内部样式>外部样式>导入式

!important > 内嵌 1000 >Id 100 > class=[]=伪类 10 > tag=伪元素 1 > ( * + > ~) 0


3、如何触发BFC,以及BFC的作用

BFC:块级格式化上下文block formatting context,是一个独立渲染区域。规定了内部box如何布局,并且与这个区域外部毫不相干。

触发:float的值不是none;position的值不是static或者relative;display的值是inline-block、block、table-cell、flex、table-caption或者inline-flex;overflow的值不是visible。

作用:避免margin重叠;自适应两栏布局;清除浮动。


4、CSS盒模型

盒模型由:外边距margin、边框border、内边距padding、内容content四个部分组成

标准盒模型大小=border+padding+content

怪异盒模型大小=content

转怪异盒模型:box-sizing:border-box;

转标准盒模型:box-sizing:content-box;


5、如何水平垂直居中一个元素

5.1、弹性盒子

.box{
  display: flex;
  justify-content: center;
  align-items: center;
}

5.2、定位

.box{
  position: relative;
} 
.box .sub{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*margin-left: 负的宽度的一半*/
  /*margin-top: 负的高度的一半*/
}


6、css实现一个三角形

.triangle{
  width: 0;
  height: 0;
  border: 100px solid transparent;
  border-left-color: red;
}


7、如何实现左边固定宽,右边自适应布局

7.1、圣杯布局

<div id="container">
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
</div>
#container {
  padding-left: 200px; 
  padding-right: 150px;
}
#container .column {
  float: left;
}
#center {
  width: 100%;
}
#left {
  width: 200px; 
  margin-left: -100%;
  position: relative;
  right: 200px;
}
#right {
  width: 150px; 
  margin-right: -150px; 
}

7.2、双飞翼布局

  <div id="container" class="column">
    <div id="center"></div>
  </div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
  #container {
    width: 100%;
  }
​
.column {
  float: left;
}
        
#center {
  margin-left: 200px;
  margin-right: 150px;
}
        
#left {
  width: 200px; 
  margin-left: -100%;
}
        
#right {
  width: 150px; 
  margin-left: -150px;
}  

7.3、等高布局(假等高)互补的内外边距

.parent{
  overflow: hidden;
}
.left, .right{
  margin-bottom: -10000px;
  padding-bottom: 10000px;
}

7.4、等高布局(真等高)弹性盒子

.parent{
  display: flex;
}
.child{
  flex: 1;
}

7.5、calc

  <div id="left" class="column"></div>
  <div id="center" class="column"></div>
  <div id="right" class="column"></div>
  .column{
    float: left;
  }
  #left{
    width: 100px;
  }
  #right{
    width: 200px;
  }
  #center{
    width: calc(100% - 100px - 200px);
  }

7.6、浮动

  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
  <div id="center"></div>
  #left{
    float: left;
    width: 100px;
  }
  #right{
    float: right;
    width: 200px;
  }
  #center{
    margin-left: 100px;
    margin-right: 200px;
  }


8、如何实现6px字体

.font{
  font-size: 12px;
  transform: scale(.5);
}


9、移动端1px边框怎么设置

/* 方法1 */
.border{
  width: 100%;
  height: 1px;
  background: red;
}
/* 方法2 */
.border{
  border-image: url(border.png)
}
/* 方法3 */
.border{
  box-shadow: 0 0 0 1px #000;
}


10、px、em、rem、vh、vw分别是什么

px物理像素,绝对单位;em相对于自身字体大小,如果自身没有大小则相对于父级字体大小,如果父级也没有则一层一层向上查找,直到找到html为止,相对单位;rem相对于html的字体大小,相对单位;vh相对于屏幕高度的大小,相对单位;vw相对于屏幕宽度的大小,相对单位。


11、css可继承的属性有哪些

可继承的属性:文本类:text-indent、text-align、line-height、word-spacing、letter-spacing、text-transform、direction、color;

字体类:font、font-family、font-weight、font-size、font-style、font-variant、font-stretch、font-size-adjust;

其它类:visibility、caption-side、border-collapse、border-spacing、empty-cells、table-layout、list-style-type、list-style-image、list-style-position、list-style、quotes、cursor、page、page-break-inside、windows、orphans等

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号