PS:内容比较基础,目的只是覆盖面试知识点,大佬可以 history.back(-1)

W3C 标准盒模型 & IE 怪异盒模型

页面上显示的每个元素(包括内联元素)都可以看作一个盒子,即盒模型( box model )

盒模型由 4 部分组成,从内到外分别是:content padding border margin

W3C 标准盒模型一个元素的宽度(高度以此类推)应该这样计算:

1

2

3

一个元素的宽度 =  content

盒子总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

而IE 怪异盒模型一个元素的宽度(高度以此类推)却是这样计算的:

1

2

3

一个元素的宽度 =  content + padding + border

盒子总宽度 = margin-left + width + margin-right

解决方案 box-sizing

1

2

3

4

5

// W3C 标准盒模型(浏览器默认)

box-sizing: content-box;

// IE 怪异盒模型

box-sizing: border-box;

当我们设置 box-sizing: border-box; 时,border 和 padding 就被包含在了宽高之内,和 IE 盒模型是一样的。

所以,为了避免你同一份 css 在不同浏览器下表现不同,最好加上:

1

2

3

4

5

*, *:before, *:after {

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

JS 如何获取盒模型对应的宽和高

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

<style>

* {

margin: 0;

padding: 0;

}

#box {

width: 100px;

height: 100px;

padding: 50px;

border: 5px solid red;

margin: 50px;

}

</style>

<div id="box" style=""></div>

<script>

let box = document.getElementById('box')

// 只能取到内联样式的宽高

console.log('style:' + box.style.width) // 100px

// 内联样式和外联样式的宽高都能取到,但只有 IE 支持

console.log('currentStyle:' + box.currentStyle.width) // 100px

// 内联样式和外联样式的宽高都能取到,几乎所有主流浏览器都支持

console.log('getComputedStyle:' + getComputedStyle(box).width) // 100px

// 内联样式和外联样式的宽高都能取到,几乎所有主流浏览器都支持,取到的是盒子总宽度

console.log('getBoundingClientRect:' + box.getBoundingClientRect().width) // 210

</script>

BFC

BFC:块级元素格式化上下文

IFC:内联元素格式化上下文(面试不常考)

BFC 原理

  1. 在 BFC 的垂直方向上,边距会发生重叠

  2. BFC 区域不会与 浮动区域重叠

  3. BFC 在页面上是一个独立的容器,与其他元素互不影响

  4. 计算 BFC 高度时,浮动元素也会参与计算

如何创建 BFC

  1. float 值不为 none,只要设置了浮动,当前元素就创建了一个 BFC

  2. position值不为static,只要设置了定位,当前元素就创建了一个 BFC

  3. display 值不为默认,只要设置了display,当前元素就创建了一个 BFC

  4. overflow 值不为 visible,只要设置了overflow,当前元素就创建了一个 BFC

1

overflow: hidden;

BFC 使用场景

解决边距重叠问题

当元素都设置了 margin 边距时,margin 将取最大值。为了不让边距重叠,可以给子元素加一个父元素,并设置该父元素为 BFC

1

2

3

4

5

6

7

8

9

<div class="box" id="box">

<p>Lorem ipsum dolor sit.</p>

<div style="overflow: hidden;">

<p>Lorem ipsum dolor sit.</p>

</div>

<p>Lorem ipsum dolor sit.</p>

</div>

侵占浮动元素的位置

设置非浮动元素为 BFC 即可

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<style>

.one {

float: left;

width: 100px;

height: 100px;

background-color: pink;

}

.two {

height: 200px;

background-color: red;

/* 设置 BFC */

overflow: hidden;

}

</style>

<div class="one"></div>

<div class="two"></div>

清除浮动

BFC 原理第 4 条:计算 BFC 高度时,浮动元素也会参与计算

当然,清除浮动还有其他最佳实践,这里只是分析场景。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<style>

.one {

background-color: pink;

/* 设置 BFC */

overflow: hidden;

}

.two {

float: left;

}

</style>

<div class="one">

<div class="two">hello world</div>

</div>

CSS 盒模型、解决方案、BFC 原理讲解--摘抄的更多相关文章

  1. 十分钟复习CSS盒模型与BFC

    css盒模型与BFC 本文为收集整理总结网上资源 旨在系统复习css盒模型与bfc 节省复习时间 阅读10分钟 什么是盒模型 每一个文档中,每个元素都被表示为一个矩形的盒子,它都会具有内容区.padd ...

  2. css盒模型与bfc与布局与垂直水平居中与css设计模式等

    一.css盒子与布局相关 盒子内部的布局 盒子之间的布局visual formatting 脱离正常流normal flow的盒子的布局 absolute布局上下文下的布局 float布局上下文下的布 ...

  3. 前端面试必备技巧(二)css盒模型及BFC

    CSS盒模型 基本概念:标准模型+IE模型及区别 CSS如何设置这两种模型? JS如何设置获取盒模型对应的宽和高? 实例题(根据盒模型解释边距重叠) BFC边距重叠解决方案 (1)BFC的基本概念:b ...

  4. css盒模型-BFC

    BFC(边距重叠解决方案) 1.BFC的基本概念:块级格式化上下文 2.BFC的原理(说白了就是BFC的渲染规则): 这个规则是什么呢?我觉得大家能说出4点就够了 第一个就是BFC可以解决这个元素的垂 ...

  5. css盒模型:BFC、IFC边距重叠解决方案

    BFC:块级格式化上下文 IFC:行内格式化上下文 实例如下: <div class="out" style="background: red;"> ...

  6. 神奇的盒模型(BFC)

    上一篇我提到每一个元素都有自己的display属性,其属性值可以改变.其改变的方式,可以利用神奇的css盒模型(BFC). 盒模型,是css可视化格式化系统的基础,可以用于元素定位和网页布局.一个盒模 ...

  7. CSS盒模型的深度思考及BFC

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 题目:谈一谈你对CSS盒模型的认识 专业的面试,一定会问 CSS 盒模型 ...

  8. 面试 02-CSS盒模型及BFC

    02-CSS盒模型及BFC #题目:谈一谈你对CSS盒模型的认识 专业的面试,一定会问 CSS 盒模型.对于这个题目,我们要回答一下几个方面: (1)基本概念:content.padding.marg ...

  9. 面试汇总——说一下CSS盒模型

    本文是面试汇总分支——说一下CSS盒模型. 基本概念:W3C标准盒模型和IE盒模型 CSS如何设置这两种模型 JS如何获取盒模型对应的宽和高 根据盒模型解释边距重叠 BFC(边距重叠解决方案) 一. ...

随机推荐

  1. jdk配置与环境变量配置

    1.1.下载jdk1.8.0,如图所示 解压放在你用的位置 在官网中下载 1.2.配置环境变量 打开环境变量:计算机-->属性-->高级系统配置-->环境变量 配置JAVA_HOME ...

  2. LVS-nat模式-原理介绍

    集群,为解决某个特定问题将多台计算机组合起来形成的单个系统 lvs-nat: 本质是多目标IP的DNAT,通过将请求报文中的目标地址和目标端口修改为某挑出的RS的RIP和PORT实现转发 lvs集群类 ...

  3. 10GNU C语言函数调用

    6. C 函数调用机制概述 ​ 在 Linux 内核程序 boot/head.s 执行完基本初始化操作之后,就会跳转区执行 init/main.c 程序.那么 head.s 程序时如何把执行控制转交给 ...

  4. 【android】【android studio】修改emulator的本地化环境

    Changing the emulator locale from the adb shell To change the locale in the emulator by using the ad ...

  5. Thinkphp5 的常用连式查询

    目录 取出表中改字符串前两位等于01的数据 按主键查询 不按主键查 JOIN方法 的左右连接 not in 方法 like 查询 where 按条件筛选查询 取出表中改字符串前两位等于01的数据 $p ...

  6. Hibernate知识梳理

    一.SessionFactory接口 是单个数据库映射关系(ORM)经过编译后的内存镜像.SessionFactory(的实例)作为应用中的一个全局对象(工厂),可以随处打开/创建一个session, ...

  7. 04 Django模板

    基本概念 作为Web框架,Django提供了模板,用于编写html代码,还可以嵌入模板代码更快更方便的完成页面开发,再通过在视图中渲染模板,将生成最终的html字符串返回给客户端浏览器 模版致力于表达 ...

  8. request response cookie session

    request 1. url传递参数 1)参数没有命名, 如: users/views def weather(request, city, year): print(city) print(year ...

  9. STM32——PWM基本知识及配置过程

    将通用定时器分为四个部分: 1,选择时钟 2,时基电路 3,输入捕获 4,输出比较 本节定时器PWM输出主要涉及到定时器框图右下方部分,即输出比较部分 和上一讲相同,时基时钟来源于内部默认时钟 对此有 ...

  10. 函数名&函数名取地址

    有时看到如下的代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 /*****************************/ #includ ...