Skip to content
  1. 对于面试题,第一时间想到其本质 --> 考点是什么
  2. 如何看待做不完的题海 -> 不变应万变(题可变,考点不变)
  3. 如何对待接下来的题目 -> 题目到知识点,再回到题目

CSS面试题相关

盒模型

标准盒模型(W3C)

  • width = content ;
  • box-sizing : content-box

IE盒模型

  • width = content + padding + border
  • Box-sizing: border-box

BFC的理解和应用

BFC, Block format context, 块级格式化上下文 一块独立的渲染区域,内部元素不会影响外部元素 形成BFC的常见条件

  1. float 不是none
  2. position不是absolute 或 fixed
  3. overflow不是visible
  4. display 是 flex inline-block

应用:

  1. 清浮动

position有哪些定位,absolute和relative分别依据什么定位

  • static
  • relative
  • absolute
  • fixed
  • sticky     粘性定位

relative依据自身定位, absolute依据最近一层的定位元素定位

水平垂直居中的实现方式

  1. flex
  2. absolute + 负margin
  3. absolute + transform
  4. absolute + margin:auto + left/right/top/bottom:0
  5. absolute + calc()
  6. grid布局

line-height的继承问题

  1. 如果是纯数字值,则直接继承该值。
  2. 如果是百分比,会算完父级元素后,再继承

rem是什么,如何实现响应式

  1. px是绝对长度单位,
  2. em相对长度单位,相对于父元素
  3. rem,相对长度单位,相对于根元素,常用于响应式
  4. rem的弊端

CSS权重计算规则

  • !important     10000
  • 行内(内联)样式    如: style=""    1000
  • ID选择器    #id      100
  • Class、伪类、属性选择器   :hover  [type="text"]   10
  • 标签选择器、伪元素选择器    p、div   :before;   0001
  • 通用选择器*; 子选择器 > ;  相邻选择器 + ; 同胞选择器 ~  ;继承选择器  0000
  1. 计算优先级的前提是选择器作用于相同的元素
  2. 继承来的样式权重优先级最低,可视为0
html
<style type="text/css">
  #a {font-size:12px}    //100
  div p{ font-size:13px }  // 2
  div .c{ font-size:14px }  //12
  .a .b .c{ font-size:15px }  //30
  #b{ font-size:16px }  // 100   
</style>

<body>
  <div id="a" class="a">
    <div id="b" class="b">
      <p id="c" class="c">I’am here</p>  // 15px
    </div>
  </div>
</body>

// 从上到下权重 100 2 12 30 100; 
//  实际命中 #c .c 的 只有  div .c 和  .a .b .c ; 
// 所以命中15px;

什么是BFC? 触发BFC的条件?

定义

BFC (Block Formatting Context,块级格式化上下文) 决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。简言之,就是一个特殊的块,内部的元素和外部的元素不会相互影响。BFC内的盒子会在垂直方向上一个接一个地放置,垂直方向上也会发生外边距重叠。

触发条件

  1. float属性   (不为none时)
  2. overflow属性(不为visible时) hidden;
  3. position属性(为absolute 或 fixed)
  4. display属性 (为inline-block,flex,  table-cell,table-caption,,inline-flex)
overflow:hidden`、`float:left/right`、`position:absolute`  display: flex;

应用场景

  1. 防止外边距重叠
  2. 可以包含浮动元素( 创建父级BFC) - 清除内部浮动
  3. 清除浮动的原理是两个div都位于同一个BFC区域中
  4. 计算 BFC 的高度时,浮动子元素也参与计算
  5. 自适应布局(BFC不与float box重叠)

外边距重叠(collapsing margins)/ margin坍塌问题

  • 相邻的两个或多个普通流中的块元素,如果它们设置了外边距,那么在垂直方向上,外边距会发生重叠,以绝对值大的那个为最终结果显示在页面上,即最终的外边距等于发生层叠的外边距中绝对值较大者
  • 防止外边距重叠:创建BFC
  • 行内元素、浮动元素、绝对定位元素之间的外边距都不会叠加

flex常用属性; flex: 0 1 auto;

容器属性  6个

  • flex-direction
    • 决定主轴方向
    • row | row-reverse | column | column-reverse;
  • flex-wrap
    • 决定项目(item)如果一条轴线排不下,如何换行
    • nowrap | wrap | wrap-reverse;
  • flex-flow
    • flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
    • flex-flow:
  • justify-content
    • 定义了项目在主轴上的对齐方式
    • flex-start | flex-end | center | space-between | space-around
  • align-items
    • 定义项目在交叉轴上如何对齐
    • flex-start | flex-end | center | baseline | stretch(撑满)
  • align-content
    • 定义了多根轴线的对齐方式,如果项目只有一根轴线,该属性不起作用
    • flex-start | flex-end | center | space-between | space-around | stretch

项目属性 6个

  • order
    • 定义项目的排列顺序。数值越小,排列越靠前,默认为0
    • order:
  • flex-grow
    • 定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大
    • flex-grow: ; /_ default 0 _/
  • flex-shrink
    • 定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
    • flex-shrink: ; /_ default 1 _/
  • flex-basis
    • 在分配多余空间之前,项目占据的主轴空间(main size),默认值为auto
    • flex-basis:  | auto; /_ default auto _/
    • 可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间
  • flex
    • flex属性是flex-grow, flex-shrink 和 flex-basis的简写, 默认 0 1 auto; 后两个属性可选;
    • flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
  • align-self
    • 允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性
    • align-self: auto | flex-start | flex-end | center | baseline | stretch;

水平垂直居中的方式?

html
<div class="outer">
    <div class="inner"></div>
</div>

1. flex

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

2. position+transform, inner高宽未知

css
.outer{
    position:relative;
}
.inner{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

3.  position + 负margin, inner宽高已知

css
.outer{
    position: relative;
}
.inner{
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

4.设置各个方向的距离都是0,再将margin设为auto

前提:inner高宽已知

css
.outer {
    position: relative;
}
.inner {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

清除浮动的方式?

清除浮动主要是为了防止父元素塌陷

方法一:clearfix伪类

html
<div class="outer clearfix">
    <div class="inner">inner</div>
</div>
<style>
.outer{
    background: blue;
}
.inner{
    width: 100px;
    height: 100px;
    background: red;
    float: left;
}
.clearfix:after{
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}
</style>
解析原理:
1) display:block 使生成的元素以块级元素显示,占满剩余空间;
2) height:0 避免生成内容破坏原有布局的高度。
3) visibility:hidden 使生成的内容不可见,并允许可能被生成内容盖住的内容可以进行点击和交互;

方法二:额外加一个div, clear:both

html
<div class="container">
    <div class="inner"></div>
    <div class="clear"></div>
</div>
.container{
    background: blue;
}
.inner {
    width: 100px;
    height: 100px;
    background: red;
    float: left;
}
.clear{
    clear:both;
}

方法三 : 触发父盒子BFC, overflow:hidden;

html
<div class="outer">
    <div class="inner">inner</div>
</div>
.outer{
    background: blue;
    overflow: hidden;
}
.inner {
    width: 100px;
    height: 100px;
    background: red;
    float: left;
}

如何用css实现一个三角形

1. 利用border属性

css
.triangle{
  width:0;
  height:0;
	border-right:50px solid transparent;
	border-left:50px solid transparent;
	border-bottom:50px solid red;

}

2. 利用CSS3的clip-path属性

css
.triangle {
    width: 30px;
    height: 30px;
    background: red;
  // 将坐标(0,0),(0,30),(30,0)连成一个三角形
    clip-path: polygon(0px 0px, 0px 30px, 30px 0px); 
    transform: rotate(225deg); // 旋转225,变成下三角
}

伪类和伪元素的区别

  • 伪类 :表示被选择元素的某种状态,例如 :hover
  • 伪元素:类似于增添一个新的DOM节点到DOM树中,而不是改变元素的状态。(但又不是真的增加一个节点,这也是被称为伪元素的原因)

关键区别

伪类是操作文档中已有的元素,而伪元素是创建了一个文档外的元素。

伪元素

伪类

  1. 从属关系区别

@import 是 CSS 提供的语法规则,只有导入样式表的作用;link 是 HTML 提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等

  1. 加载顺序区别

加载页面时,link 标签引入的 CSS 被同时加载;@import 引入的 CSS 将在页面加载完毕后被加载。