CSS 盒模型、解决方案、BFC 原理讲解--摘抄
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 原理
在 BFC 的垂直方向上,边距会发生重叠
BFC 区域不会与 浮动区域重叠
BFC 在页面上是一个独立的容器,与其他元素互不影响
计算 BFC 高度时,浮动元素也会参与计算
如何创建 BFC
float
值不为none
,只要设置了浮动,当前元素就创建了一个 BFCposition
值不为static
,只要设置了定位,当前元素就创建了一个 BFCdisplay
值不为默认,只要设置了display,当前元素就创建了一个 BFCoverflow
值不为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 原理讲解--摘抄的更多相关文章
- 十分钟复习CSS盒模型与BFC
css盒模型与BFC 本文为收集整理总结网上资源 旨在系统复习css盒模型与bfc 节省复习时间 阅读10分钟 什么是盒模型 每一个文档中,每个元素都被表示为一个矩形的盒子,它都会具有内容区.padd ...
- css盒模型与bfc与布局与垂直水平居中与css设计模式等
一.css盒子与布局相关 盒子内部的布局 盒子之间的布局visual formatting 脱离正常流normal flow的盒子的布局 absolute布局上下文下的布局 float布局上下文下的布 ...
- 前端面试必备技巧(二)css盒模型及BFC
CSS盒模型 基本概念:标准模型+IE模型及区别 CSS如何设置这两种模型? JS如何设置获取盒模型对应的宽和高? 实例题(根据盒模型解释边距重叠) BFC边距重叠解决方案 (1)BFC的基本概念:b ...
- css盒模型-BFC
BFC(边距重叠解决方案) 1.BFC的基本概念:块级格式化上下文 2.BFC的原理(说白了就是BFC的渲染规则): 这个规则是什么呢?我觉得大家能说出4点就够了 第一个就是BFC可以解决这个元素的垂 ...
- css盒模型:BFC、IFC边距重叠解决方案
BFC:块级格式化上下文 IFC:行内格式化上下文 实例如下: <div class="out" style="background: red;"> ...
- 神奇的盒模型(BFC)
上一篇我提到每一个元素都有自己的display属性,其属性值可以改变.其改变的方式,可以利用神奇的css盒模型(BFC). 盒模型,是css可视化格式化系统的基础,可以用于元素定位和网页布局.一个盒模 ...
- CSS盒模型的深度思考及BFC
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 题目:谈一谈你对CSS盒模型的认识 专业的面试,一定会问 CSS 盒模型 ...
- 面试 02-CSS盒模型及BFC
02-CSS盒模型及BFC #题目:谈一谈你对CSS盒模型的认识 专业的面试,一定会问 CSS 盒模型.对于这个题目,我们要回答一下几个方面: (1)基本概念:content.padding.marg ...
- 面试汇总——说一下CSS盒模型
本文是面试汇总分支——说一下CSS盒模型. 基本概念:W3C标准盒模型和IE盒模型 CSS如何设置这两种模型 JS如何获取盒模型对应的宽和高 根据盒模型解释边距重叠 BFC(边距重叠解决方案) 一. ...
随机推荐
- cocos2dx 字体描边遇到的描边缺失的bug
在cocos中,设置字体描边可以用enableOutline(cc.c4b(30, 10, 0, 255), 2)函数设置,第一个参数是字体颜色,第二个参数是描边轮廓大小,单位是2个像素, 我在使用过 ...
- 转 救命的教程 anaconda下载安装包网络错误的解决办法
折腾了一天,终于找到了这个解决办法 https://blog.csdn.net/sinat_29315697/article/details/80516498
- 在VMware上安装centos7
1. 下载centos7 64位镜像 linux官网下载:https://www.centos.org/download/ 2. 在VMware上安装centos7 2.1 新建虚拟机 打开虚拟机主页 ...
- python入门:模拟简单用户登录(自写)
#!/usr/bin/env python # -*- coding: utf-8 -*- #模拟简单用户登录(自写) import getpass a = raw_input("Pleas ...
- destoon 数据库操作
1.插入数据 $db->query("INSERT INTO ".get_table($mid)." ($sqlk) VALUES ($sqlv)"); ...
- GoF23种设计模式之行为型模式之责任链模式
一.概述 使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系.将这些对象连成一条链,并且沿着这条链传递请求,直到有一个对象处理它为止.其设计思想是:给对多个对象处理一个请求的机会, ...
- HDU:1251-统计难题(字典树模板,动态建树,静态建树)
传送门:http://acm.hdu.edu.cn/showproblem.php?pid=1251 统计难题 Time Limit: 4000/2000 MS (Java/Others) Memor ...
- jmeter switch controller
工作方式: Switch控制器通过给该控制器中的Value赋值,来指定运行哪个采样器.有两种赋值方式: 1.第一种是数值,Switch控制器下的子节点从0开始计数,通过指定子节点所在的数值来确定执行哪 ...
- Hive学习笔记(二)
Hive内部表跟外部表之间的区别 创建外部表 先删除上面创建的表,指定location 此时在hdfs根目录下就有一个hivedata文件夹 上传文本数据到hivedata目录下 查询表中数据 删除上 ...
- dubbo rpc filter实现剖析(一)
2.6.3版本,之前读的是2.4.9版本 本篇主要阐述dubbo rpc的filter的实现,包括作用,用法,原理,与Spring Cloud在这些能力的对比. 共提供了多少个?是哪些?发布时默认装配 ...