常见布局种类
一列布局
自上而下的,一般头部进行固定宽度,高度设置为自动
两列布局
自适应的两列布局：width 用百分比+float；
固定宽度的两列布局：width：具体值/父级元素的宽度肯定，width+百分比；+float;如果没有加 float 的话，不能实现并排的两列布局。
三列布局
传统的三列布局依托于 float 实现
特殊的三列布局：左右固定，中间自适应情况，左右使用绝对定位来实现，中间用 margin 实现三列布局：左边和右边固定，中间自适应：
CSS中的定位机制
标准文档流
浮动
绝对定位
网页简单布局之结构与表现的原则
最大化的简化 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⑺不支持:after，使用 zoom: 触发 hasLayout。
缺点：兼容性不是很好。
在浮动的元素后面添加空标签
清除浮动
优点：简单明了
缺点：无意义的空标签，不利于语义化
DIV+CSS规范命名集合
命名规范说明：
所有的命名最好都小写
每一个标签都要有开始和结束，且要有正确的层次，排版有规律工整
空元素要有结束的 tag 或于开始的 tag 后加上”/”
表现与结构完全分离，代码中不触及任何的表现元素，如 style、font、bgColor、borde r等
定义，应遵守从大到小的原则，体现文档的结构，并有益于搜索引擎的查询。
给每个表格和表单加上一个唯一的、结构标记 id
给图片加上alt标签
尽可能使用英文命名原则
尽可能不缩写，除非一看就明白的单词
DIV+CSS命名参考表
CSS 样式命名
说明
CSS 文件命名
说明
wrapper
页面外围控制整体布局宽度
master.css,style.css
主要的
container或#content
容器,用于最外层
module.css
模块
layout
布局
base.css
基本公用
head,#header
页头部份
layout.css
布局,版面
foot,#footer
页脚部份
themes.css
主题
nav
主导航
columns.css
专栏
subnav
二级导航
font.css
文字、字体
menu
菜单
forms.css
表单
submenu
子菜单
mend.css
补钉
sideBar
侧栏
print.css
打印
sidebar_a,#sidebar_b
左侧栏或右侧栏
main
页面主体
msg#message
提示信息
tips
小技能
vote
投票
friendlink
友谊连接
title
标题
summary
摘要
loginbar
登录条
searchInput
搜索输入框
hot
热门热门
search
搜索
search_output
搜索输出和搜索结果类似
searchBar
搜索条
search_results
搜索结果
copyright
版权信息
branding
商标
logo
网站 LOGO 标志
siteinfo
网站信息
siteinfoLegal
法律声明
siteinfoCredits
信誉
.tab
标签页
joinus
加入我们
partner
合作火伴
service
服务
regsiter
注册
arr/arrow
箭头
guild
指南
sitemap
网站地图
list
列表
homepage
首页
subpage
2级页面子页面
tool,#toolbar
工具条
drop
下拉
dorpmenu
下拉菜单
tag
标签
status
状态
scroll
转动
.left.right.center
居左、中、右
.news
新闻
.download
下载
.banner
广告条(顶部广告条)
导入样式及脚本传统方式
援用线上CDN