weixin_40710412的博客

margin 可以理解为盒子的外边距，决定了盒子与盒子之间的距离。margin包围的盒子尺寸一般称为盒子的"外部尺寸"。外部尺寸和内部尺寸（可视尺寸）和 偏移尺寸 不同，其值可以为负，这就给margin带来了很多有意思的现象和应用，我们常用的左右布局，双飞翼布局，圣杯布局，等高布局，都可以采用负的margin盒子完成！复习一下： 外部尺寸 内部尺寸 偏移尺寸 （滚动尺寸）

padding 可以简单的理解为 填充在内容盒外层的“海绵”, 当box-sizing为默认的content-box时，增加padding时会导致整个盒子变大。如果你设置box-sizing为border-box, 并且设置width，此时width是整个border-box的宽度，如果此时padding超出这个尺寸，那么width会失效，盒子被撑开！

今天来总结一下css中的常用定位 position: absolute。

层叠，即页面各个元素在Z轴方向上的先后顺序，谁压着谁，谁覆盖着谁。其中z轴定义如下，也就是垂直于显示器的方向，定位元素flex子元素这里需要注意，浮动元素可以理解为漂在文档流上面，仅仅贴着文档流的，类似于水面上的救生圈，所以浮动元素的zIndex也不起作用!

我们在排版文字的时候，通常会把开头第一个文字/字母放大处理以达到美观的效果。这样做确实能实现效果，但是如下图所示，第一行的排版受到第一个字母的内容区影响会变得很奇怪，上下行间距都会变得很宽, 解决的办法可以是设置vertical-align: text-bottom 但是上半行距也会变得很奇怪。更好的解决办法是将::first-letter 伪元素设置为浮动元素，这样就可以让文字环绕在其周围，并且不影响行间距。

flex 布局在日常开发的过程中是非常常用的了，相较于传统的流式布局，flex可以更加灵活的设置布局内元素的排布和大小。