CSS布局基础汇总

2020-12-31 17:16:11 浏览数 (2603)

常见布局种类

一列布局

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

两列布局

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

三列布局

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

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）

优点：不存在结构和语义化问题，代码量极少

缺点：使得与父元素相邻的元素的布局会遭到影响，不可能一直浮动到 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 文件时一般不需要指定