盒模式是 CSS 中一个重要的概念，即元素在页面所占据的空间位置，盒模型的属性包括：内容 (content)、填充 (padding)、边框 (border)、边界 (margin)，盒模型一共分为两种，一种是 W3C 标准盒模型，另一种是 IE 盒模型（又称怪异盒模型）
元素盒模型宽高 = 内容的宽高 + 内边距padding + 边框border + 外边距margin
背景颜色从 border-box 开始生效的，背景图像从 padding-box 开始生效的，CSS 3 属性 : content-box / padding-box / border-box 可以改变背景图像从盒模型的哪部分开始生效
通过盒模型的外边距 margin 拉开各元素之间的间隙、距离，使用 padding 来撑开自身的宽高
在低版本 IE 里，若不添加 <!DOCTYPE html> 的文档声明，就会按照 IE 盒模型进行解析
元素盒模型宽高 = 内容的宽高【元素的宽高 + padding + border】 + 外边距margin
IE 盒模型的计算方式和 W3C 的盒模型很相似，但有一点是非常不同的，这就是：内边距和边框并不被包含在计算的范围内，这就意味着，如果元素也有内边距 padding 和边框 border ，那么实际内容区域将会缩小，为它们腾出空间
在实际设计中，我们会发现，IE 盒模型更容易进行控制，我们一般先将整个容器的尺寸先确定，然后再填充具体的内容，通过 padding 来调整内容的具体位置，通过 margin 来调整容器与其他元素之间的间隙，无论如何调整，整个容器的结构是固定的，不会改变的；而在标准盒模型中，我们在调整 padding 和 margin 的同时，往往会将容器本身的结构打乱，需要重新设置内容 content 的尺寸
CSS 3 属性： box-sizing: border-box 可以让元素按照 IE 盒模型进行解析，即设置的宽高包括了 border 以及 padding 的值
display 属性，元素的显示方式，规定元素应该生成的框的类型，这个属性用于定义建立布局时元素生成的显示框类型
注释 ： inline-block 在 IE7 开始支持，在 IE6 下设置 _display:inline 也可以实现相同效果，下划线 _ 是只针对 IE6 所设置的 CSS 样式，例： _width:100px
我们来回顾下块元素和行元素的特点，块元素的特点： 竖直排列，可以设置宽高，宽度占满整行，即宽度 100%，另起新行 ；行元素的特点： 水平排列，设置宽高不生效，宽度由内容决定，高度由行高决定 ，这是我们之前已经了解过的，那么它们设置内外边距的特点又是什么呢？我们来尝试一下
由运行结果可以得知， 行元素在竖直方向上设置的 margin 不生效，水平方向上设置的 margin 叠加
由运行结果可以得知， 行元素在水平方向上设置的 padding 生效，竖直方向上的不生效 ，虽然元素的范围增大了，但是，由于行元素的高度是由内容决定的，所以加了上下 padding 以后会与临近行的元素产生干涉
所以，行元素建议尽量不要设置上下的内 / 外边距，即 padding-top , padding-bottom 和 margin-top ， margin-bottom ，因为要么起不到效果，要么看起来有效实则容易引起布局混乱
由运行结果可以得知， 块元素在竖直方向上设置的 margin 以大的 margin 来计算 ，因为块元素宽度默认占满整行，设置内边距 padding 和水平方向上的外边距 margin 只会调整元素的位置，在这里就不再验证
行元素在竖直方向上设置的 margin / padding 不生效，水平生效
块元素在竖直方向上设置的 margin 会重叠，大的那个值生效
行元素在水平方向上设置的 margin / padding 不会重叠，水平相加
设置了 inline-block 属性之后，行元素就具有块元素的特点【可以设置宽高；竖直方向上的 padding/margin 生效】，块元素就可以水平排列
display:none 和 visibility:hidden 都能把网页上某个元素隐藏起来，但两者是有区别的：
display:none 不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，不占据空间位置，完全消失
visibility:hidden 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，还占据原来的空间位置，可以理解为透明
让有宽度【非宽度100%】的 块元素水平居中 ： margin:0 auto
设置 单行文本的竖直居中 ： line-height: 该元素高度
行元素水平居中 ：给行元素的父级添加 text-alingn:center
text-align:center/left/right 设置块元素中的内容文本、图片的对齐方式，只能设置在块元素，在行元素中设置无效
行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下 喜欢 和 关注 ，为了我能早日成为优秀作者献上一发助攻吧，谢谢！^ ^
因为你把每个DIV都加了边框啊。比如说一个DIV得宽度是100
你在里面放了2个50宽度的DIV
然后设置了这个DIV的边框分别为1px
那么这里面的两个DIV宽度加起来就不是100了。
而已104px
这样自然就换行了
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。可以用简单的方式满足很多常见的复杂的布局需求。它的优势在于开发人员只是声明布局应该具有的行为，而不需要给出具体的实现方式。浏览器会负责完成实际的布局。该布局模型在主流浏览器中都得到了支持。
采用flex布局的元素，成为flex容器。它的所有子元素自动成为容器成员，称为flex项目。常用的，设置到容器上的属性有：
设置到项目上的属性：
(Block Formatting Context)块级格式化上下文。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此.并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
上述方法都可以创建BFC，但是会带来一些负面影响：
::before是css3的写法，:before是css2的写法，用来设置对象前的内容
:before的兼容性要比::before好
更准确的说法
1、transition 是过渡，是样式值的变化的过程，只有开始和结束；animation 其实也叫关键帧，通过和 keyframe 结合可以设置中间帧的一个状态；
2、animation 配合 @keyframe 可以不触发时间就触发这个过程，而 transition 需要通过 hover 或者 js 事件来配合触发；
3、animation 可以设置很多的属性，比如循环次数，动画结束的状态等等，transition 只能触发一次；
4、animation 可以结合 keyframe 设置每一帧，但是 transition 只有两帧；
常规方法
不需要使用transform属性时
webkit内核
参考链接：
CSS实现不换行/自动换行/文本超出隐藏显示省略号
object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。这个CSS属性可以达到最佳最完美的居中自动剪裁图片的功能
@import规则一定要先于除了@charset的其他任何CSS规则。
不推荐使用@import:
因为浏览器的兼容的问题，不同浏览器有些标签的默认值是不同的，如果没有CSS初始化往往会出现浏览器之间的页面显示差异。
伪元素和伪类的区别总结
css继承指的是被包在内部的标签将拥有外部标签的样式性，即子元素可以继承父元素的属性。
相关链接：
CSS 继承，哪些属性能继承，哪些不能
z-index可以改变元素层叠顺序，z-index较大的会叠加在z-index较小的元素上方。z-index值相同时，则按照文档流顺序，后面的覆盖前边的。
px就是pixel的缩写，意为像素。px就是一张图片最小的一个点，一张位图就是千千万万的这样的点构成的，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。注意css中的1px并不一定是物理像素的一个像素块，需要根据DPR计算，对应多少物理像素块
设备像素比：dpr = 物理像素 / 逻辑像素(px)，例如，iPhone6的dpr为2，物理像素750（x轴）,则它的逻辑像素为375
参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
css3新单位，相对于根元素html（网页）的font-size，不会像em那样，依赖于父元素的字体大小，而造成混乱。
css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。
1英寸（inch）=2.54厘米（cm）
手机对角线的长度换算成英寸
屏幕横向和纵向的像素点
1px即代表一个物理像素点/像素块
PPI，是每英寸可以显示的像素点的英文缩写。如果说上面分辨率是一个质量总量的概念，那么，ppi就是密度的概念。我们可以通过屏幕的像素总量除以屏幕大小来计算屏幕的PPI，公式如下： a：横向像素数量，b：纵向像素数量，c：屏幕尺寸（英寸）
1px与多少厘米之间是不能直接划等号的，需要看分辨率。
一般电脑的像素分辨率是72ppi，计算公式： (((1**2 + 1**2)**0.5)/72)*2.54 ，此时1px=0.0498cm，1cm=25px；
很多手机是300ppi，计算公式： (((1**2 + 1**2)**0.5)/300)*2.54 ，此时1px=0.0119cm。
参考链接：
画一条0.5px的线
在继承性上：
一开始针对低版本的浏览器构建页面，满足最基本的功能，再针对高级浏 览器进行效果，交互，追加各种功能以达到更好用户体验,换句话说，就是以最低要求，实现最基础功能为基本，向上兼容。以css为例，以下这种写法就是渐进增强。
一开始针对一个高版本的浏览器构建页面，先完善所有的功能。然后针对各个不同的浏览器进行测试，修复，保证低级浏览器也有基本功能 就好，低级浏览器被认为“简陋却无妨 (poor, but passable)” 可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较 大的错误之外，其它的差异将被直接忽略。也就是以高要求，高版本为基准，向下兼容。同样以css为例，优雅降级的写法如下。
渐进增强，开发时间长，成本高，优雅降级，节约成本，开发周期短。
