文档章节

DIV CSS网站布局八个小技巧

lotozhou
 lotozhou
发布于 2015/11/26 13:53
字数 776
阅读 45
收藏 2

本文向大家介绍一下DIV CSS网站布局的八个小技巧,比如当边界重合时利用padding或border来避免,或者尝试避免同时对元素指定padding/border以及高度或宽度,相信本文介绍一定会让你有所收获。

DIV CSS网站布局的八个小技巧

1.若有疑问立即检测

在出错时若能对原始代码做简单检测可以省去很多头痛问题。W3C对于XHTML与CSS都有检测工具可用,请见http://validator.w3.org。请注重,在文件开头的错误,可能因为不当的结构等因素造成更多错误;我们建议先修正一些最明显的错误之后重新检测,这样也许会让错误数量爆减。

2.使用浮动功能时记得适当清除指令

浮动是个危险的功能,未必会产生您所期望的结果。假如您碰到浮动元素延伸到外围容器的边框或者其他不正常情况,请先确定您的做法是正确的。。

3.边界重合时利用padding或border来避免

您可能会为了一点不应该出现的空间而焦头烂额,或者您需要一点点空间时,怎样都挤不出来。假如您有用到margin,那么很轻易产生边界的重合。

4.DIV CSS网站布局时尝试避免同时对元素指定padding/border以及高度或宽度

Windows版IE经常导致width与height的计算问题。有些方法可以解决此问题,但假如母元素需要指定高度与宽度时,最好能够在母元素之内的子元素套用margin,或者当子元素需要指定高度与宽度时,在母元素套用padding以达效果。

5.DIV CSS网站布局时不要依靠min-width/min-height

Windows版IE并不支援两种语法。但是在某种程度下,windows版IE可以达到相当于min-width/min-height的效果,所以只要对IE做点过滤功能,即可达到您想要的结果。

6.若有疑问,先减少百分比

有时候某些错误会使50%50%成为100.1%,使网页出现问题。这时请尝试将这些值改为49%,甚至49.9%。

7.记住“TRBL”写法

DIV CSS网站布局中border,margin与padding的简写语法有特定顺序,从上方开始顺时针方向转动:top,right,bottom,left.所以margin:0px 1px 3px 5px;的结果是上方无边界,右边1像素,以此类推。记住“TRBL”,您就不会弄错次序了。

8.只要不是零的值,都要指定单位

CSS需要您对每个font,margin等各种值指定单位。


© 著作权归作者所有

共有 人打赏支持
lotozhou
粉丝 9
博文 51
码字总数 51524
作品 0
苏州
程序员
私信 提问
DIV+CSS布局与程序开发关系?

可以说两者有关系,又可以说没有关系。 两者有关系,那是程序和CSS布局都可以由一个人完成;没关系,是可以由不同人来完成。 程序是主要对数据处理、计算,比如表单数据交互数据、数字运算、...

名字已被取
2016/03/10
67
2
《HTML与CSS知识》系列分享专栏

收藏HTML和CSS方面的技术文章,作为一个WEB开发者,必须要知道HTML和CSS方面的知识,即使作为后台开发者也应该知道一些常用的HTML和CSS知识,甚至架构师也要了解,这样才会开发出实用的网站来...

开元中国2015
10/28
0
0
小白看学习前端内容

小白看学习前端内容 web前端工程师其实在不同的公司,有不同的职能,但是称呼都是类似的   1.做网站设计、网页界面开发   2.做网页界面开发   3.做网页界面开发、前台数据绑定和前台逻辑...

MyDear宸
2017/05/11
0
0
DIV+CSS规范命名大全集合

网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇。 常用DIV+CSS命名大全集合,即CSS命名规则 DIV CSS命...

0000001
2014/08/12
0
0
通过JS+DIV+CSS排版布局实现选项卡效果

CSS介绍及布局特定 层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。   CSS目前最新版本为CSS3,是能够真正做到...

青衣霓裳
11/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

CentOS 安装Tomcat

Tomcat 介绍 Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta项目中的一个核心项目,由Apache、Sun和其他一些公司及个人共同开发而成。 Java 程序写的网站用tomcat+jdk来运...

野雪球
9分钟前
0
0
OSChina 周四乱弹 —— 每天都迟到是种什么样的体验

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @开源中国首席机器人 :《Too Good At Goodbyes (Acoustic) - Sam Smith - 单曲》 《Too Good At Goodbyes (Acoustic) - Sam Smith - 单曲》 ...

小小编辑
14分钟前
32
4
jquery通过id显示隐藏

var $div3 = $('#div3'); 显示 $div3.show(); 隐藏 $div3.hide();

yan_liu
今天
3
0
《乱世佳人》读书笔记及相关感悟3900字

《乱世佳人》读书笔记及相关感悟3900字: 之前一直听「荔枝」,后来不知怎的转向了「喜马拉雅」,一听就是三年。上班的时候听房产,买房了以后听装修,兴之所至时听旅行,分手后听亲密关系,...

原创小博客
今天
3
0
大数据教程(9.6)map端join实现

上一篇文章讲了mapreduce配合实现join,本节博主将讲述在map端的join实现; 一、需求 实现两个“表”的join操作,其中一个表数据量小,一个表很大,这种场景在实际中非常常见,比如“订单日志...

em_aaron
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部