CSS基础-盒模型

CSS基础

一、CSS基本介绍

定义：CSS全称为Cascading Style Sheets，即层叠样式表，是一种样式表语言，用来描述HTML或XML文档的呈现，CSS描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。
历史：
1.1994年，哈肯.维姆.莱提出CSS，伯特.波斯（Bert Bos）当时正在设计Argon浏览器，两人一拍即合。

2.1997年，W3C组织了专门管CSS的项目组，负责人：克里斯.里雷。

3.CSS2.1（支持最广泛，IE从5.5开始，目前从IE8开始测试）

1998年5月发表了CSS2，CSS2.1修改了一些错误，删除了不被支持的内容，增加了一些浏览器有的拓展内容。

4.CSS3

从2011年开始CSS被分成多个模块，统称CSS3。

.选择器level3

.媒体查询level3

.CSS Color level3

二、CSS周边工具

LESS CSS：简化CSS，功能更多
SASS：简化，功能相比较LESS CSS更多
PostCSS：css处理程序

三、CSS学习资源

通过MDN文档进行学习
通过一些CSS交流平台学习，比如
css tricks
Codrops
书籍：《CSS揭秘》；
文档：CSS标准文档
专业人士的博客，比如阮一峰，张鑫旭等。

四、CSS常见问题：

1.两种盒模型：

盒模型组成：box=content+padding+margin+border

box.png

两种盒模型：W3C盒模型和IE盒模型

W3C定义的盒模型（标准模型）认为：元素的width和height指的是的content的width和height

W3C盒模型.png
IE盒模型认为：元素的width和height应该为content+padding+border

IE盒模型

他们的区别就在于对于元素宽和高的定义不同。

a.两种盒模型在CSS中是如何设置的：

box-sizing 属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为。
当box-sizing设置为不同值时，盒子的大小就不相同。

Image [3].png

Image2.png

b.两种盒模型比较：

相对于W3C盒子模型，IE盒子模型具有更加好控制大小的特点，在实际操作中，我们一般会先确定整个元素的尺寸，然后通过调节padding和margin来确定内容的居中，和其他元素的距离，整个过程中盒子模型尺寸不会发生变化，这点通过IE盒子模型很好实现，但是在W3C盒子模型中，在确定padding和margin后，整个尺寸就被打乱，需要重新去调节content大小，这也是后来标准推出box-sizing的原因。

c.盒模型外边距折叠问题：

外边距折叠是指：两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。

外边距重叠的三种情况：
a.相邻元素：相邻元素间外边距会发生外边距折叠；
b.父元素与子元素：父元素与其第一个子元素之间不存在边框、内边距、行内内容、也没有创建BFC、或者清除浮动将两者的margin-top分开，或者与最后一个元素间之间不存在边框、内边距、行内内容、height、min-height、max-height将两者的 margin-bottom 分开，那么这两对外边距之间会产生折叠。此时子元素的外边距会“溢出”到父元素的外面。
c.空的块级元素：如果一个块级元素中不包含任何内容，并且在其 margin-top 与 margin-bottom 之间没有边框、内边距、行内内容、height、min-height 将两者分开，则该元素的上下外边距会折叠。
** 注意：水平外边距不会重叠。**
外边距折叠的简单计算：
a.如果参与折叠的外边距都为正值，取最大值；
b.如果不全是正值，则都取绝对值，然后用正值减去最大值；
c.如果没有正值，都取绝对值后用0减去最大值。

参考：
https://www.jianshu.com/p/2e787c6d8ede

https://zhuanlan.zhihu.com/p/43703098

https://blog.csdn.net/m0_37585915/article/details/78501760
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
https://zhuanlan.zhihu.com/p/25321647?utm_source=wechat_session&utm_medium=social&utm_oi=817135426103050240

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

最后编辑于：2019.06.18 20:33:47