程序员人生 网站导航

CSS布局基础汇总

栏目:htmlcss时间:2015-06-06 08:41:18

  • 常见布局种类
    • 1列布局
    • 两列布局
    • 3列布局
  • CSS中的定位机制
  • 网页简单布局之结构与表现的原则
  • CSS元素隐藏
  • CSS中清除浮动最优方法
  • DIVCSS规范命名集合
  • DIVCSS命名参考表
  • 导入样式及脚本
    • 传统方式
    • 新规范

常见布局种类

1列布局

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

两列布局

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

3列布局

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

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)
优点:不存在结构和语义化问题,代码量极少
缺点:使得与父元素相邻的元素的布局会遭到影响,不可能1直浮动到body,不推荐使用

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

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

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

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

DIV+CSS规范命名集合

命名规范说明
1)、所有的命名最好都小写
2)、属性的值1定要用双引号(“”)括起来,且1定要有值如class=”divcss5”,id=”divcss5”
3)、每一个标签都要有开始和结束,且要有正确的层次,排版有规律工整
4)、空元素要有结束的tag或于开始的tag后加上”/”
5)、表现与结构完全分离,代码中不触及任何的表现元素,如style、font、bgColor、border等
6)、定义,应遵守从大到小的原则,体现文档的结构,并有益于搜索引擎的查询。
7)、给每个表格和表单加上1个唯1的、结构标记id
8)、给图片加上alt标签
9)、尽可能使用英文命名原则
10)、尽可能不缩写,除非1看就明白的单词

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 2级导航 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 2级页面子页面
tool,#toolbar 工具条
drop 下拉
dorpmenu 下拉菜单
status 状态
scroll 转动
.tab 标签页
.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 文件时1般不需要指定 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>
------分隔线----------------------------
------分隔线----------------------------

最新技术推荐