CSS面试题目整理

zhutou1280

已于 2022-03-13 21:32:29 修改

阅读量184

点赞数

分类专栏：前端面试文章标签： css css3

于 2022-03-13 21:29:42 首次发布

本文链接：https://blog.csdn.net/qq_26025363/article/details/123466735

版权

前端面试专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS 盒模型

CSS 盒模型是一个盒子，盒子包裹 HTML 元素，盒子由 4 个属性组成，content、padding、border、margin。

标准模型：width、height 是 content。
IE 模型：border+padding+content 构成 width 和 height。

设置方式：box-sizing 属性。

CSS 样式优先级

!impotant > style > id > class

什么是 BFC

BFC 是 Block Format Context 的缩写，即块级格式化上下文。
BFC 是 CSS 布局中的一个概念，是一个环境，里面的元素不会影响外面的元素。

每一个 BFC 区域只包括其子元素，不包括其子元素的子元素。
每一个 BFC 都是独立隔绝的，互不影响。

参考文章：https://juejin.cn/post/6960866014384881671

BFC 的布局规则是什么？

布局规则：Box 是 CSS 布局的对象和基本单位，页面是由若干个 box 组成。元素的类型和 display 属性决定了这个 box 的类型。不同类型的 box 会参与不同的 Format Context(一个决定如何渲染文档的容器)

比如：

block-level box: display 属性为 block, 参与 block formatting context。即(BFC)
inline-level box: display 属性为 inline，会参与 inline-format context。即(IFC)

BFC 的布局规则

内部的 Box 会在垂直方向，一个接一个的放置。
Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠。（即外边距折叠）
每个盒子的 margin box 的左边，与包含块的左边相接触。
BFC 的区域不会与 Float box 重叠
BFC 是一个独立的容器，里面的元素不会影响到外面的元素。
计算 BFC 的高度时，浮动元素也会参与计算。

如何创建 BFC 或者如何触发 BFC

并不是任意一个元素都可以被当作 BFC,只有这个元素满足如下任意一个条件的时候，这个元素才能当作 BFC。

float 的值不是 none
position 的值不是 static 或 relative
display 的值是 inline-block、table-cell、flex、table-caption 或者 inline-flex
overflow 的值不是 visible。
body 根元素

BFC 的作用

利用 BFC 避免 margin 重叠。
如

<p>1</p>
<p>2</p>

两个 p 会外边距折叠，此时将第二个 p 包裹一个 div，则可以不重叠。

自适应两栏布局

<style>
  .left {
    width: 100px;
    height: 150px;
    float: left;
    background: rgb(139, 214, 78);
    text-align: center;
    line-height: 150px;
    font-size: 20px;
  }

  .right {
    height: 300px;
    background: rgb(170, 54, 236);
    text-align: center;
    line-height: 300px;
    font-size: 40px;
    overflow: hidden; //独立一个BFC
  }
</style>
<body>
  <div class="left">LEFT</div>
  <div class="right">RIGHT</div>
</body>

参考文档：https://www.itcast.cn/news/20201016/16152387135.shtml

line-height 如何继承

父元素的 line-height 写了具体数值，比如 30px，则子元素 line-height 继承该值。
父元素的 line-height 写了比例，比如 1.5 或 2，则子元素 line-height 也是继承该比例。
父元素的 line-height 写了百分比，比如 200%，则子元素 line-height 继承的是父元素 font-size * 200% 计算出来的值。