整理css常见面试题

盒子模型

• 标准盒模型：content

• 怪异盒模型： border+content

专题推荐：2020年CSS面试题汇总（最新）

行内元素

• 特征
  • 设置宽高无效
  • 设置margin只有左右有效，上下无效
  • 设置padding上下左右均有效，会撑起空间
  • 不会进行自动换行
• 常见的行内元素
  • a span b i strong

行内块元素

• 特征
  • 可以设置宽高
  • 与所有行内元素显示在同一行
• 常见的行内块元素
  • img input button select

块级元素

• 特征
  • 可以设置宽高
  • 所有块级元素会独占一行
  • 如果未设置宽高，默认继承父级宽高
• 常见的块级元素
  • p p ul li h1-h6

css实现居中

• margin: 0 auto;
• position定位配合transform:translate
• flex布局
• text-align配合line-height，用于字体在其父元素区域内居中
• vertical-align: middle; 用来设置行内元素的居中

css hack

• 释意：针对不同的浏览器，写不同的css，用作兼容
  • 条件hack

  <!--[if IE]>
  <style>
    p {
        color: red;
    }</style>
  <![endif]-->

  • 属性hack

  .p {
      color: red; /*IE 8+*/
      *color: green; /*IE 7*/
      _color: yellow; /*IE 6*/}

  • 选择器hack

  /*IE 6*/* html .p {
      color: red;}/*IE 7*/* + html .p {
      color: green;}

px 和 em

• px是绝对单位，值是固定的
• em是继承父元素的font-size大小单位

support

@support用来检测浏览器是否支持某个css属性，可以理解为条件判断，一般用作兼容性处理。

media

媒体查询，根据视口大小写对应的css样式，一般配合rem做移动端的兼容。

calc

css的计算属性，用于动态计算长度值，支持数学运算。

清除浮动

• 伪元素清除浮动
  • 原理：在父元素的伪元素中设置clear:both，即可解决高度坍塌的问题。

  ::after {
    content: "";
    clear: both;
    overflow: hidden;
    height: 0;}

BFC：是一个独立的布局环境

• 格式化上下文，是一个独立的渲染区域，让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。
• 规则
  • 同一个BFC下，相邻的两个box默认垂直排列
  • 同一个BFC下，上下相邻的两个box，margin会发生重叠
  • BFC不会与float区域重叠
  • 计算BFC高度时，浮动子元素也会参与计算，所以不设置BFC高度，也会被浮动子元素撑开。
  • 文字层不会被浮动层覆盖，而是环绕在周围

解决父子边缘重叠时子元素margin带着父元素一起移动

+原理：利用伪元素给父元素添加一个高度为0的table

盒子模型

• 标准盒模型：content
• 怪异盒模型： border+content

行内元素

• 特征
  • 设置宽高无效
  • 设置margin只有左右有效，上下无效
  • 设置padding上下左右均有效，会撑起空间
  • 不会进行自动换行
• 常见的行内元素
  • a span b i strong

行内块元素

• 特征
  • 可以设置宽高
  • 与所有行内元素显示在同一行
• 常见的行内块元素
  • img input button select

块级元素

• 特征
  • 可以设置宽高
  • 所有块级元素会独占一行
  • 如果未设置宽高，默认继承父级宽高
• 常见的块级元素
  • p p ul li h1-h6

css实现居中

• margin: 0 auto;
• position定位配合transform:translate
• flex布局
• text-align配合line-height，用于字体在其父元素区域内居中
• vertical-align: middle; 用来设置行内元素的居中

css hack

• 释意：针对不同的浏览器，写不同的css，用作兼容
  • 条件hack

  <!--[if IE]>
  <style>
    p {
        color: red;
    }</style>
  <![endif]-->

  • 属性hack

  .p {
      color: red; /*IE 8+*/
      *color: green; /*IE 7*/
      _color: yellow; /*IE 6*/}

  • 选择器hack

  /*IE 6*/* html .p {
      color: red;}/*IE 7*/* + html .p {
      color: green;}

px 和 em

• px是绝对单位，值是固定的
• em是继承父元素的font-size大小单位

support

@support用来检测浏览器是否支持某个css属性，可以理解为条件判断，一般用作兼容性处理。

media

媒体查询，根据视口大小写对应的css样式，一般配合rem做移动端的兼容。

calc

css的计算属性，用于动态计算长度值，支持数学运算。

清除浮动

• 伪元素清除浮动
  • 原理：在父元素的伪元素中设置clear:both，即可解决高度坍塌的问题。

  ::after {
    content: "";
    clear: both;
    overflow: hidden;
    height: 0;}

BFC：是一个独立的布局环境

• 格式化上下文，是一个独立的渲染区域，让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。
• 规则
  • 同一个BFC下，相邻的两个box默认垂直排列
  • 同一个BFC下，上下相邻的两个box，margin会发生重叠
  • BFC不会与float区域重叠
  • 计算BFC高度时，浮动子元素也会参与计算，所以不设置BFC高度，也会被浮动子元素撑开。
  • 文字层不会被浮动层覆盖，而是环绕在周围

解决父子边缘重叠时子元素margin带着父元素一起移动

+原理：利用伪元素给父元素添加一个高度为0的table

相关教程推荐：CSS视频教程

以上是整理css常见面试题的详细内容。更多信息请关注PHP中文网其他相关文章！