HTML和CSS学习笔记第11章——布局和排版

返回主目录

流

浏览器从HTML文件最上面开始，从上到下逐个显示遇到的元素。在元素之中会从左上方流向右下方。这就是流。

我们以盒模式的角度去看两个元素，当它们并排时，它们的距离等于边界之和，而当他们上下放置时，它们之间有所折叠，它们的距离等于双方边界的最大值。

浮动布局

如何浮动元素

1. 首先指定一个具备id的元素
2. 对该元素指定一个宽度。所有的浮动元素都必须具有宽度。
3. 设置float属性，可以left或right。

#amazing{
	width:200px;
	float:right;
}

需要注意的是，浮动元素是将该元素从流中抽出，剩下的元素继续按着流的规则进行排列。浮动元素将会浮动在接下来的块元素上面，换言之，浮动元素叠在了接下来的流的元素上面。但块元素中的内联元素会绕开该浮动元素，不会被叠在下面。

浮动后的排版

假如说，你现在有了一个在右侧浮动的侧边栏，那么可能会出现下面的情况：

如何使两栏看起来更加独立呢？
答案是利用浮动元素的叠加效应，将非浮动元素的右边界叠扩展，使其叠在浮动元素下面，这样边框就会自动地约束文本的范围。
在上例中，我们首先需要查找右边框的宽度。

#sidebar {
  background:       #efe5d0 url(images/background.gif) bottom right;
  font-size:        105%;
  padding:          15px;
  margin:           0px 10px 10px 10px;

  width:280px;
  float: right;
}

从上可知，右边框区域的总长度为280+（15+10）*2=330px

于是，可以设置左边的主体部分有边界为330px

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

如此效果便可得到下面的情况，中间的间隔出版业把这称为“中缝”：
注意：你可能会因为上面讲的流的并排显示边界问题对中缝的px值有所困扰，但注意，一旦一个元素具有浮动属性，它就不属于流了，所以其实没有冲突。

不允许浮动元素出现在旁边

使用css属性clear来提出请求：当元素流入页面时，在这个元素左边、右边或两边不允许有浮动内容。

clear: right;		/*不允许右边出现浮动内容*/

浮动边栏的缺点

当我用手机上查看该页面时可能会使边栏在主内容之上。或许我们可以将主内容浮动，但其实两种办法有好有坏。那有没有办法能同时得到两方面的好处呢？既让边栏有固定的宽度，而且主内容仍然是HTML第一个元素？

冻结布局

1. 首先增加一个<div>元素，id设为“allcontent”，然后将页面所有除了标题的内容包含进去。
2. 之后将allcontent中的所有元素和内容的大小，是他们有一个固定的宽度，

#allcontent{
	width: 800px;
	padding-top:5px;
	padding-bottom:5px;
	background-color:#675c47;
}

这样就能将所框住的元素固定地显示，无论浏览器怎么调整大小，都不会改变布局的大小。但当浏览器很宽的时候也会变得奇怪。

凝胶布局

介于流体和冻结之间的设计，凝胶布局。凝胶布局会锁定页面中内容区的宽度，不过会将它们在浏览器居中。

#allcontent{
  margin-left: auto;
  margin-right: auto;
}

（指定内容区宽度为auto时，浏览器全根据需要扩展内容区。外边距为auto时，浏览器会确定正确的外边距值，并确保左和右外边距相同，所以内容全居中。）

注意：这里展示的界面依旧是在浮动元素的基础上建立的（否则不会有左右两栏）

凝胶布局的缺点

内容不会扩展到填满整个窗口，尽管很多人不认为这是个缺点。

绝对定位

#id{
	position:absolute;
	top:				//也可以bottom:
	right:				//也可以left:
	width:
}

一个元素绝对定位时，浏览器首先将它从流中删除，然后浏览器将这个元素放在top和right指定的位置上（也可以用bottom和left）。与固定定位不同的是，这个偏移量相对的是页面。
与浮动不同的是，流中的元素完全不知道绝对定位元素，因此它们不会将内联内容绕开一个绝对定位元素周围。

如果对一个元素使用css绝对定位、相对定位、固定定位，则它具备z-index属性。如果有两个绝对定位元素重叠，那么会根据每个定位元素的z-index属性决定谁在上面（越大的在越上面）。而且z-index可以是负值。

position的默认值是static，如果这样元素会在正常的流中。除了static和absolute外，position还有fixed（固定定位）和relative（相对定位）。

绝对定位元素并不一定得指定width，但如果不指定，块元素会占据除了偏移量之外的整个浏览器宽度。所以建议指定width。

指定位置也可以用百分数。这样相对值就是浏览器的宽度。

绝对布局的缺点

使用绝对定位并不能去除绝对定位元素与页脚重叠的情况（因为页脚并不知道绝对定位元素的存在）

表格

对于css表格来说，每个单元格会包含一个HTML块元素。它能更好地显示两栏或三栏。

HTML结构

用HTML创建表格结构：先创建一个<div>，然后再之中创建多个<div>，相当于创建了多个行，在每行中再创建多个<div>，就创建了多个列。
例如：

<div id="tableContainer">
      <div id="tableRow">
			<div id="main">
				...
			</div>
			<div id="sidebar">
				...
			</div>
      </div>
</div>

css样式

需要让css采用表格显示

#tableContainer{
  display: table;
  border-spacing: 10px;
}
#tableRow{
  display: table-row;
}
#main{
	display: table-cell;
  padding:          15px;	//因为有border-spacing不再需要边界属性，但补白还要
  /*margin:           0px 10px 10px 10px;*/
  vertical-align: top;
}
#sidebar {
  display: table-cell;
  padding:          15px;
  /*margin:           0px 10px 10px 10px;*///不再需要边界
  vertical-align: top;
  /*width:20%*///可以使用width指定列的长度，推荐使用百分数。
}

HTML和css的表格一样吗？

不一样，它们虽然都能映射表格的行和列，但css只是用类似表格的布局来显示结构的东西，而HTML面向表格数据，也就是有表格结构的数据。

固定定位

像绝对定位一样指定希望的位置，但这个位置是距浏览器窗口边界的一个偏移量。因此，采用固定定位的元素，即使你滚动页面，它也原地不动。
偏移量允许负值。采取负值会让一部分内容不显示在浏览器中。

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

相对定位

采用相对定位的元素仍然处于流中。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
注意，在使用相对定位时，无论是否进行移动，元素本应占有的空间还会留着。因此，移动元素不会使其他元素的位置改变，但可能会导致移动元素覆盖其它元素。

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

网页布局都有哪种？一般都用什么布局？—— 阿里巴巴淘系技术的回答