免费AI编程助手
常见布局种类
一列布局
- 自上而下的,一般头部进行固定宽度,高度设置为自动
两列布局
- 自适应的两列布局：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
<script type="text/javascript" href="xxx/xxx.js"> 这是援用 JS 文件
<script type="text/css" href="xxx/xxx.css">这是援用 CSS 文件
援用本地文件
<script type="text/javascript" src="http://www.wfuyu.com/uploadfile/cj/20150502/xxx/xxx.js"> 这是援用JS文件
<script type="text/css" src="http://www.wfuyu.com/uploadfile/cj/20150502/xxx/xxx.css">这是援用CSS文件
新规范
根据 HTMl5 规范，在 引入 CSS 和 JavaScript 文件时一般不需要指定
