css面试总结（1）

豫东吴彦祖
100 阅读6分钟

一 ：为什么清除浮动和清除浮动的方法

为什么清除浮动

1 清除浮动的原因：

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会 影响下面的标准流盒子。由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响如图所示

注 ：如果父元素有高度就不需要清除浮动

image.png

2 清除浮动的本质

清除浮动的本质是清除浮动元素造成的影响

如果父盒子本身有高度，则不需要清除浮动 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。

父级有了高度，就不会影响下面的标准流了

3 清除方法：

（1）额外标签法 ：选择器{clear:属性值;} （2）可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll 。 （3）父级添加after伪元素，这个是固定代码。写成一个类添加到父元素上。 （4） image.png

这个方法是在最后一个有浮动的元素后面添加一个任意标签，并且在这个标签上绑定一个类，这个类添加一个clear ：both属性 我们实际工作中，几乎只用 clear: both;

 <style>
 // 方法3 ：双伪元素清除浮动 
  .clearfix:before,
      .clearfix:after {
        content: "";
        display: table;
      }
      .clearfix:after {
        clear: both;
      }
      .clearfix {
        *zoom: 1;
      }
 // 方法3 ：伪元素清除浮动   
  .clearfix:after {
        content: "";
        display: table;
      }
      .clearfix:after {
        clear: both;
      }
      .clearfix {
        *zoom: 1;
      }
      .dad {
        background-color: pink;
        width: 300px;
        //overflow: hidden;方法2
      }
      .son1 {
        background-color: blue;
        float: left;
        width: 100px;
        height: 100px;
      }

      .bro {
        width: 200px;
        height: 200px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="dad">
      我是dad
      <div class="son1">我是son1</div>
      //<div style="clear: both"></div> 方法： 1 额外标签
    </div>
    <div class="bro">我是兄弟</div>
  </body>

image.png

二 ：盒子模型

1 盒子模型的概念：

当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）

一个盒子由四个部分组成：content、padding、border、margin

image.png

代码示例：
<style>
  .box {
    width: 200px;
    height: 100px;
    padding: 20px;
  }
</style>
<div class="box">
  盒子模型
</div>

当我们在浏览器查看元素时，却发现元素的大小变成了240px

这是因为，在CSS中，盒子模型可以分成：

  • W3C 标准盒子模型
  • IE 怪异盒子模型

默认情况下，盒子模型为W3C 标准盒子模型

2 标准盒子模型

标准盒子模型，是浏览器默认的盒子模型

下面是标准盒子模型的模型图：

c0e1d2e0-8f9b-11eb-85f6-6fac77c0c9b3.png

从上图可以看到：

  • 盒子总宽度 = width + padding + border + margin;
  • 盒子总高度 = height + padding + border + margin

也就是，width/height 只是内容高度，不包含 padding 和 border值

所以上面问题中，设置width为200px，但由于存在padding，但实际上盒子的宽度有240px

3 IE 怪异盒子模型

下面是标准盒子模型的模型图：

cfbb3ef0-8f9b-11eb-ab90-d9ae814b240d.png

从上图可以看到：

  • 盒子总宽度 = width + margin;
  • 盒子总高度 = height + margin;

也就是，width/height 包含了 padding和 border值

4 盒子模型的设置

CSS 中的 box-sizing 属性定义了引擎应该如何计算一个元素的总宽度和总高度

语法：

box-sizing: content-box|border-box|inherit:
  • content-box 默认值，元素的 width/height 不包含padding，border，与标准盒子模型表现一致
  • border-box 元素的 width/height 包含 padding，border，与怪异盒子模型表现一致
  • inherit 指定 box-sizing 属性的值，应该从父元素继承

回到上面的例子里，设置盒子为 border-box 模型

<style>
  .box {
    width: 200px;
    height: 100px;
    padding: 20px;
    box-sizing: border-box;
  }
</style>
<div class="box">
  盒子模型
</div>

这时候，就可以发现盒子的所占据的宽度为200px
.box { width: 200px; height: 100px; padding: 20px; box-sizing: border-box; }
盒子模型
```

三 ： em/px/rem/vh/vw区别

1 介绍

传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，且拥有比较良好的兼容性

从CSS3开始，浏览器对计量单位的支持又提升到了另外一个境界，新增了rem、vh、vw、vm等一些新的计量单位

利用这些新的单位开发出比较良好的响应式页面，适应多种不同分辨率的终端，包括移动设备等

2 css 的单位

px：

表示像素，所谓像素就是呈现在我们显示器上的一个个小点，每个像素点都是大小等同的，所以像素为计量单位被分在了绝对长度单位中

有些人会把px认为是相对长度，原因在于在移动端中存在设备像素比，px实际显示的大小是不确定的

这里之所以认为px为绝对单位，在于px的大小和元素的其他属性无关

em ：

是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（1em = 16px）

为了简化 font-size 的换算，我们需要在css中的 body 选择器中声明font-size= 62.5%，这就使 em 值变为 16px*62.5% = 10px

这样 12px = 1.2em, 10px = 1em, 也就是说只需要将你的原来的px 数值除以 10，然后换上 em作为单位就行了

rem：

相对单位，相对的只是HTML根元素font-size的值

同理，如果想要简化font-size的转化，我们可以在根元素html中加入font-size: 62.5%

html {font-size: 62.5%;  } /*  公式16px*62.5%=10px  */

这样页面中1rem=10px、1.2rem=12px、1.4rem=14px、1.6rem=16px;使得视觉、使用、书写都得到了极大的帮助

小总结 rem 和em 联系 ：em单位可谓集相对大小和绝对大小的优点于一身即都是相对大小 区别 ：rem 是相对于根标签然而em是相对于父元素，em 没有父元素的时候才是相对于根标签 重点 ：对于一个项目来说使用em需要考虑多个父元素，rem只对根标签就行了。

vw ： 就是根据窗口的宽度，分成100等份，100vw就表示满宽，50vw就表示一半宽。（vw 始终是针对窗口的宽），同理

vh：

则为窗口的高度

这里的窗口分成几种情况：

  • 在桌面端，指的是浏览器的可视区域
  • 移动端指的就是布局视口

像vw、vh，比较容易混淆的一个单位是%，不过百分比宽泛的讲是相对于父元素：

  • 对于普通定位元素就是我们理解的父元素
  • 对于position: absolute;的元素是相对于已定位的父元素
  • 对于position: fixed;的元素是相对于 ViewPort（可视窗口）

3 总结 ： px：绝对单位，页面按精确像素展示

em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值

rem：相对单位，可理解为root em, 相对根节点html的字体大小来计算

vh、vw：主要用于页面视口大小布局，在页面布局上更加方便简单

avatar
文章
阅读
粉丝