第七章 基本视觉格式化
正常流（没有浮动和定位元素）、非替换元素（包含在文档中）、替换元素（用作其它内容的占位符，如img）、块级元素（会和其它元素形成换行，如div）、行内元素（span之类的元素）和根元素（位于文档树顶端的元素，在HTML文档中就是元素html）
水平格式化
<p style="width:200px;">wideness?</p> /*200px指的是内容区的宽度*/
水平格式化七大属性：margin-left、border-left、padding-left、width、padding-right、border-right和margin-right，其中有3个属性可以设置为auto：元素内容的宽度width及左右外边距
如果设置width、margin-left或margin-right的某个值为auto，而余下两个属性指定为特定值，那么设置为auto的属性会自动确定所需长度，从而使元素框等于父元素的width
如果这3个属性都设置为特定值（值不合理，且过分受限），此时会把margin-right强制取为auto
某个外边距和width设置为auto，设置为auto的外边距会减为0
3个值都设置为auto，两个外边距都自动为0，width完全填充其包含块
外边距可以设置为负数（按反方向偏移）
如果width、内边距和外边距设置为百分数值，会应用同样的基本规则
替换元素，非替换元素的所有规则同样适用于替换元素，有一个例外：如果width为auto，元素的宽度则为内容的固有宽度，可以为width设置一个特定值覆盖这个规则，变化成比例调整
垂直格式化
垂直格式化七大属性：margin-top、border-top、padding-top、height、padding-bottom、border-bottom和margin-bottom，其中有3个属性可以设置为auto：元素内容的高度height及上下外边距。上下内边距和边框必须是特定的值或者0，如果将margin-top或margin-bottom设置为auto，它会自动计算为0，两个都为auto的话，都为0（没有外边距）
百分数高度，计算的是包含块height的百分数
如果将块级正常流元素设置为height：auto，显示时其高度将正好是包含其内联内容的行高，下边框是文本最后一行的下面，上边框是文本第一行的上面
合并垂直外边距：垂直相邻外边距的合并，这种行为只应用于外边距
对于负外边距，两个垂直外边距都为负值，取绝对值大的那个，若一个正一个负，正的要减去负值的绝对值
行内元素
span{border:1px dashed black;}
基本术语和概念
匿名文本：未包含在行内元素中的字符串；em框：font-size的值确定了em框的高度；内容区：元素中各字符的em框串在一起构成的框；行间距：font-size与line-height的值差除2；行内框：对于非替换元素，行内框高度等于line-height，对于替换元素，行内框高度等于内容区高度；行框：包含行内框的最高点和最低点
改变元素显示
display，none、inline、block、inline-block（行内块元素，像一个图像放在文本中，底端位于文本基线上）
run-in属性使某些块级元素成为下一个元素的行内部分
第八章 内边距、边框和外边距
width、height、margin
border-style，none（无）、hidden（隐藏）、dotted（虚线）、dashed（较粗的虚线）、solid（实线）、double（双线）、outset（凸起按钮）
border-top-style、border-right-style、border-bottom-style、border-left-style
border-top-width、border-right-width、border-bottom-width、border-left-width，thin、medium(默认)、thick、<length>、inherit
border-top-color、border-right-color、border-bottom-color、border-left-color
简写border-top、border-right、border-bottom、border-left
h1{border-bottom:thick solid gray;}
padding-top、padding-right、padding-bottom、padding-left
第九章 颜色和背景
background-color
background-image：a.grid{background-image:url(small.gif);}
background-repeat，repeat（垂直和水平方向都平铺）、repeat-x、repeat-y、no-repeat、inherit
background-image：body{background-image:url(small.gif);background-repeat:repeat-x;}
background-position，<percentage>、<length>、left、center、right
p{background-position:top right;} /*也可用百分数左上角为0%,0%，第一个数表示左右，第二个表示上下*/
background-attachment，scroll、fixed（相对于可视区是固定的）、inherit
汇总background
body{background:white url(yinyang.gif);}
第十章 浮动和定位
float，left、right、none（初始值，阻止浮动）、inherit
浮动元素从文档的正常流中删除，其他内容会“环绕”该元素，浮动元素的包含块是其最近的块级祖先元素
将一个浮动元素的外边距设置为负值，这个浮动元素将超出最近块级父元素的限制
浮动元素、内容和重叠
行内框（strong）与浮动元素重叠时，其边框、背景和内容都在该浮动元素“之上”显示
块框（p元素也是块级元素）与浮动元素重叠时，其边框、背景都在该浮动元素“之下”显示，而内容在浮动元素“之上”显示
清除，元素设置为禁止浮动元素出现在它旁边，left、right、both、none（初始值）和inherit
h3{clear:left} /*防止h3左边出现浮动元素*/
定位
position属性，static（初始值，静止的）、relative（相对的，文档流中保存原来的位置）、absolute（绝对的，从文档流中完全删除）、fixed和inherit
偏移属性，top（到包含块顶端的距离）、right、bottom、left
限制宽度和高度
min-width、min-height、max-width、max-height为元素定义一个最小最大属性
内容溢出和剪裁
overfiow，visible（初始值，元素之外也可见）、hidden（隐藏）、scroll（滚动）、auto和inherit
元素可见性visibility，visible（初始值，可见）、hidden（隐藏，不可见）、collapse（折叠）和inherit
p.clear{visibility:hidden;}
绝对定位
元素绝对定位时，会从文档流中完全删除，然后相对于其包含块定位，其边界根据偏移属性（top、left等）放置，定位元素不会流入其他元素的内容
z-index，可以利用其来改变元素相互覆盖的顺序，z代表从前往后的轴，拥有较高z-index值的元素会覆盖拥有较低z-index值的元素
来源：https://www.cnblogs.com/sdgjytu/p/3807188.html