流

什么是流（flow）?

外边距计算？

两个内联元素并排放置时，浏览器如何计算外边距？
内联元素有外边距吗？
两个块元素上下放置时，浏览器如何计算外边距？
嵌套元素的外边距会折叠吗？

文本会被浏览器怎么处理？

流

HTML文档中的元素就像水一样，让HTML文档中元素的上方往下，从左上往右下流到浏览器页面。

流实际上就是浏览器在页面上摆放HTML元素所用的方法。浏览器从HTML文件最上面开始，从上到下逐个显示所遇到的每个元素。浏览器遇到块元素，就在块元素之后加一个换行，让块元素按照HTML文档中的顺序出现在页面上。浏览器遇到内联元素，就将其在一个水平方向上，从左上方流向右下方。内联元素如果超过内容区宽度，就放入下一行。

外边距计算

内联元素并排放置，外边距会相加。

块元素上下放置时，外边距会重合，浏览器去取外边距最大值为重合后的数值。

内联元素有外边距，只不过不明显。不过图像元素不一样，可以设置外边距，内边距和边框。

嵌套元素的外边距会折叠。

除非嵌套的元素中外边的元素有边框，这样两个元素的外边框就不会碰到一起，也就不会折叠。

文本

文本会被浏览器当做一个内联元素，和其他内联元素放在水平方向上。

来源：《Head First HTML 与 CSS》(中文第二版)P473-478

float

什么是float? 浮动怎么实现？ clear属性右松左紧是什么意思？如何实现？右紧左松是什么意思？如何实现？注意事项

可以浮动到中间吗？
浮动元素的外边距会折叠吗？
可以浮动内联元素吗？
浮动需要设置元素宽度吗？

什么是float

float就是浮动，可以将元素浮动到页面之外。

原理

浏览器识别元素时，正常元素按从上到下顺序识别，浮动元素不在流里面，被浏览器放在左边或右边，就像叶子飘在水面上一样。块元素占据浮动元素的空间位置。内联元素都会围绕在浮动元素周围。

浮动的实现

这是右松左紧的设计方式。

（1）将浮动元素（侧栏）往HTML文档上面放，一般放在header下面，主内容上面。（2）在CSS中设置浮动元素的浮动属性，必须设置元素的宽度width。
#sidebar {
padding: 15px;
margin: 0px 10px 10px 10px;
width:  280px;
float:    right;
}


> （3）如果浮动元素在右边，则主内容右边的外边距要等于浮动元素的宽度（左右两边的外边距+内容区宽度+左右两边的内边距）

main {

 margin:  0px 330px 10px 10px;

}


> （4）在页脚处的CSS中，加上`clear`属性。

footer {

 clear: right;

}


#### 语法形式举例

width: 200px; float: right;

浮动到右边

width: 200px; float: left;

浮动到左边

#### clear属性
clear属性有什么功能？

clear属性是为了不让两边的浮动元素遮盖该元素。

如果浮动元素在右边，为了不让浮动元素遮盖页脚（footer），可以在CSS中的`footer`中设置

clear: right;


如果浮动元素在左边，为了不让浮动元素遮盖页脚（footer），可以在CSS中的`footer`中设置
···
clear: left;
···

### 右松左紧
右松左紧，就是右边（主内容）在流中，左边（侧栏）浮动。

详细设置方法见上面。

### 右紧左松

右紧左松，就是右边（主内容）浮动，左边（侧栏）是处在流中。

设置方法
（1）在HTML文档中，将侧栏区放到主内容区下。
（2）设置侧栏的CSS，设置左边的外边距和右边的主内容区元素宽度相等。

sidebar {

    margin: 0px 10px 10px 470px;

}

（3）设置主内容区，就是设置主内容为

main {

padding: 15px; 
marigin: 0px 10px 10px 10px;
width: 420px;
 float: left;

}

（4）设置footer，清空浮动元素

footer {

clear: left;

}



### 注意事项
浮动不能浮动到中间

浮动元素的外边距不会折叠

可以浮动内联元素，常见是图像。

浮动元素必须有特定的宽度。

来源：《Head First HTML 与 CSS》(中文第二版)P478，479-480，495，496，497，498

如何编写HMTL顺序和CSS顺序

以书中的Strabuzz网站为例

编写HTML顺序

（1）用div划分逻辑区。在header、main、sidebar和footer区，每个<div>用id等于区分，比如header区，则为<div id="headr"> （2）逻辑区下再划分子逻辑区。

编写CSS顺序

从上到下编写（1）编写body样式（2）各逻辑区的id属性样式（3）编写元素样式（4）编写类的样式（5）编写链接的伪类样式

来源：《Head First HTML 与 CSS》(中文第二版)484-487

CSS布局工具箱

（1）什么是流体布局？有什么优缺点？

（2）什么是冻结布局（frozen layouts）？步骤？有什么优缺点？

（3）什么是凝胶布局（Jello layouts）?原理？步骤？有什么优缺点？

（4）什么是绝对布局？原理？有什么优缺点？

（5）什么是CSS表格布局？有什么优缺点？

流体布局（the liquid layout）

流体布局，因为无论浏览器页面缩放，都会填充整个页面。

适用

让侧边栏浮动到主内容的右边。在一个文本段落中浮动图像

优点

主内容根据浏览器窗口大小调整页面大小浮动内容宽度固定，不会调整页面大小。

缺点

浮动元素是位于主内容页面之上无法确定内容重要性。如果在手机端上看，会按HTML文档顺序显示页面，这样侧栏会先显示。无法创造两个高度相同的列，当浏览器页面缩放时，主内容或侧栏会和页脚产生缝隙。内联元素会围绕浮动元素

冻结布局（frozen layouts）

冻结布局是指，内容的宽度是固定的，不会随浏览器窗口扩展或收缩。锁定元素，让元素冻结在页面上，元素不能移动。

具体步骤

首先完成浮动布局设置，在完成以下步骤。

(1) 在HTML文档内新增<div>，id为“allcontent”，包围header，aside，main和footer区。 (2) 在CSS文档内
#allcontent{
width:                   800px;
padding-top:        5px;
padding-bottom:  5px;
background-color: #675c47;
}
width: 800px;将所有内容限制在800像素范围内设置内边距和背景颜色。

优点

无论浏览器如何调整大小，元素都不会移动。

缺点

浏览器比较宽时，右边或左边有很多的空白空间。

凝胶布局（the jello layout）

凝胶布局是指，内容的宽度固定，位于中央，外边距会随浏览器窗口扩展或收缩。

原理

固定大小的<div>包围页面中的所有内容 auto属性扩展外边距锁定页面中内容区的宽度，将其在浏览器中居中。

步骤

首先完成浮动布局设置，在完成以下步骤。

(1) 在HTML文档内新增<div>，id为“allcontent”，包围header，aside，main和footer区。 (2) 在CSS文档内
#allcontent{
width:                   800px;
padding-top:        5px;
padding-bottom:  5px;
background-color: #675c47;
margin-left:            auto;
margin-right:          auto;
}
相比冻结布局，凝胶布局新增了外边距，设置值为auto。将外边距设置为auto，浏览器会确定外边距是多少，并且左右外边距相等，内容位于中间。

优点

解决了内容顺序问题很多博客采用这种方式

缺点

内容不会扩展到整个浏览器窗口

浮动布局、冻结布局和凝胶布局总结

原理都是利用浮动元素来设置多栏布局。

步骤相同处（1）在HTML文档内移动浮动元素到页眉下，主内容之上，在CSS内设置浮动元素的float和width。（2）设置主内容的外边距，宽度等于浮动元素宽度。（3）设置页脚的clear属性，浮动元素在哪边，就设置哪边为clear值。

步骤不同处（1）冻结布局在HTML文档多一个div，将浮动元素和主内容包围，在CSS内，设置固定宽度width，内边距和背景色。（2）凝胶布局在HTML文档和冻结文档一样，在CSS内多了外边距margin，左右外边距设置为auto。

绝对布局（the absolute layout）

绝对布局利用绝对定位（absolute positioning）固定元素在页面上的位置，不随浏览器窗口的变化而变化。

原理

一个元素绝对定位时，浏览器就会将其从流中删除，然后将其放在指定的位置上（比如根据top和right，或者bottom和left指定位置）。比如，将侧栏设置为一个特定的宽度，定位在主内容右边由于侧栏在流之外，其他元素不知道该元素存在，内联元素也不会围绕绝对定位元素周围。

适用

一部分大小固定，另一部分可以扩展和收缩需要精确地指定某个元素的位置。

优点

保证内容顺序

缺点

无法控制边栏延伸到页脚。

CSS表格布局（the table display layout）

表格布局，就是将块元素放到表格的单元格内。

如果要把图片放到表格内，图片元素必须被<div>包围。

优点

完美对齐的两列，两列高度一样随浏览器窗口大小而扩展和收缩所有浏览器都支持CSS表格特性

来源：《Head First HTML 与 CSS》(中文第二版)P501-504，511，521-522，537

CSS表格布局

CSS表格布局如何实现？ border-spacing 的外边距和外边距会重合折叠吗？ CSS表格和HTML表格区别？如何增加多行表格和多列表格？ CSS表格对齐的方式？ CSS表格列的宽度如何设置？

CSS表格实现

原理

（1）创建一个表格<div>。（2）每一行放一个<div>，包含行内容。这里只有一行。（3）将块元素放到行内容<div>里，每个块元素是一行内的一个单元格。

步骤

（1）在HTML文档内，建立表格<div>，id="tableContainer"。（2）在HTML文档内，建立行<div>，id=tableRow，如何设置多行，可以为class="talbeRow" （3）在HTML文档内，将mai区和aside区放进行<div>里。（4）在CSS文档内，设置

#tableContainer {
    display: table;
    border-spacing: 10px;
}

border-spacing，为单元格增加边框间距。

#tableRow {
    display: table-row;
}

table-row设置表格的一行

#main {
  display:          table-cell;
  background:       #efe5d0 url(images/background.gif) top left;
  font-size:        105%;
  padding:          15px;
  vertical-align:   top;
}

#sidebar {
  display:          table-cell;
  background:       #efe5d0 url(images/background.gif) bottom right;
  font-size:        105%;
  padding:          15px;
  vertical-align:   top;

}

mai和sidebar去掉外边距，加上vertical-align，确保单元格内容相对于单元格上边对齐

#header {
  background-color: #675c47;
  margin:           10px 10px 0px 10px;
  height:           108px;
}

#footer {
  background-color: #675c47;
  color:            #efe5d0;
  text-align:       center;
  padding:          15px;
  margin:           0px 10px 10px 10px;
  font-size:        90%;
}

header的下边距和footer的上边距都设置为0，因为已经设置表格的边距border-spacing了，而且border-spacing不会和块元素的外边距重合。

border-space

border-space的外边距不会和外边距重合折叠的。

CSS表格和HTML表格

CSS表格只是类似表格的布局。

HTML表格面向的是表格数据，也就是应当有表格结构的数据。

多行表格和多列表格

多行表格，在table下再加一个table。

多列表格，在一个table里加块元素。

CSS表格对齐方式

表格对齐，即vertical-align，对齐方式（1）top 顶端赌气（2）middle 中间对齐，浏览器中默认对齐方式（3）bottom 底端对齐

CSS表格宽度

可以通过width设置表格宽度，最好设置成百分数，这样可以根据浏览器缩放而缩放。

width: 20%;

来源：《Head First HTML 与 CSS》(中文第二版)P516，517，520

定位

定位有哪四种方式？如何综合使用定位方式？可以指定位置的元素有哪些？指定元素位置的方法有哪些？

四种定位方式

静态定位（static）

不指定定位方式，则默认为静态定位，HTML文档内容正常流入页面。 static，静态定位，属于默认设置，将由浏览器决定将元素指定位置，即使使用float属性，也将由浏览器决定位置。

绝对定位（absolute）

绝对定位，将元素完全从页面流中取出，并指定一个绝对位置，一般是相对于离它最近的父元素指定的（一般是<html>）

absolute，绝对定位，将由你决定元素放在哪里。

绝对定位元素不随浏览器缩放而减少移动位置，就是说，浏览器页面滚动时，绝对定位元素有可能看不见。

绝对定位元素会相对于页面边界来放置。如果一个绝对定位元素嵌套在另一个定位元素中，就会相对于外包含元素定位。绝对定位元素可以使用z-index属性分层设置，将一个绝对定位元素放在另一个绝对定位元素上面。

固定定位（fixed）

固定定位，相对于浏览器窗口，把元素放在一个特定的固定位置上。 fixed，固定定位，将元素放到相对于浏览器窗口的一个位置上（而不是相对于页面）。举例，将一个优惠券放在页面上，而且无论页面如何滚动，都在页面上。需要指定距离浏览器窗口边界的一个偏移量，而不是距页面边界的举例。所谓浏览器窗口，是指页面的可见区域。

举例增加一个优惠券

#coupon {
      position: fixed;
      top:         300px;
      left:         0px;
}

#coupon a, img {
    border: none;
}

优惠券在左边，所以左边为0。设置优惠券的图像和链接的边框为none。

另外，可是left可以设置为负值

#coupon {
      position: fixed;
      top:         300px;
      left:        -90px;
}

相对定位（relative）

相对定位首先正常流入页面，然后按照指定的量偏移，从而留出它们原先所在的空间。

相对定位，相对于其外围包含元素来定位，元素仍在正常的页面流中，按照你指定的量来偏移元素。

relative，相对定位，将元素流入页面，在页面显示之前进行偏移。

可以用top，left，bottom，right偏移元素，指的是距正常流中该元素位置的偏移量。

相对定位可以不覆盖元素

综合使用定位方式

举例

将一个<div>放在另一个<div>中，对外围<div>使用相对定位，对内部<div>使用绝对定位，这样，就能相对于父<div>对其进行定位了。

可以指定位置的元素

可以对任何元素指定位置，包括块元素和内联元素。内联元素定位一般是<img>

指定元素位置的方法

指定元素位置方法属性 top，right，left，bottom用来指定元素的位置。

属性值可以用两种方法：（1）使用像素（2）使用百分数。百分比是相当于浏览器的宽度。使用百分数，元素的位置可能发生变化。

来源：《Head First HTML 与 CSS》(中文第二版)P531，536

绝对定位

绝对定位（absolute positioning）是什么? 绝对定位如何实现？ z-index属性是做什么的？

绝对定位

绝对定位，就是指定元素在页面的位置。例如距左边多少像素，距上边多少像素。

绝对定位实现

（1）HTML文档内，将aside区调整到header区下，main区之上。（2）设置sidebar的CSS。

#sidebar {
  background:       #efe5d0 url(images/background.gif) bottom right;
  font-size:        105%;
  padding:          15px;
  margin:           0px 10px 10px 10px;
  position:         absolute;
  top:              128px;
  right:            0px;
  width:            280px;
}

sidebar的top为128px，因为这是页眉的高度（页眉上外边距10px+内容区高度108px+下外边距高度10px）

#header {
  background-color: #675c47;
  margin:           10px;
  height:           108px;
}

（3）调整main区的<div>

#main {
  background:       #efe5d0 url(images/background.gif) top left;
  font-size:        105%;
  padding:          15px;
  margin:           0px 330px 10px 10px;
}

position

z-index

绝对定位可以分层，一块元素是一层，可以将不同元素放到多个层。

如何排列层的顺序，就使用z-index

# div1 {
     z-index: 0;
}

# div2 {
     z-index: 1;
}

因为div2的z-index值大于div1，所以div2在div1上面。

z-index相当于PowerPoint里的窗格，Photoshop里的图层，是指元素相对读者的位置，z-index数值越大，离读者越近。

z-index可以为负值。

来源：《Head First HTML 与 CSS》(中文第二版)P505，506，529， 537

zilongxuan001 / LearnFreecode

chapter11: 布局和定位 #341

流

流

外边距计算

文本

来源：《Head First HTML 与 CSS》(中文第二版)P473-478

float

什么是float

原理

浮动的实现

main {

footer {

sidebar {

main {

footer {

如何编写HMTL顺序和CSS顺序

编写HTML顺序

编写CSS顺序

CSS布局工具箱

流体布局（the liquid layout）

适用

优点

缺点

冻结布局（frozen layouts）

具体步骤

优点

缺点

凝胶布局（the jello layout）

原理

步骤

优点

缺点

绝对布局（the absolute layout）

原理

适用

优点

缺点

CSS表格布局（the table display layout）

优点

CSS表格布局

CSS表格实现

原理

步骤

border-space

CSS表格和HTML表格

多行表格和多列表格

CSS表格对齐方式

CSS表格宽度

定位

四种定位方式

静态定位（static）

绝对定位（absolute）

固定定位（fixed）

相对定位（relative）

综合使用定位方式

可以指定位置的元素

指定元素位置的方法

绝对定位

绝对定位

绝对定位实现

position

z-index