CSS布局基础汇总_html/css_WEB-ITnose

常见布局种类 一列布局 两列布局 三列布局 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
这是引用JS文件 这是引用CSS文件 引用本地文件
这是引用JS文件 这是引用CSS文件

新规范

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

    /* ... */      

查看更多关于CSS布局基础汇总_html/css_WEB-ITnose的详细内容...