不知名人士的博客

offsetWidth = （内容宽度 + 内边距 + 边框），无外边距offsetWidth = 100 + 10 * 2 + 1 * 2 = 122px补充：如果想让 offsetWidth 等于 100px，该如何做？相邻元素的 margin-top 和 margin-bottom 会发生重叠空白内容也会重叠答案是 15pxmargin 负值问题对 margin 的 top left right bottom 设置负值，有何效果？什么是 BFC？如何应用？形成 BFC 的常见条件：B

1）offsetWidth = 5 * 2 + 20 * 2 + 250 = 300（content 为250是因为设置了。2）scrollHeight = 20 * 2 + 500 = 540 （500为 content 盒子的长度）1）scrollWidth = 20 * 2 + 600 = 640（600为 content 盒子的宽度）2）offsetHeight = 5 * 2 + 20 * 2 + 150 = 200（分析同上）

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。通俗来讲BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。创建BFC：（1）根元素或包含根元素的元素（2）浮动元素 float＝left|right 或 inherit（≠non

用法:对于一般的元素，它的表现跟 visibility：hidden 是一样的。元素是不可见 的，但此时仍占用页面空间。但例外的是，如果这个元素是 table 相关的元素，例如table行，table group，table列，table column group，它的表现却跟 display:none 一样，也就是说，它们占用的空间也会释放。在不同浏览器下的区别：在谷歌浏览器里，使用 collapse 值和使用 hidden 值没有什么区别。在火狐浏览器、Opera 和 IE

Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cr

相关知识每个CSS属性定义的概述都指出了这个属性是默认继承的，还是默认不继承的。这决定了当你没有为元素的属性指定值时该如何计算值。当元素的一个继承属性没有指定值时，则取父元素的同属性的计算值。只有文档根元素取该属性的概述中给定的初始值（这里的意思应该是在该属性本身的定义中的默认值）。当元素的一个非继承属性（在Mozilla code里有时称之为reset property）没有指定值时，则取属性的初始值initial value（该值在该属性的概述里被指定）。有继承性的属性：字体系列属性fo

相关知识点单冒号（:）用于CSS3伪类，双冒号（::）用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成）双冒号是在当前规范中引入的，用于区别伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法，例如 :first-line 、:first-letter 、:before 、:after 等，而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号写法。想让插入的内容出现在其他内容前，使用 ::before ，反之使用 ::after ，在代码顺序上，::after 生成的内容比

id选择器（#myid）类选择器（.myclassname）标签选择器（div, h1, p, …）后代选择器（h1 p）相邻后代选择器（子选择器）（ul > li）兄弟选择器（li ~ a）相邻兄弟选择器（li + a）属性选择器（a[rel=“external”]）伪类选择器（a:hover, li:nth-child）伪元素选择器（::before, ::after）通配符选择器（*）摘抄自：Github，作者：CavsZhouyou链接：https://githu.

有两种盒子模型：IE盒模型（border-box）、W3C标准盒模型（content-box）盒模型：分为内容（content）、填充（padding）、边界（margin）、边框（border）四个部分IE盒模型和W3C标准盒模型的区别：IE盒模型：属性width、height包含content、border和paddingW3C标准盒模型：属性width、height只包含内容content，不包含border和padding在IE8+浏览器中使用哪个盒模型可以由 box-sizing 控