【CSS基础】个人遇见的常见例题系列，一起来回顾（一）

本文链接：https://blog.csdn.net/pagnzong/article/details/115115326

文章目录

前言
请画出盒模型（高）
请解释标准盒模型和IE盒模型（高）
什么是置换元素（低）
什么是块级元素和内联元素（高）
JS判断盒子的宽高（高）
盒子纵向排布的margin塌陷问题（高）
margin设置负值会有哪些情况（低）
请解释BFC（低）
用flex布局完成某个排布（高）
position属性值有哪些（高）
盒子居中方法都有哪些（高）
父级什么情况下会被撑大（低）
关于line-height属性继承的问题（高）
width为auto、100%，max-width的区别（高）
包含块的概念（低）但是很重要

前言

题目后缀表示本人遇到的频率（高/低）

请画出盒模型（高）

请解释标准盒模型和IE盒模型（高）

box-sizing 是用于告诉浏览器如何计算一个元素的总宽度和总高度。

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

width = content width;
height = content height

意思就是我们css设置的宽高，设置的是标签里面包含的内容

IE盒模型 box-sizing: border-box

width = border + padding + content width
height = border + padding + content height

改成这个后css设置的就是盒子的真正宽高了；注意，当设置的高宽度小于padding值，就以padding值为主；

什么是置换元素（低）

什么是块级元素和内联元素（高）

块级元素：display为block/table；独占一行，有div h1 table ul ol p 等；
内联元素：display为inline/inline-block；不会独占一行，有span img input button等；inline的元素无法设置宽高和padding；

其实浏览器已经很早就摒弃这种叫法了，只要是浏览器默认加了block属性，说明是块盒。元素类型与块级行级关系不再绑定。

JS判断盒子的宽高（高）

offsetWidth、offsetHeight：border + content + padding（+出现的滚动条）
clientWidth、clientHeght：content + padding （出现的滚动条不算）
scrollWidth、scrollHeight：包括溢出的部分的content

offsetWidth和clientWidth经常会记错，这样记offset是补偿的意思，补偿的边框和滚动条

拓展：

window.screen.height 屏幕高度
window.innerHeight 网页视口高度，在pc浏览器上看和在手机上是不一样的（手机不包括浏览器上下工具栏）
document.body.clientHeight body高度

盒子纵向排布的margin塌陷问题（高）

上下盒子纵向排布，且相接处都有设置margin时，之间的距离取二者中最大的margin值，如果两者值一样的话，只取其中一个的值。

给个题看看：问A和B之间的距离？

<body>
  <div>AAA</div>
  <div></div>
  <div></div>
  <div></div>
  <div>BBB</div>
</body>

<style type="text/css">
div {
  font-size: 16px;
  line-height: 1;
  margin-top: 10px;
  margin-bottom: 15px;
}
</style>

这题的干扰就在中间的无内容div

margin塌陷问题的解决方法：

只设置一个margin，推荐使用；
给父级启用BFC；

注意了：加边框是解决不了这个问题的

margin设置负值会有哪些情况（低）

margin-top/margin-left负值：该标签会上移/左移。
margin-right负值：该标签不动，右边标签会左移。
margin-bottom负值：该标签不动，下方标签会上移。

请解释BFC（低）

全名，块级格式化上下文。听起来拗口，其实只需要知道作用以及如何开启即可。

作用：一块独立渲染区域，内部元素的渲染不会影响边界以外的元素。

开启条件：

overflow不是visible
display是flex
其他网上的很多试了一下并不能开启，记住上面两个就好了

例子：

<style type="text/css">
  .logo {
    width: 50px;
    height: 50px;
    background-color: antiquewhite;
  }
  .container {
    background-color: #f1f1f1;
  }
  .left {
    float: left;
  }
  .bfc {
    overflow: hidden; /* 触发元素 BFC */
  }
</style>
<body>
	<div class="container bfc">
      <div class="logo left">logo</div>
      <p class="bfc">logo说明</p>
    </div>
</body>

如果去掉父标签和p标签的bfc类名，那么父级高度只有p的高度，且p占满一整行。

用flex布局完成某个排布（高）

一般也就问问flex的属性作用，但也有直接机试的。看完这篇文章基本没啥问题【CSS基础】flex布局的个人使用记录（非教学）

position属性值有哪些（高）

relative：相对定位，相对于自己原来的位置进行位移，但是“原位”仍然占据位置。
absolute：绝对定位，以最近使用position属性的父级为参照位置进行位移，“原位”将不存在。
fixed：固定定位，位置以浏览器窗口为固定，即使内容有滚动条滚动后位置也是不变的，且“原位”将不存在。
sticky：粘性定位，以最近的块级元素或开启BFC元素为参照位置进行位移，在特定阈值前是相对位置的特性，在阈值后是固定定位的特性。
static：默认定位，遵循文档流。

以上属性值基本上使得元素的图层默认在其他元素的上方。

absolute的补充：

会使行内元素的宽高可设置；
会使块级元素的宽不是默认100%，由内容撑大；
宽高变化不会影响周围的布局，比如需要一些遮盖别的元素的动画，就需要用这个来定位；

这个问题最正统的解释还是要通过包含块去做解释，下面会讲

盒子居中方法都有哪些（高）

以下实现都推荐用flex布局解决，尽量不要转成行盒。

水平竖直居中：

用绝对定位左上各50%，margin左上各负自身宽高的一半；
用绝对定位左上各50%，transform: translate(-50%, -50%);
绝对定位上下左右为0，margin: auto;
用flex布局，把主轴和侧轴的值都为center;

水平居中：

本元素转成块级/行内块级，设置宽度，左右margin分别设置为auto（auto的意思是有多少空间占多少，于是左右就平分了）
子元素为行内块级元素，父级设置text-align: center;
flex布局主轴居中

竖直居中：

把父级内的子元素的line-height设置的和最大的子元素的高一样的；
把父级内的子元素都转成行内块级元素，给每个子元素加vertical-align：middle，不同大小的都会居中（需要一个位置参考节点）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 500px;
            height: 300px;
            background-color: pink;
            text-align: center;
        }
		/* 参考节点 */
        .container::before {
            content: '';
            display: inline-block;
            vertical-align: middle;
            height: 100%;
        }

        .item {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            vertical-align: middle;
            margin: 0 auto;
            display: inline-block;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item"></div>
    </div>
</body>

</html>

父级什么情况下会被撑大（低）

父级有宽高的情况下，子级只会overflow默认溢出，父级不会被撑大；

父级没有宽高的情况下，父级会被子级撑大；

关于line-height属性继承的问题（高）

一般三种情况：

当父级设置具体像素数值，例如30px，那么子级也继承为30px；
当父级设置为2等整数值，那么子级也继承为2整数值，其换算为px就为自己的font-size数值乘2；
当父级设置为200%时，子级继承的是父级换算过后的值，即等于父级font-size数值乘200%；

width为auto、100%，max-width的区别（高）

在可设置宽度元素的前提下，默认是自动，以内容的大小来决定宽高，100%是以外部还有多少空间去撑开。

max-height/width 比如窗口大小大于所设定值时，就按设定的宽高来显示，如果小于，就会自适应。

包含块的概念（低）但是很重要

包含块分为两种，一种是根元素（HTML 元素）所在的包含块，被称之为初始包含块（initial containing block）。对于浏览器而言，初始包含块的的大小等于视口 viewport 的大小，基点在画布的原点（视口左上角）。它是作为元素绝对定位和固定定位的参照物。

另外一种是对于非根元素，对于非根元素的包含块判定就有几种不同的情况了。大致可以分为如下几种：

如果元素的 positiion 是 relative 或 static ，那么包含块由离它最近的块容器（block container）的内容区域（content area）的边缘建立。
如果 position 属性是 fixed，那么包含块由视口建立。
如果元素使用了 absolute 定位，则包含块由它的最近的 position 的值不是 static （也就是值为fixed、absolute、relative 或 sticky）的祖先元素的内边距区的边缘组成。

实际上对于非根元素来讲，包含块还有一种可能，那就是如果 position 属性是 absolute 或 fixed，包含块也可能是由满足以下条件的最近父级元素的内边距区的边缘组成的：