前端面试题（css）

前端界的小学生_

已于 2023-05-24 20:31:10 修改

阅读量166

点赞数

文章标签： css 前端面试

于 2023-05-24 20:28:19 首次发布

本文链接：https://blog.csdn.net/patrick_bulong/article/details/130854701

版权

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;
}

扩展  弹性盒子属性
父元素的属性
display:flex/inline-flex
justify-content:flex-start  子元素从开始位置排列
justify-content:flex-end    子元素从结束位置排列
justify-content:center      子元素从中间排列
justify-content:space-butween  两端对齐
justify-content:space-around  每个盒子两边距一样，两个盒子中间有双倍间距
justify-content:space-evenly   盒子中间的边距都一样大 

主轴排列
flex-direction:row   横轴  排列是从左到右
flex-direction:row-reverse   横轴  排列是从右到左
flex-direction:column   竖轴  排列是从上到下
flex-direction:column-reverse   竖轴    排列是从下到上

交叉轴的排列方式
alingn-items:flex-start  不改变方向的前提下 最上边显示
alingn-items:flex-end  不改变方向的前提下 最下边显示
alingn-items:center  不改变方向的前提下 中间
alingn-items:baseline  基线对齐
alingn-items:stretch  默认子元素高度默认拉满

超出宽度换行

flex-worp:wrap  换行
flex-wrop:nowrap 不换行

多行的排列的方式

align-content:flex-start  所有行从最上边展示
align-content:flex-end    所有行从最下边展示
align-content:center      所有行从中间展示
align-content:space-butween  多行两端对齐
align-content:space-around  每一行有相同的间距，行与行之间有双倍的间距
align-content:space-evenly   每行间距都一样

子元素身上的属性

子元素排序
    order:1  默认0 值越大越靠后
单个子元素在交叉轴的对齐方式
    align-self...和align-items值一样
    
子元素的放大
    flex-grow:1  默认0 不放大
子元素缩小
    flex-shrink:1 默认1 不缩小

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; 
}

步骤：
1.写结构 注意顺序是中左右
2.给三个盒子设置浮动
3.给左侧盒子设置margin-left:-100%(让左侧盒子移动到最右边)
4.给右侧盒子设置margin-left:负的右盒子的宽度（让右侧盒子最右边）
5.给父元素设置padding:0 右侧盒子的宽度 0 左侧盒子的宽度 (把内容挤出来)
6.给左侧盒子position:relative;left:负的左侧盒子的宽度（让左侧盒子归位）
7.给右侧盒子position:relative;left:正的右侧盒子的宽度（让右侧盒子归位）
8.给父盒子设置min-width:xxxpx (缩小屏幕时，防止盒子掉下来)

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;
}

 

双飞翼布局
步骤
1.结构，顺序是中，左，右
2.给三个盒子设置浮动
3.给左侧盒子设置margin-left:-100% (让左侧盒子移动到最左边)
4.给右侧盒子设置margin-left:负的右侧盒子的宽度 (让右侧盒子移动到最右边)
5.给最大盒子（自适应的盒子）添加一个子元素，给儿子设置margin:0 右侧盒子宽度 0 左侧盒子的宽度
6.给父元素加min-width:xxxpx (防止盒子掉下来)

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>

 .column{
    float: left;
  }
  #left{
    width: 100px;
  }
  #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相对于父级字体大小，相对单位；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等