CSS布局与样式详解-优快云博客

正常流：大多数元素都在正常流中，浮动或定位元素就不在正常流中了。

完整盒模型图，见P179 记住height width是不包含padding更别说说border了

水平格式化

水平格式化：width影响的是内容区的宽度，而不是整个可见的元素框。

<p style="width:200px;padding:10px;margin:20px;">可见元素框的宽度是220px，整个元素框的宽度为260px</p>

水平属性

margin-left、border-left、padding-left、width、padding-right、border-rigth、margin-right

元素框和其父元素的width相同

只有margin-left 、width 、margin-right这个可以设置为auto

width固定margin-left margin-right为auto就会水平居中，或者是两个外边距一样大，width为auto 内容居中（如果文本不够长，看不出居中）

不同于text-align(text-align只应用于块级元素的内联内容，所以将元素的text-align设置为center并不能将这个元素居中。)

负外边距

垂直格式化

height定义的是内容区的高度，而不是可视区高度

正常流中的一个块元素的margin-top或margin-bottom设置为auto，会自动计算为0。margin-top margin-botto都为auto就都为0，没有外边距了。

合并垂直外边距（重点呀）

垂直格式化的另一个重要方面是垂直相邻外边距的合并。这种合并行为只应用于外边距。如果元素有内边距和边框，它们绝不会合并。

栗子：

li{margin-top:10px;margin-bottom: 15px;}
<ul>
    <li>1111111111111</li>
    <li>2222222222222222</li>
    <li>3333333333333333333333</li>
    <li>44444444444444444444444</li>
    <li>555555555555555555555</li>
    <li>66666666666</li>
</ul>

每个列表项有10像素上边距和15像素下边距。显示的时候，是15px边距。相邻外边距会沿着数轴合并（较大的值合并）。

负外边距

如果垂直外边距都为负值，浏览器会取外边距绝对值最大值。如果一个正外边距和一个负外边距合并，会从正外边距减去这个负外边距的绝对值。

li{margin-bottom:20px;background: pink;}
ul{margin-bottom: -15px;}
h1{margin-top: -18px;}
<ul>
    <li>1111111111111</li>
    <li>2222222222222222</li>
    <li>3333333333333333333333</li>
</ul>

<h style="margin-top: -18px;background: #CCC;">哈哈 </h>

两个负外边距中较大的一个（-18px）增加到最大的正外边距上（20px），这就得到了20px-18px=2px。所以，列表项内容底端和h1内容顶端之间的距离为2px。

行内元素

em a非替换元素图像：替换元素。非替换元素和替换元素在内联内容方面的处理稍有不同。

1.非替换元素的内边距、边框和外边距不影响行内框的高度

2.替换元素的外边距和边框会影响行内框的高度。

行内格式化

line-height：影响行内元素如何显示。

字放左上角右上角左下角右下角可以用 vertical-align:top | bottom

....

改变元素显示

display:none|block|inline|line-block|...

行内块元素：和块元素行内替换元素一样，也有宽高属性。

非替换行内元素没有width和text-align

lnline-block 行内块元素的应用：

如果有5个超链接，希望它们在一个工具条中宽度相等。为了让它们分别占用父元素宽度的20%，但是仍保持行内元素，可以这样：

a{display: inline-block;width: 20%;background-color: #88dd11;}
<div style="width:400px;background-color: #099;">
    <a>tab1</a><a>tab2</a><a>tab3</a><a>tab4</a><a>tab5</a>
</div>

只能将<a>标签之间的空格去除，不然中间有间隙的，因为有空格呀----悲伤的故事

简单的方法去除间隙，就是标签之中不能有空格。。