常见布局种类 一列布局 两列布局 三列布局 css中的定位机制 网页简单布局之结构与表现的原则 css元素隐藏 css中清除浮动最优方法 divcss规范命名集合 divcss命名参考表 导入样式及脚本 传统方式 新规范
常见布局种类 一列布局 自上而下的,一般头部进行固定宽度,高度设置为自动 两列布局 自适应的两列布局：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-7不支持:after，使用 zoom:1 触发 haslayout。
缺点：兼容性不是很好。
在浮动的元素后面添加空标签
清除浮动
优点：简单明了
缺点：无意义的空标签，不利于语义化
div+css规范命名集合 命名规范说明
1）、所有的命名最好都小写
2）、属性的值一定要用双引号(“”)括起来，且一定要有值如class=”divcss5”,id=”divcss5”
3）、每个标签都要有开始和结束，且要有正确的层次，排版有规律工整
4）、空元素要有结束的tag或于开始的tag后加上”/”
5）、表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgcolor、border等
6）、定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。
7）、给每一个表格和表单加上一个唯一的、结构标记id
8）、给图片加上alt标签
9）、尽量使用英文命名原则
10）、尽量不缩写，除非一看就明白的单词
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 页面主体
tag 标签
msg#message 提示信息
tips 小技巧
vote 投票
friendlink 友情连接
title 标题
summary 摘要
loginbar 登录条
searchinput 搜索输入框
hot 热门热点
search 搜索
search_output 搜索输出和搜索结果相似
searchbar 搜索条
search_results 搜索结果
copyright 版权信息
branding 商标
logo 网站logo标志
siteinfo 网站信息
siteinfolegal 法律声明
siteinfocredits 信誉
joinus 加入我们
partner 合作伙伴
service 服务
regsiter 注册
arr/arrow 箭头
guild 指南
sitemap 网站地图
list 列表
homepage 首页
subpage 二级页面子页面
tool,#toolbar 工具条
drop 下拉
dorpmenu 下拉菜单
status 状态
scroll 滚动
.tab 标签页
.left.right.center 居左、中、右
.news 新闻
.download 下载
.banner 广告条(顶部广告条)
导入样式及脚本 传统方式 引用线上cdn