Head First HTML与CSS — 布局与定位

Posted 2020-08-01

1.流（flow）是浏览器在页面上摆放html元素所用的方法。

   对于块元素，浏览器从上到下沿着元素流逐个显示所遇到的各个元素，会在每个块元素之间加一个换行；

   对于内联元素，在水平方向会相互挨着，总体上会从左上方留向右下方。

2.流与盒模型

   盒模型：从CSS角度来看，每个元素都是一个盒子。由内容区（content area），内边距（padding），边框（border）和外边距（margin）组成。

   并排放置两个内联元素时：它们的外边距会叠加。

   上下放置两个块元素时：它们的外边距会折叠，共同的外边距为两个外边距中的较大的那个（包括嵌套的情况）。

3.浮动元素 float

  对于浮动元素有一个要求，必须有一个宽度。

  元素浮动后，会脱离文档流，其它块元素会填上它的位置，但是对于其他块元素中的内联元素，它们会围绕着这个浮动元素。

  清楚float：当元素流入页面时，在这个元素的两边不允许有浮动内容时，可以用 clear属性来清除浮动。

4.凝胶（jello）布局

   与用float流体布局（liquid layouts）相比，凝胶布局会锁定页面中内容区的宽度，不过会将它在浏览器中居中。

   通过设置属性 margin：0 auto；

5.使用CSS创建表格显示

   在CSS中通过属性 display ，设置其值为 table，table-row，table-cell。

   与HTML表格不同，CSS表格显示只是使用一种类似表格的布局来表现这个结构中的内容。