张鑫旭CSS深入系列学习总结

前言

大神博客地址

float 浮动

浮动的设计初衷仅仅是为了文字环绕效果

浮动的特性：包裹和破坏

包裹：

1. 收缩 水平方向
2. 坚挺 垂直方向
3. 隔绝 BFC

具有包裹性的其他小伙伴：
display: inline-block,table-cell,…
position: absolute(近亲),fixed,sticky,…
overflow: hidden/scroll

破坏：父元素高度塌陷
display: none
position: absolute,fixed,sticky

浮动是魔鬼，更是情非得已

浮动使高度塌陷不是 bug，而是标准（是为了实现文字环绕效果）

清除浮动：清除浮动带来的效果

两种方法：

1. 脚底插入 clear:both（只是搭桥，可以与外部发生外边距重叠）
2. 父元素 BFC（IE8+）或 haslayout（IE6/IE7），封闭，不与外界联系

clear:both

1. html block 水平元素底部走起，如
2. css after 伪元素底部生成

.clearfix:after {
  content: '';
  display: table;
  clear: both;
}
.clearfix {
  \*zoom: 1;
}

浮动的滥用

1. 元素的 block 块状化
2. 破坏性造成的紧密排列特性（去空格化，空格也是字符，浮动使字符移动到一边），因此常被用来砌砖头

砌砖布局的问题

1. 妙脆角——嘎吱脆——容错性比较糟糕，容易出问题
2. 吝啬鬼——重用废——需要固定尺寸
3. 洋葱头——IE7 飙泪——低版本问题多

ele.style[“cssFloat” in trigger.style?”cssFloat”:”styleFloat”] = ‘left’;

获取最终样式：display = this.currentStyle?this.currentStyle.display:window.getComputedStyle(this,null).display;

浮动与流体布局

1. 文字环绕衍生——单侧固定

width+float 和 padding-left/margin-left

1. 不改变 BOM 位置的单侧固定流体布局

要在外面加一层：width:100%+float
内部：padding-right/margin-right 和 width+float+margin 负值(将自己移上来) 3.高级进化-智能自适应尺寸（一侧改变宽度另一侧自动适应）
float 和 display:table-cell(IE8+)/display:inline-block(IE7)

.left {
  float: left;
  margin-right: 20px;
}
.right {
  display: table-cell;
  *display: inline-block;
  width: 2000px;
  *width: auto;
}

流体布局常采用宽度分离原则：易维护
margin-left: -100%的原理：浮动元素，只有在位置不够的时候才会被挤到第二行，而这能给元素一个位置，恰能到达窗口最左侧

float 兼容性

让 IE7 飙泪的问题
含 clear 的浮动元素包裹不正确的问题；
浮动元素倒数

2 个莫名垂直间距问题；
浮动元素最后一个字符重复问题；
浮动元素楼梯排列问题；
浮动元素和文本不在同一行的问题；

absolute

absolute 与 float

相同的特性表现：包裹和破坏
兄弟关系：页面可相互转化

absolute 与 relative

是分离的、对立的，不是兄弟关系！
absolute 越独立越强大
超越 overflow：独立的 absolute 可以摆脱 overflow 的限制，无论是滚动还是隐藏

无依赖的 absolute 定位

不受 relative 限制的 absolute 定位，行为表现上是不使用 top/left/bottom/right/任何属性或使用 auto 作为值
定位的行为表现 1.脱离文档流 2.折翼的天使：去浮动、位置跟随
IE7 永远的 inline-block 水平
配合 margin 的精确定位，这是不影响其他布局的绝对定位下的相对定位之王

强大的折翼天使

1. 图片、图标绝对定位覆盖（利用跟随性，更易维护），用去掉换行之间的空格
2. 下拉框定位最佳实践
3. 居中以及边缘对齐定位

text-align:center +  和自身 absolute 及 margin-left: 负的自身宽度的一半
边缘对齐：

<div class="wrap">
  <div class="center"></div>
  <div class="parent">
    &nbsp;
    <div class="child">123</div>
  </div>
</div>

CSS

.wrap {
  width: 1200px;
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
}
.center {
  width: 100%;
  height: 500px;
  background: #f00;
}
.parent {
  height: 0;
  overflow: hidden;
  text-align: right;
}
.child {
  display: inline;
  margin-left: 20px;
  position: fixed;
  bottom: 100px;
}

demo 4.各种对齐 *号对齐
图文混排
溢出

absolute 和层级

动画尽量作用在绝对定位元素上
如果非弹窗类的元素 z-index>2，必定有冗余，请优化

absolute 和天使的翅膀

absolute 与 width 和 height

.overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

left、right 与 width，top、bottom 与 height 相互替代性

绝对定位方向是对立的，left:0;right:0;会进行暴力拉伸
absolute 的翅膀拉伸和 width/height 是可以相互替代的

position:absolute;left:0;top:0;width:50%; = position:absolute;left:0;top:0;right:50%;

暴力拉伸支持 IE7+
差异所在：拉伸更强大，width 只能使用 CSS3 calc 计算

相互支持性

1. 容器无需固定 width/height 值，内部元素亦可拉伸
2. 容器拉伸，内部元素支持百分比 width/height 值

元素百分比 height 要想其作用，通常需要父级容器的 height 值不是 auto
相互合作性：当尺寸限制、拉伸以及 margin:auto 同时出现时，会有绝对定位元素的绝对居中效果（IE8+）

absolute 与整体页面布局

1. body 降级、子元素升级
   升级的子 div 满屏走起
   .page{position: absolute;left:0;right:0;top:0;bottom:0;}
   绝对定位受限于父级，因此需要 html,body{height:100%;}
2. 各模块——各居其位
3. 内容区域想象成 body，避免了移动端 position：fixed 问题
4. 全屏覆盖与 page 平级，可以用来移动端上、下固定的整体布局

overflow

overflow 基本属性

visible,hidden,scroll,auto,inherit
overflow-x 和 overflow-y(IE8+)，值相同时，为值属性，当一个为 visible，一个为 hidden 或 scroll 或 auto 时，会重置为 auto

兼容性

1. 燕肥环瘦，各有千秋
2. 宽度设定机制（IE7 width:100%出现水平滚动条）

作用的前提

1. 非 display:inline 水平
2. 对应方位的尺寸限制：width/height/max-width/max-height/absolute 拉伸
3. 对应 td 等，还需要设置 table 为 table-layout:fixed

overflow 与滚动条

无论什么浏览器，默认滚动条均来自 html 标签,而不是 body 标签

body 默认 0.5em margin 值
IE7 默认：html{overflow-y:scroll;}
IE8+等浏览器默认：html{overflow:auto;}

去除页面默认滚动条，只需要 html{overflow:hidden;}
滚动高度：
chrome：document.body.scrollTop;
其他：document.documentElement.scrollTop;

overflow 的 padding-bottom 缺失现象：chrome 不缺失，其他缺失，导致 scrollHeight 不一样

滚动条水平宽度：
overfl:auto 的潜在布局隐患：因为滚动条会占用容器尺寸

水平居中的跳动问题

1.html{overflow-y:scroll;}
2..container{padding-left:calc(100vm - 100%);}(IE9+)

自定义滚动条-webkit

::-webkit-scrollbar {
  /* _血槽宽度_ */
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  /* _拖动条_ */
  background-color: raba(0, 0, 0, 0.3);
  border-radius: 6px;
}
::-webkit-scrollbar-track {
  /* _背景槽_ */
  background-color: #ddd;
  border-radius: 6px;
}

自定义滚动条——IE（丑到爆，用插件）
IOS 原生滚动回弹效果-webkit-overflow-scrolling:touch;

overflow 与 BFC

visible 不触发，其他 3 个触发

1. 清除浮动影响
2. 避免 margin 穿透问题（指子元素 margin 穿透父级元素
3. 两栏自适应：左浮动，右 overflow

使用 padding 做流体自适应布局时，万万不可让自适应层 BFC 化
.cell{overflow:hidden;_display:inline-block;}副作用明显，无法广泛应用，因此最常用：

.cell {
  display: table-cell;
  width: 2000px;
  *display: inline-block;
  *width: auto;
}

overflow 与绝对定位

overflow:hiddenshi 失效、overflow 滚动失效
w3c 官方文档是这样解释的：绝对定位元素不总是被父级 overflow 属性裁剪，尤其是当 overflow 在绝对定位元素及其包含块之间的时候

如何避免失效：

1. overflow 元素自身为包含块
2. overflow 元素的子元素为包含块 3.任意合法 transform 声明当做包含块（仅做了解）
   overflow 失效的利用

依赖 overflow 的样式表现

1. css resize:both/horizontal/vertical

textarea 自带 resize 特性，因为自带 overflow:auto，默认 17px*17px 2. text-overflow:ellipsis;

overflow 与锚点技术

锚链：hash（url 中#）
锚点
锚点定位的本质就是：“滚床单”——改变容器的滚动高度 1.容器可滚动 2.锚点元素在容器内
锚点定位的触发：
1.url 地址中的锚链与锚点元素 2.可 focus 的锚点处于 focus 状态
锚点定位的作用: 1.快速定位 2.锚点定位与 overflow 选项卡技术（适应单页，无滚动）

line-height

line-height 的定义

行高：两行文字基线（baseline）之间的距离

1. 什么是基线：baseling，英文字母 x 下边沿位置
2. 为什么是基线：可以是基线，但基线乃任意线之根本
3. 有字母基线、悬挂基线、表意基线（中文）等

基线与字体有关，微软雅黑偏下
单行文本用 line-height 看似居中，实际未居中，字体越大差异越明显

line-height 与行内框盒子模型

1. 内容区域（context area）是一种围绕文字看不见的盒子，与 font-size 大小相关
2. 内联盒子（inline boxes），如果外部含 inline 水平的标签，则属于内联盒子，如果是一个光秃秃的文字，则属于匿名内联盒子
3. 行框盒子（line boxes），每一行就是一个行框盒子，由内联盒子组成
4. 包含盒子（containing box），由行框盒子组成

line-height 的高度机理

内联元素的高度由行高决定，不是文字撑起的

1. 行高由于其继承性，影响无处不在，即使单行文本也不例外
2. 行高只是幕后黑手，高度的表现不是行高，而是内容区域和行间距
   行高 = 内容区域 + 行间距
   内容区域高度只与字体和字号有关，与 line-height 无关
   在 simsun（宋体）字体下，内容区域高度等于文字大小值
   simsun 字体下，font-size + 行间距 = line-height
   行间距 = line-height - context area
   行高决定内联盒子高度，行间距墙头草，可大可小（甚至负值），保证高度正好等于行高

line-height 各类属性值

1. normal：默认属性值，跟着用户的浏览器走，且与元素字体关联

微软雅黑 normal chrome 1.32 左右
宋体 normal chrome 1.14 左右
在各浏览器中不一致，因此要在 body 中重置

2. number，length，percent，inherit（IE8+)

line-height:1.5 所有可继承元素根据 font-size 重新计算行高
line-height:150%/1.5em 当前元素根据 font-size 计算行高，继承给下面的元素

推荐 number：
body{font-size:14px;line-height:4.1286;}——匹配 20px，重阅读可以 1.5，1.6

line-height 与图片的表现

行高不会影响图片实际占据的高度
图片混排，可以感性认为与隐匿文本节点基线对齐

如何消除图片底部间隙？

1. 图片块状化——无基线对齐 img{display:block;}
2. 图片底线对齐——img{vertical-align:middle;}
3. 行高足够小——.box{line-height:0;}

小图片和大文字，基本上高度受行高控制

line-height 的实际应用

1.图片水平居中(近似)：

/* IE8+  */
vertical-align: middle;

2.多行文本垂直居中

.box {
  line-height: 200px;
}
.text {
  display: inline-block;
  line-height: normal;
  text-aling: left;
  vertical-align: middle;
  max-width: 100%;
}

查看 demo
{height: 36px; line-height: 36px;}前一个多余（其实应该是不一定，至少 overflow:hidden 时可能 line-height 多余，可能都要）

vertical-align

基本认识

inherit
线类：baseline（默认）、top、middle、bottom
文本类：text-top、text-bottom
上标、下标类：sub、super
数值百分比类：20px、2em、20%（在 basseling 对齐的基础上再移动相应距离，支持负值）
vertical-align 的百分比值是相对于 line-height 计算的

vertical-align 起作用的前提

应用于 inline 水平元素以及 table-cell 元素
默认 inline 水平元素：img，span,strong,em,未知元素
默认 inline-block 元素：input(IE8+),button(IE8+)
默认 table-cell 元素：td
所以默认状态下，可以应用 vertical-align 的有：图片、按钮、文字、单元格

改变元素状态：

1. 直接 display 设置
2. css 声明间接设置（浮动、绝对地位）

注意能应用 vertical-align 时也不一定能居中，如
.wrap{height: 300px;border: 1px solid;}
.wrap img{vertical-align: middle;}
还是需要给 wrap 设置 line-height
还需注意 display:table-cell 元素，需要 vertical-align:middle 作用于自身，如下设置在 img 上无效

.wrap {
  height: 300px;
  display: table-cell;
  border: 1px solid;
}
.wrap img {
  vertical-align: middle;
}

实例：个数不定文字内容和图片垂直居中

.wrap {
  border-bottom: 1px solid;
  width: 300px;
  padding: 20px 10px;
}

.wrap span {
  width: 200px;
  display: inline-block;
  vertical-align: middle;
}

.wrap img {
  vertical-align: middle;
}

查看 demo

vertical-align 与 line-height

vertical-align 的百分比是相对于 line-height 计算的
对于内联元素，vertical-align 与 line-height 虽然看不见，但实际上处处都是
近似垂直居中：vertical-align:middle;

<span class="baseline"></span>
<span class="baseline">x-baseline</span>

.baseline{ height: 150px; width: 150px; display: inline-block; background: #ccc;
}

查看对齐情况
根据 css2 的可视化格式模型文档：inline-block 的基线是正常流最后一个 line box 的基线，除非这个 line box 里面既没有 line boxes（line box 是空的）或者本身 overflow 属性的计算值不是 visible，这种情况下基线是 margin 底边缘
设置 line-height:0，会再下沉，因为字符高度为 0，实际占据的高度为 0，高度区域为字符串垂直中心线，盒子上边缘为 1/2x 高度处
text-align:justify 任意数目列表两端对齐
下方空白一般可以通过 line-height:0;vertical-align:top;一起解决

vertical-align 线性类属性值

1. vertical-align:bottom 的定义
   inline/inline=block 元素：元素底部和整行的底部对齐
   table-cell 元素：单元格底 padding 边缘和表格行的底部对齐
2. vertical-align:top 的定义
   inline/inline=block 元素：元素顶部和整行的顶部对齐
   table-cell 元素：单元格上 padding 边缘和表格行的顶部对齐
3. vertical-align:middle 的定义
   inline/inline=block 元素：元素的垂直中心点和父元素基线上 1/2x height 对齐
   table-cell 元素：单元格填充盒子相对于外面的表格行居中对齐
   字符的中心不是 x 文字的中心（因为字符有下沉效应，不同字体下沉程度不一致），即 context area 高度的中心线和基线上 1/2x height 线不对齐，所以 img 要完全居中，还需要设置 font-size:0;

vertical-align 文本类

与前后元素无关，与 line-height 无关，只与 font-size 有关

text-top:盒子的顶部和父级 content area 的顶部对齐
text-bottom:盒子的底部和父级 content area 的底部对齐

实际作用：表情图片（或原始尺寸背景图标）与文字的对齐效果

1. 使用顶部/底线的问题在于受其他内联元素的影响
2. 使用中线也不错，但需要恰好的字体大小
3. 使用文本底部较合适，不受行高及其他内联元素影响

vertical-align 上标、下标类

sup 标签 vertical-align: super;
sub 标签 vertical-align: sub;

vertical-align 前后不一的作用机制

关注当前元素和父级，前后并没有直接影响
查看 demo
近似垂直居中：

p {
  line-height: 200px;
}
p img {
  vertical: middle;
}
p img::after {
  content: '';
  vertical-align: middle;
}

兼容性

IE7 有很多兼容性问题，可以认为 IE7 下图文一体（后面文字套层 span 标签，并 display:inline-block 可解决），middle 解释有问题

vertical-align 的实际应用

1.小图标和文字的对齐

vertical-align 负值，无兼容性问题

2.不定尺寸图片或多行文本的垂直居中

主体元素 inline-block
0 宽度 100%高度辅助元素
vertical-align:middle;

<div class="parent">
  <div class="vertical-center">
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
  </div>
  <i></i>
</div>

.parent {
  height: 200px;
  background: #ccc;
  text-align: center;
}
.parent .vertical-center {
  display: inline-block;
  vertical-align: middle;
}
.parent i {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

查看 demo

relative

relative 与 absolute

限制作用

1. 限制 left/top/right/bottom 定位
2. 限制 z-index 层级，当 relative 层级不是 auto 时，里面的 absolute 层级不起作用
3. 限制在 overflow 下的嚣张气焰，防止 absolute 超出

对于 fixed 元素只能限制 z-index 层级

relative 与定位

1. 相对自身
2. 无侵入：不影响其他元素，可以用于自定义拖动

top 和 bottom 同时存在，top 优先级高
left 和 right 同时存在，left 优先级高

relative 与 z-index 层级

1. 提高层叠上下文：如果有两张图片层叠在一起，像让下面的图片放到上面来，就可以设置下面的图片的 position 为 relative
2. 新建层叠上下文与层级控制：如果子元素设置了 absolute，z-index：4；父元素设置了 relative，z-index：1；另外一个子元素设置了 absolute，z-index：2；父元素设置了 relative，z-index3；则结果会使后者显示在上面
   将父元素的 z-index：auto 是不会限制内部 absolute 元素层叠问题，不包括 IE6/IE7

relative 的最小化影响原则

指的是尽量降低 relative 对其他元素的影响

1. 尽量避免使用 relative：absolute 定位不依赖 relative
2. relative 最小化原则：放在空 div 里

z-index

z-index 基础

z-index:auto 或者 整数值 inherit 1.支持负值 2.支持 css3 animation 动画 3.在 css2.1 时代，需要和定位元素配合使用

z-index 与定位元素

z-index 在定位元素中起作用

z-index:auto 近似 z-index:0
原则:谁大谁上，祖先优先

如果定位元素 z-index 没有发生嵌套：
a.后来者居上
b.谁大谁上

如果定位 z-index 发生嵌套：祖先优先（前提是 z-index 是数值，不是 auto），按照祖先的层级再遵循 a，b 规则

z-index:auto 当前层叠上下文的生成盒子层叠水平是 0，盒子（除非是根元素）不会创建一个新的层叠上下文 3.层叠上下文和层叠水平

stacking context（层叠上下文）：是 html 中的一个三维概念，意味着元素在 z 轴（人的视线穿过显示器的直线轴）上可以“高人一等”

1. 页面根元素具有层叠上下文
2. z-index 值为数值时也具有层叠
3. 其他属性

层叠水平：stacking leavel 层叠上下文中的每个元素都有一个层叠水平，决定了同一个层叠上下文中元素在 z 轴上的显示顺序。遵循谁大谁上，后来居上的层叠原则

层叠水平与 z-index 区别：
普通元素也有层叠水平
z-index 只在定位元素起作用
层叠上下文特性： 1.层叠上下文可嵌套成一个分层次的层叠上下文 2.层叠上下文与兄弟元素独立。层叠上下文变化渲染，只考虑后代元素 3.每个层叠上下文自成体系：被层叠后，元素被认为在父层层叠顺序中

层叠顺序

层叠顺序（stacking order）表示元素发生层叠时候有着特定的垂直显示顺序
著名的七阶层叠水平(stacking level)

从低到高：
层叠上下文 background/border,负 z-index,block 块状水平盒子,float 浮动盒子,inline/inline-block 水平盒子,z-index:auto 或看成 z-index:0,正 z-index

1. 意义：规范元素重叠时的呈现规则
2. 为什么？

更符合页面加载的功能和视觉呈现，装饰——布局——内容
内容是页面最重要的实体，因此层叠水平要高

查看 demo

demo 解释：背景色覆盖是层叠顺序，文字覆盖是后来居上（因为文字是 inline 水平的，和 inline-block 平级）

z-index 与层叠上下文

1. 定位元素默认 z-index:auto，可以看成是 z-index:0;
2. z-index 不为 auto 的定位元素会创建层叠上下文；
3. z-index 层叠顺序的比较止步于父级层叠上下文

从层叠顺序上讲，z-index 可以看成 z-index，但是从层叠上下文来讲，两者有着本质区别（但不包括 IE7）
z-index:auto 不会创建层叠山下文
z-index:0 会创建
如果不创建层叠上下文，默认为根元素

查看 demo

其他属性和层叠上下文

1. z-index 值不为 auto 的 flex 项（父元素 display：flexinline-flex）。
2. 元素的 opacity 值不是 1.
3. 元素的 transform 值不是 none。
4. 元素 mix-blend-mode 值不是 normal，
5. 元素的 filter 值不是 none。
6. 元素的 isolation 值不是 isolate。
7. position：fixed 声明（chrome 等 blink/webkit 内核）
8. will-change 指定的属性值为上面任意一个
9. 元素的-webkit-overflow-scrolling 设为 touch

z-index 与其他 css 属性层叠上下文

1. 不支持 z-index 的层叠上下文元素层叠顺序均是 z-index:auto 级别
2. 依赖 z-index 的层叠上下文元素的层叠顺序取决于 z-index 值

（1）position:relative/absolute/fixed（部分浏览器）
（2）display:flex/inline-flex 值的子元素 flex 项

常见淡入动画文字变化

相关实践分享

1.最小化影响原则 2.不犯二准则 3.组件层级计算器 4.可访问性隐藏

（1）最小化影响原则

目的：避免 z-index 嵌套混乱
原因：元素的层叠水平主要是由所在的层叠上下文决定的，IE7 z-index:auto 也会创建层叠上下文
做法：避免使用定位属性，定位属性从大容器平级分离为私有小容器

（2）不犯二准则

避免 z-index 混乱，一山比一山高的样式问题
原因：多人协作以及后期维护
做法：对非浮层元素，避免设置 z-index 值，z-index 值没有任何道理需要超过 2

（3）组件层级计数器

目的：避免浮层组件因 z-index 被覆盖的问题
原因：总会遇到意想不到的高层级元素，组件的覆盖规则具有动态性
做法：组件层级计数器
通过 js 获取 body 下子元素的最大 z-index 值

（4）负值 z-index 与可访问性隐藏

text-indent: -9999px;clip 剪裁等可以进行可访问性隐藏
人肉眼不可见，但是辅助设备可识别

<form>
  <input type="text" />
  <input type="submit" id="submit" />
  <label for="submit">提交</label>
</form>

[type=submit]{ position: absolute; z-index: -1; }

可以避免 submit 的复杂样式兼容问题，高级浏览器可直接 display:none

margin

margin 与容器的尺寸

可视尺寸-clientWidth(标准)；
占据尺寸，可以理解为 outerWidth（yy，非标准，jquery 有）
margin 与可视尺寸：

1. 适用于没有设定 width/height 的普通 block 水平元素，float 元素、absolute/fixed 元素等不可以
2. 只适用于水平方向

应用：单侧顶宽的自适应布局

margin 与占据尺寸

1. block、inline-block 水平元素均适用
2. 与有没有设定 width/height 无关
3. 适用于水平方向和垂直方向

应用：滚动容器内上下留白，非 chrome 浏览器容器加 padding 底部无留白，overflow 那节有讲

css margin 与百分比单位

普通元素的百分比 margin 的计算规则：都是相对于容器的宽度计算的
绝对定位元素的百分比 margin：是相对于第一个定位祖先元素（relative/absolute/fixed）的宽度计算的
应用：如宽高 2:1 的自适应矩形
查看 demo

margin 重叠

margin 重叠通常特性
1.block 水平元素（不包括 float 和 absolute 元素） 2.不考虑 writing-mode，只发生在垂直方向上
margin 重叠 3 种情境 1.相邻的兄弟元素 2.父级和第一个/最后一个子元素 3.空的 block 元素

<div class="father" style="background: #ccc;overflow: hidden;">
  <div class="child" style="margin: 1em 0;"></div>
  <!--高度只有1em，而非2em-->
</div>

父子之间 margin-top 合并：

1. 父元素非块级格式化上下文元素
2. 父元素没有 border-top 设置
3. 父元素没有 padding-top 值
4. 父元素和第一个子元素没有 inline 元素分隔

父子之间 margin-bottom 合并：

1. 父元素非块级格式化上下文元素
2. 父元素没有 border-top 设置
3. 父元素没有 padding-top 值
4. 父元素和第一个子元素没有 inline 元素分隔
5. 父元素没有 height，min-height，max-height 等限制

margin 计算
1、正正取大值；
2、正负值相加；
3、负负最负值；

实践：善用 margin 层叠

.list {
  margin-top: 15px;
  margin-bottom: 15px;
}

更具有健壮性，最后一个元素移除或者位置调换，均不会影响原来的布局

margin:auto

自动计算填充剩余空间
垂直居中：

1. 可以 writing-model:vertical-lr，更改流为垂直方向，可以垂直居中
2. absolue 与 margin:auto

.father {
  height: 200px;
  position: relative;
  background-color: #ccc;
}

.son {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 500px;
  height: 100px;
  background: blue;
  margin: auto;
}

css margin 负值定位

1. margin 负值下的两端对齐：margin 改变元素尺寸
2. margin 负值下的等高布局：改变元素占据空间
   注：其实就是所谓的 padding 补偿法，很大的 margin-bottom 负值加很大的 padding-bottom 填充缺失的空间，容器必须设置 overflow:hidden,focus 时可能有副作用
3. margin 负值下的两栏自适应布局：元素占据空间随 margin 移动

css margin 无效

1. inline 水平元素垂直方向 margin 无效
   两个前提：非替换元素，如不是 img 元素，正常书写模式（没有设置 writing-mode 等）
2. margin 重叠
3. display:table-cell 与 margin，替换元素 display:table-cell 时 margin 有效，各浏览器有差异
   display 为 table 相关类型 margin 无效
4. 绝对定位元素的非定位方向 margin“无效”，看似无效，实则微妙，其实绝对定位的 margin 值一直有效，只是不像普通元素那样可以和兄弟元素插科打诨
5. 鞭长莫及导致的 margin 无效 6.内联特性导致的 margin 无效

<div style="height: 200px;background: #ccc;">
  <img src="test.jpg" style="margin-top: -248px;" />
</div>

内联默认 x 不能超出容器

margin-start 和 margin-end

正常的流向，margin-start 等同于 margin-left，两者重叠不累加
如果水平流是从右到左的，margin-start 等同于 margin-right
在垂直流下，margin-start 等同于 margin-top
webkit：margin-before，margin-after，margin-collapse

padding

padding 与尺寸

对于 block 水平元素

1. padding 值暴走，一定会影响尺寸；
2. width 非 auto，padding 影响尺寸；
3. width 为 auto 或 box-sizing 为 border-box，同时 padding 值没有暴走，不影响尺寸；
   对于 inline 水平元素
   水平 padding 影响尺寸，垂直 padding 不影响尺寸，但是会影响背景色（占据空间）
   利用：高度可控的分隔线

padding 负值和百分比值

不支持任何形式的负值
padding 百分比均是相对于屏幕宽度计算的
利用 padding 轻松实现一个正方形
inline 水平元素的 padding 百分比值：

1. 同样相对于宽度计算
2. 默认的高度和宽度有差异
3. padding 会换行

空的 inline 水平元素加 padding 高度和宽度默认也不相等，inline 元素的垂直 padding 高度会让幽灵空白节点显现，也就是规范中的 strut，要把字体的大小设置为 0

标签元素的默认 padding

1. ol/ul：内置 padding-left，但单位不是 em，是固定的 px
   比较好的实践：padding-left:22px-25px 对齐
2. 表单内置 padding

所有浏览器 input、textarea 输入框内置 padding
所有浏览器 button 按钮内置 padding
部分浏览器 select 下拉内置 padding，如 Firefox、IE8+可以设置 padding
所有浏览器 radio/checkbox 单复选框无内置 padding，设置无效
button 按钮的 padding 最难控制，可以用 label 模拟

padding 与布局

1. 使用百分比单位构建固定比例的布局结构
2. 配合 margin 等高布局
3. 两栏自适应布局，padding 可以在父元素也可以在子元素