爱易网
IT新闻
IT新闻
爱易资讯
网站搭建
云虚拟主机教程
云服务器教程
Apache教程
IIS教程
Nginx教程
网站策划
站长文章
推广教程
淘宝客教程
网页设计
HTML教程
XHTML教程
CSS教程
HTML5教程
CSS3教程
JavaSript基础
JQuery教程
Node.js教程
前端技术
Ajax教程
Js特效
Xml教程
平面设计
页面UI设计
photoshop教程
程序开发
AI人工智能
Asp教程
Php教程
Asp.Net教程
Net Core教程
C#教程
Java教程
Jsp教程
开发技术
微信小程序教程
Uniapp开发教程
微信公众号开发
Andriod教程
IOS教程
DOS教程
Python教程
Docker教程
Windows Container教程
数据库
MSSQL教程
MySQL教程
Redis教程
Access教程
Oracle教程
数据库教程
操作系统
Linux教程
Windows教程
MAC教程
Cisco教程
交换机教程
防火墙教程
搜索
爱易网页
HTML教程
纵谈CSS和页面布局
纵谈CSS和页面布局
日期:2014-05-17 浏览次数:20865 次
漫谈CSS和页面布局
偶然看到这篇文章,让我欣赏悦目。有一种拨云见日的感觉,通体畅快。特记下与各位分享 ?这篇随笔不是专门针对SpringSide,却只得每个程序员一看。
还记得胡戈调侃《无极》中的王城布局为“圈圈套圈圈”娱乐城,也还记得我刚开始做Web开发时“表格套表格”的页面布局。在大部分的程序员中,可能还在使用表格进行布局,使用表格进行布局的巨大缺点就是当页面进行一点点修改的时候,都有可能完全打乱页面的外观,而且非常不利于和美工的配合。当然了,很多美工人员也在使用表格进行布局,他们在图形软件中设计好页面,然后使用切片工具一切就完事,却给我们需要在网页网页中动态增加内容的程序员带来了麻烦。在CSS盛行的今天,我们早就该让表格只做它的本分工作了。
网上也有不少使用div + css进行布局的教程,却存在很多缺陷,一是对css的布局模型讲解不清楚,让人很难理解相对定位、浮动等概念;二是虽然避免了“表格套表格”的缺点,却带来了“div 套 div”的缺点,过量使用div标签;三是class过多,造成class灾难。
要正确使用css,对css的基本只是就不能够不了解。既然是漫谈,我这里就只讲四个方面,最后给出xkland项目作为实例。
一、CSS中的块模型
在CSS的定义中,有的html标签被浏览器当成一个块来显示,比如div、table、p、ul等等,我们称之为块元素;有的html标签被浏览器显示在文本行之类,如a、span、font等等,我们称之为行内元素。行内元素我这里就不讲了,只讲讲块元素的模型。
每一个块元素都可以分为context、padding、boder和margin几个部分,我们常说的宽和高,指的只是context的宽和高,padding代表内容和边框之间的填充,margin代表边框之外的空白,如下图:
这几个部分都是可以通过CSS进行指定的,当然,CSS还可以控制背景,因此,我们可以通过CSS来灵活控制我们页面的外观。
二、CSS中的文档流模型
所有的块元素在html文档中是按照它们出现在文档中的先后顺序排列的(当然,嵌套不在此列),每一个块都会另起一行。如下图:
他们对应的html如下:
<
div?
id
="div1"
>
div1
</
div
>
<
div?
id
="div2"
>
div2
</
div
>
<
div?
id
="div3"
>
div3
</
div
>
为了定义他们的宽度、高度还有边框,我们定义如下的CSS:
上一篇: html+jquery透过传递json访问后台控制层
下一篇: CSS Hack: 界别 IE6 / IE7 /IE8 /Firefox
免责声明:
本文仅代表作者个人观点,与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
相关资料
更多>
关于返回顶部代码,IE6不支持的有关问题,希望高手帮忙解决一上.
html5 canvas 画图形,改变填充颜色解决思路
asp.net mvc 二 强类型html辅助方法
div+css格局命名规则
怎么等比例缩小整个网页
用JSP做的网站,前台用什么软件做?Dreamweaver还是ExtjS?该如何处理
Google Map跟HTML5定位和动态加载
小弟我网站改版,旧的页面被小弟我删了,百度,google收录都是旧链接,如何做让旧的链接直接到新网站页面上去啊
一般网站的验证码用什么语言写啊解决方案
推荐阅读
更多>
鼠标移动左边的小图,右边显示大图,求大神,
fckeditor怎么設定不出現toolbar呢
对于用户下传不规划Html而导致页面布局错乱的一简单解决办法
jQuery兑现动态增加行,发送Ajax请求返回HTML
XSL资料将一个XML文件转化成HTML文件时,添加空格标记 
让弹出div从当中慢慢变大
MyEclipse中不提示JSP页面的html标记属性值?
百度地图自动完成下拉列表样式重写,该怎么解决
html5 手把手教你做游戏《熊跟蘑菇》(六)
怎么让ul li 的溢出内容的显示为.点点符号
能不能快速更换一个web程序的外观?该如何处理
:position:relative占用的空间空白怎么处理
java图片上传回显(火狐狸待测)
css中的zoom的功用
网页设计员的字体替换方法指南
常用的浏览器支持png格式的图片吗?解决思路
怎么使fontpage不产生_vti_cnf文件夹
html5基本词相关整理
HTML文字规划(TEXT STYLE)标志(TAGS)
[转载]CSS匣子模型