Better

看张鑫旭大神的教程的笔记，膜拜与感谢哇，有时间计划购买其著作《CSS世界》深入学习一下！

border

border-width

• 不支持百分比，是因为语义和使用场景决定的
• 支持关键字：thin（1px），medium（3px，默认值），thick（5px）
• border-style:double（双线）至少3px才有效果，所以默认值为medium，哈哈
• double计算规则：双线永远相等，中间间隔加减1

border-color

• border-color的默认颜色就是color
• 稍加利用，可以达到代码简写的目的

border与background

• background定位局限：在CSS2.1中，定位只能相对于左上角，不能右下角
• 解决办法，使用border-right配合background-position:100% 40px;

border在布局中使用

• 标题栏
• 两栏等高布局
  • 局限不支持百分宽度
  • 需要使用百分比，则使用padding或margin布局

其他

• 三角和梯形
• 透明边框妙用

padding

padding与元素的尺寸

• 针对block元素
  • 在设置宽度会固定尺寸时，padding会增加影响元素尺寸
  • 但如果宽度是auto，或者box-sizing为border-box时
    • padding值小于内容值，尺寸不会变，内容区收缩
    • padding值大于内容值，尺寸发生改变
• 对于内联元素
  • 水平padding影响尺寸，垂直padding不影响尺寸
  • 但垂直方向会影响内容区域尺寸，会加大height高度
  • 高度可控分隔线

    注册<span></span>登录
    span{
      padding:16px 6px 1px;
      margin-left:12px;
      border-left:2px solid;
      font-size:0;
    }
    

负值和百分比

• padding不支持任何形式的负值
• 块级元素padding百分比是相对于宽度计算的
• inline元素
  • 同样相对于宽度计算
  • 默认高度宽度细节会有差异
  • padding会断行
  • 即使是空白元素，设置padding:50%，仍然不会是正方形，但此时设置font-size:0，即可修复这个问题
  • inline元素的垂直padding会让"幽灵空白节点"显现，也就是规范中的"strut"出现

标签元素内置padding

• ol/ul
  • 内置padding-left，但是单位是px，而不是em（更多情况是em）
  • 平时网页开发，文字大小一般12或14px，此时padding-left设置为22px（不超过25px）会比较合适
• 所有浏览器的input/textarea都有内置padding
• 所有浏览器的button都有内置padding
• 部分浏览器select有内置padding
• 所有浏览器的radio/checkbox，无内置padding，设置也无效
• button的padding最难控制
  • 设置padding:0,在firefox下依然padding，在IE7，文字越多，左右padding越大，需要额外设置如下

    // firefox
    button::-moz-focus-inner { padding:0 }
    // IE7
    button { overflow:visible }
    

  • padding与高度的计算不一致，比如

    // IE7:45px
    // IE8+:40px
    // FireFox:42px
    // Chrome:40px
    button {
      line-height:20px;
      padding:10px;
      border:none
    }
    

  • 这就是为什么很多时候使用a标签代替button
  • 如果实在要使用，可以使用label

    <button id="btn"></button>
    <label for="btn">按钮</label>
    

padding布局实践

• 使用百分比单位构建固定比例布局结构
• 配合margin实现等高布局

  .box{
    overflow: hidden;
    resize: vertical
  }
  .child-orange,.child-green{
    width: 50%;
    margin-bottom: -600px;
    padding-bottom: 600px; 
  }
  .child-orange{
    float: left;
    background: orange
  }
  .child-green{
    float: left;
    background: green
  }
  

• 两栏自适应布局

margin

margin与容器尺寸的关系

首先理清楚两个概念

1. 可视尺寸-clientWidth（标准）
2. 占据尺寸-outerWidth（YY，jQuery）

margin会影响元素可视尺寸

• 适用于没有设定width/height的普通block水平元素（float元素 absolute/fixed元素 inline元素 table-cell元素不算）
• 只适用于水平方向尺寸
• 负值变大，正值变小
• 场景：一侧定宽的自适应布局

margin与占据尺寸

• block/inline-block均适用
• 与有没有设置width/height无关
• 适用于水平方向和垂直方向
• 场景：滚动容器的上下留白（padding会有兼容性问题）

margin与百分比单位

• 水平方向百分比/垂直方向百分比
• 普通元素百分比/绝对定位元素百分比
  • 普通元素百分比margin都是相对于容器的宽度计算的
  • 绝对定位元素百分比margin是相对于第一个定位祖先元素（relative/absolute/fixed）的宽度计算的
• 场景：自适应矩形

margin重叠

• 通常特性
  • block水平元素（不包括float和absolute元素）
  • 不考虑write-mode，只发生在垂直方向
• 3种情境
  • 相邻兄弟元素
  • 父级和第一个/最后一个子元素
  • 自己和自己重叠，适用于空的block元素

父子margin重叠的其他条件

margin-top重叠

• 父元素非块状格式化上下文（BFC），比如设置overflow:hidden就可以干掉重叠啦
• 父元素没有border-top
• 父元素没有padding-top
• 父元素和第一个子元素之间没有inline元素分隔

margin-bottom重叠

• 父元素非块状格式化上下文（BFC），比如设置overflow:hidden就可以干掉重叠啦
• 父元素没有border-bottom
• 父元素没有padding-bottom
• 父元素和第一个子元素之间没有inline元素分隔
• 父元素没height/min-height/max-height限制

重叠规则

• 正正取大值
• 正负值相加
• 负负最负值

margin重叠的意义

• 连续段落或列表之间，如果没有margin重叠，首尾间距会和其他兄弟标签1:2的关系，排版不自然
• 在任何地方嵌套或直接放入裸div都不会影响原来的布局
• 遗落的空任意多个p元素，不要影响原来的阅读排版

有时候可以善用margin重叠哦

margin:auto

• 原本应该填充的尺寸被width/height强制变更，而margin:auto就是为了填充这个变更而设计的
• 本质作用：自动填充，分配剩余空间，规则如下
  • 一侧定值，一侧auto，auto为剩余空间大小
  • 两侧均为auto，则平分剩余空间
• 图片为何不居中
  • 因为图片是inline水平，就算不没有width，也不会填充整个容器
  • 需要居中的话，强行设置为block元素，在设置auto便居中了
• 为什么垂直auto，无法垂直居中呢
  • 原理是一样的，只不过方向不一样，不存在剩余空间的说法
  • 子元素不设置高度，难道会变得和父元素一样高么，答案是否定的
• 如何用margin实现垂直方向居中呢
  • CSS写法，设置wirting-mode:vertical-lr
  • 绝对定位元素auto居中

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

margin负值定位

• margin负值实现两端对齐
• margin负值实现等高布局
• margin负值实现两栏自适应布局

margin失效情形

• inline元素垂直margin无效
  • 前提，不是替换元素，比如不是img、button、input、textarea、select元素
  • 替换一般有内在尺寸即img默认的是其图片的宽高，input也有默认的尺寸。几乎所有替换元素都是行内元素。
  • 行内元素的宽高大多是auto*auto。但其中包含的替换元素都可以直接设置宽高。如img input textarea等等
• margin重叠导致无效，工作中碰到特殊情况可以从这里检查
• display:table-cell/table-row等声明的margin无效
  • 但是替换元素就有效，我也是醉啦
• 绝对定位absolute与margin
  • 绝对定位元素非定位方向的margin值"无效"，什么时非定位方向呢？比如设置了left和top，那么right和bottom就是非定位方向，这里需要知道默认是基于左上
  • 绝对定位的margin值一直有效，只是不想普通元素一样，可以和兄弟元素插科打诨，因为他是脱离文档流的，和兄弟节点没有关系，他会影响父元素容器的大小
• 鞭长莫及导致的无效
  • 比如div和浮动元素配合实现两栏布局
  • inline元素设置margin，有个大限制，不能完全跑出容器

margin-start/margin-end

• 正常流向，margin-start等同于margin-left，两个不累加
• 如果水平流是从右往左，则margin-start等同于margin-right
• 垂直流，margin-start等同于margin-top
• 更多：margin-before，margin-after
• margin-collapse 控制margin重叠该如何表现
  • collapse 默认重叠
  • discard 取消margin
  • separate 分隔，没有margin重叠
• 考虑到移动端基本上是webkit天下

z-index

z-index指定了元素及其子元素的z顺序，z顺序可以决定当元素发生覆盖时，哪个元素在上面，通常一个较大的z-index值的元素会覆盖较低的那个。

属性值

• auto 默认值
• integer 整数值
• inherit 继承

基本特性

• 支持负值
• 支持css3 animation动画
• 在css2.1时代，需要和定位元素配合，在css3中有例外

z-index与定位属性

• absolute/fixed/relative/sticky
• 如果设置了z-index没有发生嵌套
  • 后来居上准则
  • z-index，哪个大，哪个上
• 如果定位元素发生了嵌套
  • 祖先优先原则
  • 前提：z-index必须时数值，不能auto
  • 前提原因：z-index:auto，当前层叠上下文的生成盒子层叠水平是0。盒子（除非是根元素）不会创建新的层叠上下文

层叠上下文与层叠水平

• 层叠上下文（stacking context）是HTML元素中的三维概念，表示元素在z轴上可以高人一等
• 哪些元素具有层叠上下文呢
  • 页面根元素，称之为根层叠上下文
  • z-index为数值的定位元素也具有层叠上下文
  • 其他属性
• 层叠上下文特性
  • 层叠上下文可以嵌套
  • 每个层叠上下文和兄弟元素独立，当进行层叠变化和渲染时，只需要考虑后代元素
  • 每个层叠上下文是自成体系的：当元素的内容被层叠后，整个元素被认为是在父层的层叠顺序中
• 层叠上下文的每个元素都有层叠水平，决定了同一个层叠上下文中元素在z轴上的显示顺序，遵循后来居上，谁大谁上原则
• 层叠水平和z-index不是一个东西，普通元素也有层叠水平

理解层叠顺序

• 元素发生层叠时候有着特定的垂直显示顺序
• 7阶层叠水平，从远到近依次为
  1. 层叠上下文的background/border
  2. 负z-index
  3. block块状水平盒子
  4. float浮动盒子
  5. inline/inline-block水平盒子
  6. z-index为auto或看成z-index:0，不依赖z-index的层叠上下文
  7. 正z-index
• 层叠顺序的意义：规范元素重叠时候的规则
• 为何层叠顺序是这样的，更加符合页面加载的功能和视觉呈现
  • background/border参与装饰
  • block，float参与布局
  • 内联元素基本上都是内容
  • 总结：内容是页面最重要的实体，因此层叠水品要高

z-index与层叠上下文

• 定位元素默认z-index:auto可以看成z-index:0
• z-index不为auto的定位元素会创建层叠上下文
• z-index层叠顺序的比较止步于父级层叠上下文
• 从层叠顺序上讲，z-index:auto可以看成z-index:0，但从层叠上下文讲，两者却有着本质差异

其他参与层叠上下文的属性们

• 父元素为flex布局会创建层叠上下文，子元素z-index值不为auto
• 元素的opcity不是1
• 元素的tranform值不是none
• 元素的mix-blend-mode（混合模式）值不是normal
• 元素的filter（css3滤镜）不是none
• 元素的isolation值是isolate
• position为fixed声明
• will-change指定的属性为上面任意一个
• 元素的-webkit-overflow-scrolling设为touch

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

• 不支持z-index的层叠上下文元素均是z-index:auto
• 依赖z-index层叠上下文元素的层叠顺序取决于z-index值
• 依赖z-index创建层叠上下文的情况
  • position为absolute/relative/fixed（部分浏览器）
  • display:flex|inline-flex容器的子flex项

z-index实践

• 最小化影响原则
  • 目的：避免z-index嵌套层级混乱
  • 原因
    • 元素的层叠水平主要由所在的层叠上下文决定
    • IE7，z-index:auto也会创建层叠上下文
  • 做法
    • 避免使用定位属性
    • 定位属性从大容器平级分离为私有小容器
• 不犯二原则
  • 目的：避免z-index混乱，出现一山比一山高的样式问题
  • 原因：多人协作，后期维护
  • 做法：对于非浮层元素，避免设置z-index值，z-index的值没有任何原因需要超过2
• 组件层级计数器
  • 目的：避免浮层组件因为z-index被覆盖的问题
  • 原因：
    • 总会遇到意想不到的高层级元素
    • 组件覆盖规则具有动态性
  • 做法：组件层级计数器
    • 通过JS获取body下子元素最大的z-index值
• 负值z-index与可访问性隐藏
  • 可访问性隐藏：肉眼看不见，但是辅助设备可以识别
  • z-index负值元素在层叠上下文背景之上，其他元素之下

relative

relative和absolute相煎关系（relative是大哥，absolute是小弟）

• 限制绝对定位作用
  • 限制绝对定位left/top/right/bottom
  • 在设置了具体z-index下，限制绝对定位z-index
  • 普通元素的overflow:hidden是管不住absolute的，需要relative限制在overflow下的嚣张气焰
• 与fixed呢（fixed老三，但能力太强），只能限制下z-index层级
• relative除了限制同源属性值其自身也有定位特性

relative和定位

• 两个特性
  • 相对自身
  • 无侵入：自定义拖拽
• 如果设置了top/bottom和left/right对立属性，如何表现呢
  • 绝对定位是拉伸
  • 相对定位是斗争（top>bottom left>right）

relative与z-index层级

• relative可以提高层级上下文，鬼畜级别
• 新建层叠上下文与层级控制（需要配合z-index为具体数值使用）

最小化影响原则

• 尽量降低relative属性对其他元素和布局的影响
  • 尽量避免使用relative
  • relative最小化，减少作用范围

absolute

绝对定位与float，鲜为人知的兄弟关系，绝对定位生效时，浮动是无效的

• 包裹性（仅仅包裹其他子元素）
• 破坏性（不占位置）

绝对定位与relative，区别于relative，越独立越强大

• float破坏性太强，使用clear限制它
• absolute破坏性太强，使用relative限制它
• 超越overflow

无依赖的绝对定位

• 不受relative限制，行为表现上是不使用top/right/bottom/left任何一个属性或使用auto作为值
• 定位的文档表现
  • 脱离文档流
  • 折翼的天使（不触发瞬间移动技能）
    • 去浮动
    • 位置跟随（原来什么位置就还是什么位置）
• 配合margin精准定位（很多少时候就不用设置父元素relative啦）
  • 支持负值定位
  • 超赞的兼容性
  • 不影响其他布局的绝对定位下的相对定位之王

强大的折翼天使

• 图片图标绝对定位覆盖
  • absolute配合自身margin，而不是父元素relative
  • 更健壮，更易维护
• 定位下拉框，无依赖的绝对定位，妈的，贼强
• 对齐居中或边缘
  • 常规实现居中效果
    • text-align控制
    • display:block;margin:auto
    • 绝对定位，left:50%;margin-left:自身宽度一半的父值
    • translateX
    • flex
  • text-align + 无依赖的绝对定位
    • 注意：绝对定位元素不受text-align影响
    • 因此我们在这里需要配合一个空格实现
• 其他
  • 星号时有时无
  • 图文对齐兼容差（这个真是深有感悟）
  • 文字溢出
• 无依赖的绝对定位为页面布局与重构提供了更加广阔的选型新思路

脱离文档流

• 回流与重绘：动画尽量作用在绝对定位元素上
• 垂直空间层级
  • 绝对定位大于普通元素
  • 多个绝对定位，后来居上
  • z-index存在误区：绝对定位元素都需要z-index控制层级，确定其显示的垂直位置，这是错误的，z-index无依赖
    • 如果只有一个绝对定位元素，自然不需要z-index，自动覆盖普通元素
    • 如果两个绝对定位，控制DOM流的前后顺序达到需要覆盖的效果，依然无z-index
    • 如果多个绝对定位交错，很少见，z-index:1控制
    • 如果非弹窗类定位元素z-index>2，必定z-index冗余，请优化

天使的翅膀：top/bottom/left/right

absolute与width/height

• 相互替代性
  • 使用width/height:100%，等同于技能全开
  • 绝对定位方向是对立的，结果不是瞬间位移，而是拉伸
• 拉伸更强大，主要对于具体特定数值的场景
• 相互支持性
  • 容器无需固定的width/height值，内部元素亦可拉伸
  • 元素拉伸，内部元素支持百分比width/height值（九宫格布局）
• 相互合作性，width/height和拉伸同时存在？
  • width/height会大于拉伸的值
  • 那么拉伸打酱油了？非也？此时可以利用margin:auto实现居中

绝对定位与网页整体布局，适合移动web的布局策略

• body降级，子元素升级
  • 子元素拉伸满屏（page元素）
  • 绝对定位受限与父级，因此html,body需要设置height为100%
• 各模块，头尾侧边栏各居其位
• 内容区域想象成body，记住设置overflow:auto，内容过多是可以滚动
• 这样布局后，头部尾部及侧边栏都是fixed效果，避免了移动端fixed定位的诸多问题
• 全屏覆盖与page平级，实现遮罩等

float

浮动的历史，设计初衷：文字环绕效果

包裹与破坏

• 收缩、坚挺、隔绝——> BFC(block formatting context)：块级格式化上下文
• 正是因为包裹性，自身依然会占据位置，具有包裹性的其他小伙伴
  • display:inline-block/table-cell
  • position:absolute/fiexed/sticky
  • overflow:hidden/scroll
• 破坏性：容器被破坏，父元素高度塌陷，其他具有破坏性小伙伴
  • display:none
  • position:absolute/fiexed/sticky
• 三无准则：无宽度、无图片、无浮动？？？为啥

为什么浮动要带来破坏呢，由于设计初衷

清除浮动

• 准确说法，清除浮动带来的影响
• 方法
  • 底部插入具有clear:both声明的元素
    • 可以理解成撑起父容器不塌陷，依然可以发生margin重叠
    • 形式1：html层面，不足：很多裸露的DIV
    • 形式2：css层面（伪元素）：不兼容IE6/7
  • 让父元素BFC
    • 封闭结果，保护里面的任何声明都不会对外部产生任何影响，例如浮动，自然也不会margin重叠
    • float:left/right
    • position:absolute/fiexed
    • overflow:hidden/scroll/auto
    • display:inline-block/table-cell
    • width/height/zoom:1/...
    • 不足：无法一方通行，zoom:1可以，但是现在浏览器不认可zoom
  • 权衡策略

    .clearfix:after{content:'',display:block;height:0;overflow:hidden;clear:both}
    // 更好的伪元素
    .clearfix:after{content:'',display:table;clear:both}
    // IE6/IE7
    .clearfix{*zoom:1}
    

  • clearfix请勿滥用：只应用在包含浮动元素的自己父元素上
    • 乱入的haslayout会让IE6/IE7做出一些出格的事情
    • 浮动也会触发hasloyout

浮动的滥用

• 浮动特性
  • 元素block块状化
  • 破坏性造成的紧密排列特性（去空格化）
    • 比如换行符造成空格
    • 为什么可以去空格化，文字环绕效果，理解一哈
    • 回车空格和&nbsp区别，回车空格没有任何表现效果，看不见也选不中
• 砖头布局：使用浮动实现两栏或三栏的效果
• 砖头布局存在的问题
  • 容错性差
  • 需要元素固定尺寸，很难重复复用
  • 在低版本的IE下会有很多匪夷所思的问题

浮动与流体布局

• 看家本领，文字环绕效果
• 文字环绕衍生：单侧固定（float + margin/padding）
• 高级技巧：智能自适应布局

float与兼容性：可怕的IE6/IE7

overflow

overflow基本属性

• visible（默认）
• hidden（高级应用）
• auto
• scroll
• inherit

overflow-x/overflow-y(CSS3)

• 如果两者值相同，则等同于overflow
• 如果两者值不同，且其中一个值被赋予visible，另外一个赋予hidden/scroll/auto，则visible会被重置为auto

作用的前提

• 非display:inline元素
• 对应方位的限制，width/height/max-width/max-height/absolute拉伸
• 对于单元格td，还需要为table设置table-layout:fixed才行

overflow与滚动条

• 出现条件
  • overflow:auto|scroll
  • 有些元素天生有overflow技能（textarea、html）
  • 内容超过容器限制
• 无论什么浏览器，默认滚动条均来自html元素，而不是body标签
• 页面滚动高度
  • chrome：document.body.scrollTop
  • 其他浏览器：document.documentElement.scrollTop
  • 目前两者不会同时存在，兼容写法：var st = document.documentElement.scrollTop || document.body.scrollTop
• overflow的padding-bottom高度缺失
  • chrome不缺失，其他所有浏览器缺失，导致不一样的scrollHeight值
• 滚动条的高度机制
  • 滚动条会占用容器的可用宽度或高度
  • 潜在隐患1：原本和谐的布局，滚动条出现后可能挂掉
  • 潜在隐患2：水平居中跳动，通过padding-left修复，.container{padding-left:calc(100vw - 100%)}
• 自定义滚动条
  • -webkit，实际应用

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

  • 借助插件：jQuery滚动条自定义插件
• iOS系统下，原生滚动回调效果，-webkit-overflow-scrolling:touch

overflow与BFC

• BFC：内部元素在怎么翻云覆雨，也不会影响到外部
• overflow:hidden/scroll/auto触发BFC
• 场景
  • 清除浮动影响
  • 避免margin穿透问题
  • 两栏自适应布局
• 具体表现
  • overflow:hidden：自适应，但溢出不可见限制了应用场景
  • float + float：包裹性+破坏性，无法自适应，用于块状浮动布局
  • position:absolute：脱离文档流，自娱自乐
  • display:inline-block：包裹性，无法自适应，IE6/IE7 block水平不相识
  • display:table-cell：包裹性，但天生无溢出特性，绝对宽度也能适应
• 广为流传的两栏自适应

  .cell {
    display:table-cell;width:2000px;// IE8+ BFC特性，一般不会有容器超过2000px
    *display:inline-block;*width:auto; // IE7- 伪BFC特性
  }
  

overflow与绝对定位

• 图片absolute导致容器隐藏失效，滚动失效
  • 失效原因：绝对定位元素不总是被父级元素overflow属性剪裁，尤其当overflow在绝对定位元素及其包含块之间的时候
  • 包含块：含position:relative/absolute/fixed声明的父级元素，没有则body元素
• 如何避免失效
  • overflow元素自身为包含块
  • overflow元素的子元素为包含快
  • 任何合法transform声明当做包含块（可能有兼容性问题）
• 失效妙用

依赖overflow的样式表现

• CSS3属性resize，拉伸元素尺寸
  • both、horizontal、vertical
  • 此声明要想起作用，元素的overflow属性值不能是visible
  • 拖拽区域大小：17 * 17
• text-overflow:ellipsis，文本溢出省略号表示，兼容性贼棒
  • 需要overflow:hidden属性，否则无效果
  • 此外还需要，white-space:nowrap

overflow与锚点技术

• 锚点与锚链（hash）
• 锚点定位的本质：改变容器的滚动高度
  1. 触发锚点定位
  2. 锚点元素通过scrollTop值改变向上偏移定位
  3. 锚元素上边缘与可滚动容器上边缘对其
• 锚点定位的要求
  • 容器可滚动
  • 锚点元素在容器内
• 锚点元素的触发的两个条件
  • url地址中锚链与锚点元素
  • 可focus的锚点元素处于focus态
• 锚点定位的作用
  • 快速定位
  • 锚点定位与overflow选项卡技术
    • 缺点：穿透性很强，会一直找到最外面的滚动条
    • 适合的应用场景：单页

line-height

line-height的定义

• 行高：两行文字基线之间的距离
  • 基线，baseline，大概就是英文字母x的下边缘，是为了给我们写字母排列整齐用的，可以对比英文本
  • 为什么是基线呢，基线乃*线定义之根本，不同语言字体基线不一样
  • 为什么需要两行？两行的定义已经决定了一行的表现
• baseline与line-height
• 为什么行高可以让单行文本垂直居中
  • 实际并不是完全垂直居中了，和字体大小有关，字体越大偏差越大，因为平时字体都比较小，所以不明显

line-height与行内框盒子模型

• 所有内联元素的样式表现都与行内框盒子模型有关
• 内容区域（content area）：一种围绕文字看不见的盒子，内容其余大小只与font-size大小有关
• 内联盒子（inline boxes）：不会让内容成块展示，而是排成一行，如果文字外部含inline水平的标签（span、a、em，strong等），则属于内联盒子，如果是光秃秃的文字，则属于匿名内联盒子
• 行框盒子（line boxes）：每行就是一个行框盒子，每个行框盒子又是由一个一个内联盒子组成
• 包含盒子（containing box）：由一行一行的行框盒子组成

line-height的高度机制

• 比如p元素的高度，是由于文字撑开的吗？非也，是由line-height决定的
• 问题：line-height明明是两基线的距离，单行文字拿来行高？还控制了高度？
  • 行高由于其继承性，影响无处不在，即使单行文本也不例外
  • 行高只是幕后黑手，高度的表现不是行高，而是内容区域和行间距
  • 正好：内容区域 + 行间距 = 行高
• 内容区域至于字号和字体有关，与line-height没有任何关系
• 在simsun字体（宋体）下，内容区域高度等于文字大小值
• 行间距 = 行高 - 内容区域高度
• 实际行间距时上下均分的，因此就有了行半间距
• 行高决定内联盒子高度，行间距墙头草，可大可小（甚至负值），保证高度正好等至于行高
• 如果行框盒子里面有多个不同的行高内联盒子？不能单纯理解为高度最高的那个元素决定，还需要考虑偏移什么的
• 多行文本的高度就是单行文本高度的累加
• 如果行框盒子里面混入了inline-block元素（图片、按钮等），此时高度如何表现呢

line-height各类属性值

• normal：默认属性值，跟着用户浏览器走，且与元素字体关联
  • 正是由于normal的不确定性，因此在实际开发中，经常会在body全局元素对行高进行reset
• number
  • 使用数值作为行高值，根据当前元素的font-size计算
• length
  • 使用具体长度值作为行高值（带单位的em,rem,px,pt）
• percent
  • 使用百分比作为行高值，相对于设置了该行高值的元素的font-size计算
• inherit：行高继承
• line-height:1.5/150%/1.5em有啥区别
  • 计算数值无区别
  • line-height:1.5 所有可继承元素根据font-size计算，一次全局设置推荐数值
  • line-height:150%/1.5em：当前元素根据font-size计算行高，继承给下面的元素
• body全局数值行高使用经验
  • 博客类 1.5
  • 日常网页开发 ，非重阅读的，匹配20px的使用经验

    body{ font-size:14px; line-height: 20px / 14px /*x向上四舍五入*/}
    // 缩写
    body{ font:14px/1.4286}
    

line-height与图片的表现

• 问题：容器行高会不会影响图片实际占据的高度
  • 容器行高不会影响图片实际占据的高度，看是容器变大了不是因为图片变大了，而是行高和vertical-align共同作用的结果
  • 这也就解释了图片底部会有空白的原因，同样受line-height和vertical-align共同作用的结果（隐匿文本节点）
  • 隐匿文本节点：block元素内部，就存在隐匿文本节点，通过下面方式感受一下，比如如下图片是靠右的，但图片左边缘在中间

    <p style="text-align:center">
      <img src="" style="position:absolute">
    </p>
    

  • 如何消除间隙呢，三种方法
    • 图片块状化 - 无基线对齐，也就消除的间隙
    • 图片底线对齐 vertical-align:bottom
    • 行高足够小 - 基线位置上移 line-height:0
  • 扩展：inline水平元素默认vertical-align：baseline
• 小图片与大问题
  • 基本上高度受行高控制
  • 剩下的就是vertical-align垂直对齐啦

line-height实际应用

• 大小不固定的垂直水平图片
  • vertical:middle，近似居中，但还是有差异，因为middle是基线往上 1/2 x的高度
• 多行文字垂直居中
  • 实现和图片是一样的，区别在于把多行文本所在的容器的display水平转换成和图片一样的，也就是inline-block元素，同时重置外部继承的text-align和line-height属性值
• 代替height，避免IE6/7的haslayout

  // height是多于的，纠正写法？
  { height:36px;line-height:36px;}
  

vertical-align

属性及其组成

• inherit
• 线类
  • baseline（默认属性值）
  • top
  • middle
  • bottom
• 文本类
  • text-top
  • text-bottom
• 上标下标类
  • sub
  • super
• 数值百分比类
  • 支持负值
  • 行为表现一致：在默认baseline对其的基础上，上下便宜对应数值的大小
  • vertical-align百分比是相对于line-height计算的

css支持负值的不多：margin，letter-spacing，word-spacing，vertical-align

vertical-align起作用的前提

• 应用于inline水品和table-cell元素
  • inline：img、span、strong、em、未知元素（自定义元素）
  • inline-block：input、button
  • table-cell：本质是table-cell自身起作用
    • 作用于自身，而不是内部子元素 p{display:table-cell;vertical-align:middle}
• 上述是指默认情况，也可以通过下面方法改变元素属性
  • display设置
  • css声明间接改变display值，比如float，absolute
• 为什么失效呢？
  • 考虑是不是因为太短，不够居中，可以考虑将line-height设置为容器高度值，我就踩到这个坑了

vertical-align与line-height

• 利用空白节点实现大小不固定的图片近似垂直居中
• inline-block的基线是正常流中最后一个line box的基线，除非，这个line box里面既没有line boxes或者本身overflow属性的计算值不是visible，这种情况下基线是margin底边缘。
• 通俗来讲：inline block元素，如果里面是空的，或者本身有overflow属性，此时inline block的基线由margin底边缘决定，否则收内部元素文字、图片等决定。
• 行高变成0，高度变成了字符的垂直中心
• 这部分有点难理解诶~~~

vertical-align线性属性详解

• bottom
  • inline/inline-block：元素底部与整行的底部对齐
  • table-cell：单元格padding边缘与表格行底部对齐
• top
  • inline/inline-block：元素底部与整行的顶部对齐
  • table-cell：单元格padding边缘与表格行顶部对齐
• middle
  • inline/inline-block：元素的垂直中心点和父元素基线1/2 x-height处对齐
  • table-cell：单元格填充盒子相对于外面的表格行居中对齐
  • 字符有下沉特性
  • td单元格高度不同会有padding填充

vertical-align文本类属性详解

• text-top
  • 盒子的顶部与父级的content area的顶部对齐
• text-bottpm
  • 盒子的顶部与父级的content area的低部对齐
• 由于是父级，vertical-align垂直对齐的位置与前后的元素都没有关系
• vertical-align对齐的位置与行高没有关系，只与字体大小font-size有关
• 实际作用，一般使用场景
  • 表情图片（或原始尺寸背景图片）与文字的对齐效果
  • 使用基线的问题在于图标偏上
  • 使用顶线/底线的问题在于受其他内敛元素的影响，造成巨大定位偏差
  • 使用中线也是不错的选择，但需要恰好的字体大小以及兼容性不高
  • 使用文本底部较合适，不受行高及其他内联元素影响

vertical上标下标类

• html原生上标<sup>和下标<sub>，会让上标下标文字大小变小，一般为75%左右
• super -> <sup>
  • 提高盒子的基线到父级合适的上标基线位置
• sub -> <sub>
  • 降低盒子的基线到父级合适的下标基线位置
• 作者10年都没用过，笑哭

相邻元素vertical-align前后不一的作用机制

• vertical:top/bottom：互相不影响
• vertical:text-top/text-bottom：没看太明白
• 混杂属性：近似垂直居中，如何完全垂直居中

  p {line-height:250px}
  img {vertical-align:middle}
  // 或者设置p font-size:0，但使用有局限性
  img + span {vertical-align:middle}
  

• 总体而言：关注当前元素和父级，前后并没有直接关系

vertical-align兼容性：E6/IE7不行，其余现代浏览器都很OK

vertical-align实际应用

• 小图标和文字对齐：使用vertical-align负值
• 不定尺寸图片和多行问题垂直居中
  1. 主体元素inline-block化
  2. 0宽度高度100%辅助元素
  3. vertical-align:middle

扩展

background-clip

• 作用规定背景的绘制区域
• 取值：border-box|padding-box|content-box;