CSS盒模型学习笔记
2019-08-27 20:13
267 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_40829386/article/details/100107366
一、盒模型的基本组成
由里向外依次为content、padding、border、margin,如下图所示:
二、两种模型(标准模型与IE模型)
1.标准模型:宽高取决于content,通过box-sizing:content-box设置;
2.IE模型:宽高取决于content+padding+border总宽高,通过box-sizing:border-box设置。
(最常用且浏览器兼容性最好的获取盒模型宽高的方法:dom.offsetWidth、dom.offsetHeight)
三、BFC (Block Formatting Context,块级格式化上下文)
1.创建BFC
a.将元素脱离文档流:浮动(float不为none)、绝对/固定定位(position为absolute或fixed);
b.将元素变成可设置高度的行内元素:display为inline-block/table-cell/table-caption/inline-flex等;
c.将内容封闭:overflow不为visible;
d.根元素或者包含根元素的元素。
2.应用BFC
a.自适应两栏布局(左侧float浮动,右侧使用BFC);
b.清楚内部浮动;
c.防止垂直margin重叠(解决边距重叠问题)。
相关文章推荐
- 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案
- 【HTML5学习笔记】21:CSS盒模型 上
- 周志华《机器学习》(西瓜书) —— 学习笔记:第3章 线性模型
- 第2章 模型评估与选择学习笔记
- 《深度探索C++对象模型(Inside The C++ Object Model )》学习笔记
- V-rep学习笔记:机器人模型创建2—添加关节
- 物理渲染学习笔记(三)——Cook-Torrance微表面模型
- chap 3 线性模型 [西瓜书学习笔记]
- 转 通用模型之-party model 学习笔记
- HBase学习笔记——物理模型
- IO模型学习笔记
- 学习笔记——《LINUX设备驱动程序(第三版)》Linux设备模型:内核添加、删除设备、驱动程序
- 电机学习笔记1——坐标变换与永磁同步电机的数学模型
- 【deep learning学习笔记】注释yusugomori的DA代码 --- dA.cpp -- 模型测试
- 吴恩达第五门-序列模型-第一周7-12学习笔记
- js学习笔记(十四)事件处理模型
- 【deep learning学习笔记】注释yusugomori的DA代码 --- dA.cpp -- 模型测试
- Three.js学习笔记——3dsmax 加载obj模型
- 统计语言模型学习笔记
- 最大熵模型学习笔记李航统计学习