CSS布局基础汇总_html/css_WEB-ITnose-html教學-PHP中文網

一列布局

两列布局

三列布局

传统方式

新规范

首頁

web前端

html教學

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:45 AM

常见布局种类

一列布局

两列布局

三列布局

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

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7814

Java教學

1646

CakePHP 教程

1402

Laravel 教程

1300

PHP教程

1237

Related knowledge

HTML容易為初學者學習嗎？ Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML中起始標籤的示例是什麼？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。