《Head first HTML与CSS 第二版》读书笔记 第十一章 布局和定位

一、流体布局

浏览器使用流在页面中放置元素。

块元素从上向下流，各元素之间有一个换行。默认的，每一个块元素会占浏览器窗口的整个宽度。

内联元素在块元素内部从左上方流向右下方。若是须要多行，浏览器会换行，在垂直方向上扩展外围块元素，来包含内联元素。

内联元素的左右外边距不会折叠在一块儿，而块元素的上下相邻的外边距会折叠为最大外边距。

流体布局指扩展浏览器窗口时，页面红的内容会扩展以适应页面。

二、浮动元素

将元素添加float属性，指定其为浮动元素。浮动元素会从正常流中取出，浮动到左边或右边。

浮动元素放在块元素之上，不会影响正常的页面流。不过，内联内容会考虑浮动元素的边界，围绕着浮动元素。

浮动元素必须有特定的宽度，不能设置为auto。

clear属性用来指定一个块元素左边或者右边（或者两边）不能有浮动元素。设置了clear属性的块元素会下移，直到它旁边没有浮动元素。

能够浮动内联元素，常见的是浮动图像。能够把浮动元素想成是被块元素忽略的元素，而内联元素却知道它们在哪里。

三、冻结布局是指，元素的宽度固定，不会随浏览器窗口扩展或手速。

四、凝胶布局实质，元素的宽度固定，但外边距会随着浏览器窗口扩展或收缩。一般会把内容放在中央。须要将margin-left和margin-right属性设置为auto。

五、position属性（定位方式）

但是设置4个值：static、absolute、fixed、relative。

（1）static是默认方式，将元素放在页面的正常流中；

（2）absolute 使用这种定位时，浏览器将该元素从流中彻底删除，而后将这个元素放置在top和right属性指定的位置上（也能够用bottom和left指定位置）；因为在流以外，其余元素不知道有这样一个元素，它们会将其彻底忽略。流中的元素不会将其内联元素围绕在一个绝对定位元素周围。

绝对元素能够分红放置，一个元素能够放在另外一个绝对定位元素上面。每一个定位元素都有一个名为z-index的属性，会指定在虚拟z轴上的位置（z-index越大，元素越靠近你）。

块元素和内联元素均可以进行绝对定位。

指定元素位置除使用像素外还可使用百分数。

若是一个绝对定位元素嵌套在另外一个定位元素中，这个元素会相对于外包含元素定位。

（3）fixed 固定定位元素老是相对于浏览器窗口定位，页面滚动时它不会移动。

（4）relative 相对定位元素首先正常流入页面，而后按指定的量偏移，从而留出它们原来所在的空间。

使用相对定位时，left、right、top和bottom是指距正常流中该元素位置的偏移量。

六、表格布局

建立表格布局时，须要使用对应表格的一个块元素（display: table），对应行的块元素（display: table-row）和对应单元格的块元素（display: table-cell）一般这些元素都是<div>元素。

border-spacing属性为表格中的单元格增长10像素的边框间距。能够把border-spacing看做是常规元素的外边距。

vertical-align属性控制单元格中的内容对于单元格的对齐方式（top、middle和bottom）。

width控制列的宽度。