1、流体布局
浏览器使用流在页面中放置元素。
块元素从上向下流,各元素之间有一个换行。默认的,每个块元素会占浏览器窗口的整个宽度。
内联元素在块元素内部从左上方流向右下方。如果需要多行,浏览器会换行,在垂直方向上扩展外围块元素,来包含内联元素。
内联元素的左右外边距不会折叠在一起,而块元素的上下相邻的外边距会折叠为最大外边距。
流体布局指扩展浏览器窗口时,页面红的内容会扩展以适应页面。
2、浮动元素
将元素添加float属性,指定其为浮动元素。浮动元素会从正常流中取出,浮动到左边或右边。
浮动元素放在块元素之上,不会影响正常的页面流。不过,内联内容会考虑浮动元素的边界,围绕着浮动元素。
浮动元素必须有特定的宽度,不能设置为auto。
clear属性用来指定一个块元素左边或者右边(或者两边)不能有浮动元素。设置了clear属性的块元素会下移,直到它旁边没有浮动元素。
可以浮动内联元素,常见的是浮动图像。可以把浮动元素想成是被块元素忽略的元素,而内联元素却知道它们在哪里。
3、冻结布局是指,元素的宽度固定,不会随浏览器窗口扩展或手速。
4、凝胶布局实质,元素的宽度固定,但外边距会随着浏览器窗口扩展或收缩。通常会把内容放在中央。需要将margin-left和margin-right属性设置为auto。
5、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是指距正常流中该元素位置的偏移量。
6、表格布局
创建表格布局时,需要使用对应表格的一个块元素(display: table),对应行的块元素(display: table-row)和对应单元格的块元素(display: table-cell)通常这些元素都是<div>元素。
border-spacing属性为表格中的单元格增加10像素的边框间距。可以把border-spacing看作是常规元素的外边距。
vertical-align属性控制单元格中的内容对于单元格的对齐方式(top、middle和bottom)。
width控制列的宽度。