常见布局种类

一列布局

• 自上而下的,一般头部进行固定宽度,高度设置为自动

两列布局

• 自适应的两列布局：width用百分比+float；
• 固定宽度的两列布局：width：具体值/父级元素的宽度确定，width+百分比；+float;
  如果没有加float的话，不能实现并排的两列布局。

三列布局

• 传统的三列布局依托于float实现
• 特殊的三列布局：左右固定，中间自适应情况，左右使用绝对定位来实现，中间用margin实现.
  三列布局：左侧和右侧固定，中间自适应：

CSS中的定位机制

1. 标准文档流
2. 浮动
3. 绝对定位

网页简单布局之结构与表现的原则

• 最大化的简化html的结构，然后用css进行设置，减少html与css的契合度
• 不应该为了样式而添加无意义的标签
• 结构与表现分离，结构简洁，构建结构不考虑布局样式

CSS元素隐藏

{ display: none; /* 不占据空间，无法点击 */ }
{ visibility: hidden; /* 占据空间，无法点击 */ }
{ position: absolute; clip:rect(1px 1px 1px 1px); /* 不占据空间，无法点击 */ }
{ position: absolute; top: -999em; /* 不占据空间，无法点击 */ }
{ position: relative; top: -999em; /* 占据空间，无法点击 */ }
{ position: absolute; visibility: hidden; /* 不占据空间，无法点击 */ }
{ height: 0; overflow: hidden; /* 不占据空间，无法点击 */ }
{ opacity: 0; filter:Alpha(opacity=0); /* 占据空间，可以点击 */ }
{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间，可以点击 */ }

CSS中清除浮动最优方法

在父级添加 overflow：hidden
优点：不存在结构和语义化问题，代码量极少
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素

父元素也设置浮动（加个float：left/right）
优点：不存在结构和语义化问题，代码量极少
缺点：使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到body，不推荐使用

父元素设置 display:table
优点：结构语义化完全正确，代码量极少
缺点：盒模型属性已经改变，由此造成的一系列问题，得不偿失，不推荐使用

使用 :after 伪元素
优点：需要注意的是 :after 是伪元素，不是伪类（某些CSS手册里面称之为“伪对象”），很多清除浮动大全之类的文章都称之为伪类，不过csser要严谨一点，这是一种态度。
由于IE6-7不支持:after，使用 zoom:1 触发 hasLayout。
缺点：兼容性不是很好。

在浮动的元素后面添加空标签

清除浮动
优点：简单明了
缺点：无意义的空标签，不利于语义化

DIV+CSS规范命名集合

DIV+CSS命名参考表

导入样式及脚本

传统方式

• 引用线上CDN
  
  • <script type="text/javascript" href="xxx/xxx.js"> 这是引用JS文件
  • <script type="text/css" href="xxx/xxx.css">这是引用CSS文件
• 引用本地文件
  
  • <script type="text/javascript" src="xxx/xxx.js"> 这是引用JS文件
  • <script type="text/css" src="xxx/xxx.css">这是引用CSS文件

新规范

根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性，因为 text/css 和 text/javascript 分别是它们的默认值。

<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css">

<!-- In-document CSS -->
<style>
  /* ... */
</style>

<!-- JavaScript -->
<script src="code-guide.js"></script>