在网上听到的CSS大牛的课，感觉很有用，于是就做了笔记，希望与大家一起分享，课程是张鑫旭在慕课网讲的CSS。
行高，两行文字基线之间的距离
基线是*线定义的根本
一两行的定义已经据欸的那个了一行的表现
"内容区域"(content area)是一种围绕文字看不见的盒子，内容区域的大小与font-size相关，可以理解为选中文字时的背景
“内联盒子”（inline-boxes），不会让内容成块儿吓死你hi，而是排成一行，如果外部喊inline水平的标签（span、a、em等），属于内敛盒子，只有文字属于匿名内联盒子；
“行框盒子”(line boxes),每一行就是一个“行框盒子”，每个“行框盒子”又是由一个一个“内联盒子”组成
“包含盒子”（containing boxes)，由一啊很难过一行的行框盒子组成；
内联元素的高度由行高决定
行高由于其继承性，影响无处不在，单行文本也不例外。
高度的表现不是行高，而是内容区域和行间距。
内容区域（content area)高度+行间距(vertical spacing)=行高(line-height)
内容区域高度只与字号以及字体有关,与line-height没有任何关系。
在宋体（simsun）字体下，内容区域高度等于文字大小值。
simsun字体下：font-size+行间距=line-height ###总结：行高决定内联盒子高度；行间距墙头草，可大可小(可以是负值)，保证高度正好等同于行高。
多行文本高度就是当行文本高度的累加。
支持的属性值normal number length percent inherit
normal默认属性值，跟着用户的浏览器走，且与元素字体关联，由于其不确定性，通常会进行reset
number 根据当前元素的font-size大小计算。number*font-size
length 具体长度值：1.5em 1.5rem 20px 20pt
percent 相对于设置了该属性元素的font-size大小计算
inherit 继承IE8+支持，行高天生就有继承性，例如文字。input框等元素的默认行该是normal，使用inherit可以让文本可控性更强
计算没有差别
应用元素有差别
1.5所有可继承元素根据font-size重新计算行高，继承给下面的元素
150% 1.5 em 当前元素根据font-size计算行高，继承给下面的元素。
阅读为主要的要1.5-1.6
一般网页开发，匹配20px-方便心算，例如20px/14px=1.42857，为了chrome浏览器不是19px，要向上四舍五入1.4286
行高不会影响图片实际占据的高度
隐匿文本节点:例如图片后面跟着看不见的文本节点
图片块儿状化-无基线对齐img{display:block}
图片底线对齐img{vertical-align:bottom}
行高足够小-基线位置上移.box{line-height:0;} ###小图片和大文字：基本上高度受行高控制(不要故意闹事儿，例如vertical:-100,不是IE6浏览器，跟着图片走)
实现大小不固定的图pain、多行文字垂直居中
图片水平垂直居中 IE8+
.box{line-height:300px;text-align:center;}
.box>img{vertical-align:middle;}
多行文本水平垂直居中IE8+
.box{line-height:250px;text-align:center;}
.box>.text{display:inline-block;line-height:normal;
text-align:left;vertical-align:middle;max-width:100%}
代替height，避免IE6/IE7下的haslayout
? IE6/7元素设置height会让元素由haslayout，设置行高就没有haslayout，元素一旦有了haslayout会冲破父容器，比如说inline-block/float：left的宽度限制,包裹性受到了破坏。
{height:30px;line-height:30px;}
高度是多余的
支持的属性值
线类 baseline，top，middle，bottom
文本类 text-top，text-bottom
上标下标类 sub，super
数值百分比类 20px ，2em，20%,...
共性都带数字，都支持负值（margin,letter-spacing,word-spacing,vertical-align支持) 行为表现一致,
在baseline基础上便宜对应数值的大小,vertical-align的百分比值是相对于行高计算的
IE6/7下vertical-align百分比不支持小数
vertical-align只能用于inline水平以及table-cell元素
inline水平：
inline：<img>,<span>,<strong>,<em>,自定义标签（文字是匿名inline元素)
inline-block:<input>(IE8+),<button>(IE8+)
table-cell元素：
table-cell：<td>
默认状态下支持的，图片，按钮，文字和单元格
display：更改元素的显示水平
直接display设置
css声明更改元素的显示水平
添加浮动变为block
绝对定位变为block，主要因为脱离文档流
图片明明vertical-align：middle,还是不垂直居中，行高设为容器高度值，达到近似居中，不是没有起作用，而是太短不够居中。
table-cell起作用的是其自身，vertical-align：middle设置在父标签
.test-list>span{display:inline-block;width:210px;vertical-align:middle}
.test-list>img{vertical-align:middle}
对于内联元素，vertical-align与line-height虽然看不见,单实际上到处都是
图片放在<p>内无法居中
消灭vertical-align->display:block margin:auto
改变对其方式->vertical-align:bottom/middle/top
改变line-height->line-height:0/font-size:0
基本衍生现象:近似垂直居中(IE7+,IE7图片结尾要折行或空格)vertical-align:middle;line-height:36px
inline-block的基线是正常流中最后一个line box的基线,除非这个line box里面没有line-boxes或者本身‘overflow属性的计算值而不是visible‘,这种情况下基线是margin底边缘(就是空的或者是有overflow属性,基线是底边缘)
vertical-align:bottom
inline/inline-block元素:元素底部和整行的底部对齐.
table-cell元素:单元格底padding边缘和表格行的底部对其.
总的来说就是子元素和父级下边缘对其
vertical-align:top
vertical-align:middle
inline/inline-block元素:元素的垂直中心点和父元素基线上1/2x-height处对其
table-cell元素:单元个填充盒子相对于外面的表格行居中对齐
vertical-align:text-top:盒子的顶部和父级的content area顶部对齐
vertical-align:text-bottom:盒子的底部和父级的content area的底部对齐.
兼容性好,表情图片(或原始尺寸背景图标)与文字的对齐效果.
sub和sup,是文字的75%大小
之所以上下标原因是<sup>->vertical-align:super,<sub>->vertical-align:sub
vertical-align:super:提高盒子的基线到父级合适的上标基线位置.
vertical-align:sub:降低盒子的基线到父级合适的下基线位置
都是相对于父级,所以彼此之间没有影响
混杂属性:近似垂直居中
<p><img src=""></p>
p{line:height:250px;}
img{vertical-align:middle}
img+span{vertical-align:middle;}
vertical-align所有的表现都是与父级相关,和前后没有关系,只关注当前元素和父级,前后并没有直接影响
IE6/7
IE8+/Chrome/Firefox
小图标和文字的对齐:vertical-align垂直负值
不定尺寸图片或多行文字的垂直居中
主体元素inline-block化;
0宽度100%高度辅助元素;
vertical-align:middle;
同源性
限制作用:限制left/top/right/bottom定位;限制z-index层级;限制在overflow下的嚣张气焰;
overflow:hidden可以让超出容器的部分隐藏,当时absolute元素除外,在父级容器加relative可解决,auto或scroll,relative可以使其滚动
fixed(老三)与relative(老大)同源,relative对于fixed只能限制其层级
relative自身也具有定位特性
相对自身
无侵入:不会影响其他元素布局
?浏览器自己的推拽API不能定义手型和UI表现,relative可以实现简单的拖拽效果;
relative定位实用性非常好,可以用来简单的调整,用的多会出现问题,不推荐
设置相对立属性是斗争:top>bottom;left>right
提高层叠上下文
新建层叠上下文与层级控制:z-index为具体数值时新建层叠上下文,为auto时,不会产生层叠上下文,无各种限制,z-index:auto约等于z-index:0 (不包括IE6/7)
指的是尽量降低relative属性对其他元素或布局的潜在影响
尽量避免使用relative:absolute定位不依赖于relative;使用margin调节
relative最小化;独立粗一个div包含子元素
z-index属性指定了元素及其子元素的z顺序,z顺序可以决定发生覆盖的时候,哪个元素在上面.通常较大z-index值的元素会覆盖较低的那一个
属性值auto(默认值),integer(整数值),inherit
基本特性:支持负值;支持css3 animation动画;如果不考虑css3,只有定位元素(relative/absolute/fixed/sticky)的z-index才有作用,css3中有例外;
z-index只对定位元素有作用position:static(默认)，无z-index效果
如果定位元素z-index没有发生嵌套（子元素都是static)：
后来居上的准则；
z-index值哪个大，哪个上
如果定位元素z-index发生嵌套（里面有定位元素，外面也有定位元素)：
祖先优先原则(前提z-index不是auto)
z-index：auto当前层叠上下文的生成盒子层叠水平时0.盒子（除非是根元素)不会创建一个新的层叠上下文
层叠上下文（stacking context)是html中的一个三维概念，表示z周上有了可以高人一等。
页面元素天生具有层叠上下文，称之为"根层叠上下文"
z-index值为数值的定位元素也具有层叠上下文
其他属性 2.层叠水平（stacking level):层叠上下文的每个元素都有一个层叠水平，决定了同一个层叠上下文中元素在z轴上的显示顺序。遵循"后来居上"和"谁大谁上"的层叠准则.
层叠水平和z-index不是一个东西.普通元素也有层叠水平。
层叠上下文的几个特性:
层叠上下文可以嵌套,组成一个分层次的层叠上下文.
每个层叠上下文和兄弟元素独立:当进行层叠变换或渲染的时候,只需要考虑后代元素.
每个层叠上下文是自称体系的:当父元素内容被层叠后,整个元素被认为是在父层的层叠顺序中.
层叠顺序(static order):元素发生层叠时候有着特定的垂直显示顺序
七阶层叠水平
层叠上下文background/border -> 负z-index ->block块儿状水平盒子 ->float浮动盒子 ->inline/inline-block水平盒子 -> z-index:auto或看成z-index:0 不依赖z-index的层叠上下文 -> 正z-index
意义是规范元素层叠时候的呈现规则
为什么是这个层叠顺序:更符合页面加载的功能和视觉呈现
一般background/border用于装饰,block,float,用于布局,inline/inline-block绝大部分是能容,是页面最重要的实体,因此层叠水平要高.
定位元素默认的z-index:auto可以看成是z-index:0;
为何定位元素会覆盖普通元素,定位的元素z-index默认值为auto可以看为z-index为0;由层叠顺序可以发现,z-index:0层级大于inline/inline-block,图片是inline元素.
z-index不为auto的定位元素会创建层叠上下文;(不包括IE7)
z-index负值的层叠顺序在层叠上下文元素背景之上
一旦容器z-index值为数值,图片的层叠上下文元素就变成了容器!
z-index层叠顺序的比较止步于父级层叠上下文
z-index值部位auto的flex项(父元素display:flex|inline-flex).
元素的opacity值不是1;
元素的transform值不是none;
元素mix-blend-mode值不是normal.
元素的filter值不是none.
元素的isolation值是isolate(元素是孤立的不被混合模式混合).
position:fixed声明(仅用于Chrome等blink/webkit内核浏览器)
will-change指定的属性值为上面的任意一个(指定浏览器与准备GPU渲染)
元素的-webkit-overflow-scrolling设为touch.
不支持z-index的层叠上下文元素的层叠顺序军是z-index:auto级别
依赖z-index的层叠上下文元素的层叠顺序取决于z-index值
position值为relative/absolute或fixed
display:flex|inline-flex
层叠上下文导致的有趣现象,图片上覆盖文字
最小影响化原则
目的:避免z-index嵌套层叠关系混乱:
原因:
元素怒的层叠水平主要由所在的层叠上下文决定;
IE7 z-index:auto也会创建层叠上下文.
做法:
避免使用定位属性
定位属性从大容器平级分离为私有小容器
不犯二准则
目的:避免z-index混乱,一山比一山高样式的问题:
原因: 多人协作以及后期维护
做法: 对于非浮层元素,避免设置z-index值,z-index值没有任何道理需要超过2;
组件层级计数器
目的:避免浮层组件因z-index被覆盖的问题:
原因:
总会遇到意想不到的高层级元素;
组件的覆盖规则具有动态性;
做法: 组件层级计数器方法:通过js获取body下子元素的最大z-index值,最大值加一,确保;
可访问性隐藏
可访问性隐藏:人看不见,但是辅助设备可以识别
z-index负值元素在层叠上下文的背景之上,其他元素之下.
应用:label按钮,z-index:-1,高版本浏览器直接display:none;
css margin可以改变容器的尺寸
margin与可视尺寸
适用于没有设定width/height的普通block水平元素(float元素 absolute/fixed元素 inline水平,table-cell元素,均不可以)
只适用于水平方向尺寸
应用:一侧定宽的自适应布局
margin与占据尺寸
应用:滚动容器上下留白(padding非chrome浏览器下部不可以,用margin)
margin水平方向百分比/垂直方向百分比
计算规则:
普通元素的百分比margin都是相对于容器的宽度计算的!
绝对定位的百分比margin是相对于第一个定位祖先元素(relative/absolute/fixed)的宽度计算的!
应用实例
宽高2:1自适应矩形
.box{background-color:olive;overflow:hidden}
.box>div{margin:50;}
普通元素百分比/绝对定位元素百分比
margin重叠的通常特性
block水平元素(不包括float和absolute)
不考虑writing-mode,只发生在垂直方向(margin-top/margin-bottom)
margin重叠的3种情况
相邻兄弟元素
父级和第一个/最后一个子元素:son设置margin-top:80等同于father设置等同意father和son同时设置
重叠其他条件
父元素非块儿状格式化上下文元素
父元素没有border-top/bottom设置
父元素没有padding-top/bottom值
父元素和第一个子元素之间没有inline元素分割 5.对于margin-bottom重叠,额外条件:复原怒视没有height,min-height,max-height限制.
解决方法
father添加overflow:hidden.
设置border
设置padding-top:1px;
son前面/后面加入
对于margin-bottom,父元素设置高度值
空的block元素
重叠其他条件
元素没有border设置
元素没有padding值
里面没有inline元素 4.没有height,或者min-height
计算规则
正正取大值
正负值相加
负负最负值
margin重叠的意义
为了让传统的网页阅读更舒服 5.善用margin重叠
.list{margin-top:15px;margin-bottom:15px;}
作用机制
是为如何分配剩余空间设计的
一侧是定制,另一侧为auto,auto为剩余大小.
两侧都是auto,是平分剩余空间
图片居中要display:block
没有设置margin要会自动填充,才可以居中,例如垂直不设置高度不会自动填充,所以不会自动居中
垂直居中的实现
设置writing-mode:vertical-lr,更改流为垂直方向
绝对行为元素的margin:auto居中,IE8+支持,非常实用
margin负值下的两段对齐
margin负值下的等高布局,缺点:要通过父元素overflow:hidden来限制,由于重定位focus会出问题.
margin负值下的两栏自适应布局:DOM顺序相符
inline水平元素的垂直margin无效,2个前提:非替换元素(例如不是<img>),正常的书写模式;
margin重叠
display:table-cell与margin
margin可以用于除了display为table相关类型(不包括table-caption,table以及inline-table)的所有.甚至也可以应用于::first-letter display:table-cell/display:table-row等声明的margin无效!
例外的替换元素们:img,button(chrome下永远是inline-block)
FireFox:table-cell类型inline-block的渲染行为;
IE:table-cell类型也是table-cell的渲染行为
position:absolute与margin
绝对定位元素非定位方向的margin值"无效",看似无效,实则微妙,容器相对定位,不影响定位,但是影响占据的空间
绝对定位的margin值一直有效,只是不像普通元素那样,可以和兄弟元素插科打诨!
鞭长莫及导致的margin无效
margin是相对于整个容器的,不是浮动的图片
内联特性导致的margin无效
margin小到一定值无效,因为图片是内敛的,受制于默认的vertical-align的限制
正常的流向,margin-start等同于margin-left,两者重叠不累加;
如果水平流是从右向左,margin-start等同于margin-right;
在垂直流下(writing-model:vertical-*;),margin-start等同于margin-top;
margin-before等同于margin-start
margin-after等同于margin-end
margin-collapse:决定发生margin重叠时的表现collapse(默认-重叠)discard(取消) separate(分隔)
padding中规中矩,性格温婉平和!
对于block水平元素
padding值暴走,一定会影响尺寸
width非auto,padding影响尺寸; 3.width为auto或box-sizing为border-box,同时padding值没有暴走,不影响尺寸.
对于inline水平元素
水平padding影响尺寸,垂直padding不影响尺寸,但是会影响背景色(占据空间)
特性的利用,高度可控的分割线
直接使用字符
inline-block控制
使用inline padding
padding不支持负值
padding百分比均是先对于宽度计算的
轻松实现一个正方形 div{padding:50%}
inline元素的百分比值
同样相对于宽度计算
默认的高度宽度细节有差异
padding会断行
inline元素的垂直padding会让"strut"出现,本质是inline文本的content area区域
ol/ul列表内置padding-left,单位是px,例如chrome浏览器是40px,字号如果很小,间距就会很开,字号大,序号会爬到容器外面.一般22-25就可以
所有input/textarea输入框内置padding
所有button按钮内置padding
部分select下拉内置padding,如FireFox IE8+可以设置padding
所有浏览器radio/checkbox单复选框无内置padding
button按钮元素的padding最难控制!
FireFox -moz-focus-inner{padding:0}使padding消失
IE7,文字越多padding越大,overflow:visible
padding与高度计算不兼容IE7, FireFox不兼容
button按钮label模拟,button可访问性隐藏,不是display:none,visible:hidden;比如绝对定位到屏幕外,z-index:-1;
使用百分比单位构建固定比例布局结构
配合margin登高布局
两栏自适应布局
border-width不支持百分比
语义和使用场景决定不支持百分比(类似的还有outline,box-shadow,text-shadow)
border-width支持关键字:thin,medium(默认值),thick(IE7除外,1px 3px 5px)
因为border-style:double至少要3px才有效果
solid:实线
dashed:虚线 Chrome/FireFox 实色宽高3:1,透明1:1,IE都是2:1
dotted:点线,
原文：http://www.cnblogs.com/web-Kongdp/p/7896289.html