页面建构-一周学习总结

替换元素：替换元素和标签自封闭元素是可以划等号的，常用的有input，img,link,br等标签。

元素的嵌套规则：块级元素可以嵌套所有的行内元素，除a以为的行内元素不能嵌套块级元素。

块级格式化上下文：阻止边距折叠，可以包含内部元素的浮动，阻止元素被浮动覆盖

关于line-height:(1)所有继承下来的元素会忽略本身的font-size,而使用相同的，计算出来的line-height。如果line-height的值是数字，所有继承下来的元素使用基于font-size算出来的line-height.(2)inline box 不会让内容显示成块形式而是排成一行，inline boxes在containing box里一个接一个组成了line box.Content area是围绕着文字的看不见的一种box，它的高取决于font-size。|(font-size)-(line-height)|=行间距，拆分行间距来创建一个”半行间距“，半行间距会被应用在content area的顶部和底部。（3）line box高度取决于它内部最高的line box或者是存在的图像

负margin值：（1）对于浮动的元素，如果margin设置的方向和float的方向相同，那么这时浮动元素发生移动。如果margin设置的方向和float的方向相反，那么这时是设计到参考线的问题，元素本身不移动。参考线是对下面一个元素而言的，下一个元素会将参考线对待为自己的边界。但是实际上前一个盒子的边界并未改变。只是后面一个盒子自作多情而已。

浮动：（a）浮动框的定位：当前浮动框的定位会受到先前生成的同向浮动框的影响，它们不能相互遮盖。当前浮动框需要紧挨着先前同向浮动框的外边界进行定位，如果当前行空间不足，则折行，放置到它之前浮动框的下面。（b）由于浮动框并不在常规流中，在该浮动框之前或之后创建的非定位框垂直排列，就好像浮动框并不存在一样。然而，浮动框之后创建的行框会被缩短，为浮动框提供空间。如果被缩短的行框无法再容纳更多的内容，它将向下移动，直到有足够的空间或没有更多的浮动元素为止。

当前行里浮动框的任何内容，都将会被重新排列到该浮动另一侧的第一个可用行里。

shrink-to-fit算法: 如果一个浮动元素或绝对定位元素的的 'width' 是 'auto'，并且它是一个非替换元素，那么它的宽度将会采用 shrink-to-fit 算法计算得出。 "shrink-to-fit" 的宽度计算方法与 'table-layout' 特性为 'auto'（即自动表格布局）时对于单元格的宽度计算方法类似。大致为：计算格式化内容时除了发生明确的换行外不发生换行的时首选宽度（preferred width），以及首选最小宽度（preferred minimum width），比如，尝试所有可能的换行。而 CSS2.1 没有定义精确的算法。

其次，在这种情况下，找出可用宽度（available width），这个宽度为包含块减去 'margin-left'、'border-left-width'、'padding-left'、 'padding-right'、'border-right-width'、'margin-right' 以及所有相关滚动条的宽度。然后得到公式："shrink-to-fit" 的宽度 = min ( max ( 首选最小宽度, 可用宽度 ) , 首选宽度 ).

水平居中：文本、图片等行内元素的水平居中：给父元素设置text-align:center；固定宽带的块级元素：margin：0 auto；不确定宽度的块级元素：以分页模块为例，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制宽度来限制它的弹性。

布局的种类：一列固定宽度，一列宽度自适应，二列固定宽度，二列宽度自适应，两列右列宽度自适应，二列固定宽度居中，三列浮动中间列宽度自适应。

　　一列固定宽度：用px指定宽度值。

　　一列宽度自适应：用百分数指定宽度值。

　　二列固定宽度：两列向相同方向浮动，用px指定宽度值。

　　二列宽度自适应：两列向相同方向浮动，用百分数指定宽度值。

　　两列右列宽度自适应：左列浮动，左栏宽度设定为固定值，右栏不设置任何宽度值，并且右栏不浮动即可。

　　二列固定宽度居中：使用一个居中的div作为容器，容器大小固定，将左右栏进行相同方向上的浮动。

　　三列浮动中间列宽度自适应：（1）左右两栏position为absolute，left和right分别设为0，中间栏使用margin-left和margin-right

                                               　　（2）三栏全部float，中间栏width：100%，左右两栏利用负的margin-left值进行定位。

关于基线：关于 baseline 概念可以简化理解为当行框内是文本的时候，其 'baseline' 位置应该在文字底边界，这同样运用于行内非替换元素上。各浏览器对于行内替换元素的基线位置理解不一，特别是对有文字和无文字的按键元素基线位置和 INPUT 元素的基线位置理解不一。