css布局-基础,单列,双列,三列

html-css08

css布局-基础,单列,双列,三列,第1张

现有样式

不能满足人们的需求.

人们需要:

CSS 2 并没有提供原生支持，所以需要将一些属性组合起来，以实现布局

国外一般不这么叫. <div> 是一个无语义的标签，适合用来做与内容无关的事情.

只能用 <div> 吗？

优化:

省标签，便于控制局部 范例

给通栏加背景色 范例

IE 6 不支持 inline-block :

范例

一列固定宽度，另外一列自适应宽度

浮动元素 + 普通元素margin 范例

如果侧边栏在右边:

注意: 考虑到浏览器的渲染顺序,

aside和main顺序不可更改.

两侧两列固定宽度，中间列自适应宽度

范例

增加一个float：left

然后把DIV的宽度设置下正好能容下两个

详细的可以去CSS黑板报看看，那里应该会有的

百度直接搜：CSS黑板报，第一个就是

clear:both作用是清除浮动，添加于浮动元素之后，使浮动元素撑开他们的包含元素(父级)，这样浮动元素的宽高改变时，他们的包含框的宽高也会随之改变。

常用与解决，浮动元素不占空间而导致他们的包含框无法覆盖他们的问题。