需要掌握的八个CSS布局技巧

转载 2007年10月02日 10:08:00

1.若有疑问立即检测

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

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

浮动是个危险的功能,未必会产生您所期望的结果。如果您遇到浮动元素延伸到外围容器的边框或者其他不正常情况,请先确定您的做法是正确的。请参阅Eric Meyer 在Complex Spiral Consulting Web 网站上的教学。

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

您可能会为了一点不应该出现的空间而焦头烂额,或者您需要一点点空间时,怎样都挤不出来。如果您有用到margin,那么很容易产生边界的重合;Andy Budd在他的网站上解释了可能的做法。

4.尝试避免同时对元素指定padding/border以及高度或宽度

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

5.不要依赖min-width/min-height

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

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

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

7.记住“TRouBLed”写法

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

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

CSS需要您对每个font,Margin等各种值指定单位。(唯一的例外是line-height) 

CSS页面布局技巧(一)

设置文本样式1、字体类型绝大多数用户系统默认支持的中文字体有宋体、黑体、幼圆、楷体;默认支持的英文字体有Arial、Arial Black、Arial Narrow、 Century Gothic 、...
  • sinat_20177327
  • sinat_20177327
  • 2017年07月13日 18:10
  • 210

HTML与CSS布局技巧总结

很多人对CSS的布局有困惑,实际的应用场景中由于布局种类多难以选择。今天我花些时间总结下自己对CSS布局的理解,分析下了解各种布局的优劣,同时希望能分享给初入前端的朋友们一些在布局上的经验,如果有那些...
  • bingkingboy
  • bingkingboy
  • 2016年04月11日 00:29
  • 14918

DIV CSS网站布局八个小技巧

本文向大家介绍一下DIV CSS网站布局的八个小技巧,比如当边界重合时利用padding或border来避免,或者尝试避免同时对元素指定padding/border以及高度或宽度,相信本文介绍一定会让...
  • qq_32609883
  • qq_32609883
  • 2015年11月26日 14:36
  • 164

DIV CSS网站布局八个小技巧

本文向大家介绍一下DIV CSS网站布局的八个小技巧,比如当边界重合时利用padding或border来避免,或者尝试避免同时对元素指定padding/border以及高度或宽度,相信本文介绍一定...
  • qq_32609883
  • qq_32609883
  • 2015年12月07日 17:05
  • 169

2017年值得学习的3个CSS特性

随着新的一年到来,我们有一整套新的东西要开始学习。虽然今年的新特性有很多,但有3个新的特性是最令我激动不已的。...
  • lgno2
  • lgno2
  • 2017年02月08日 15:57
  • 398

学电脑必须掌握的网络八个常用DOS…

一,ping       它是用来检查网络是否通畅或者网络连接速度的命令。作为一个生活在网络上的管理员来说, ping命令是第一个必须掌握的DOS命令,它所利用的原理是这样的:网络上的机器都有唯一 ...
  • u012402276
  • u012402276
  • 2015年09月25日 11:32
  • 295

CSS基础知识-五(CSS定位、左右布局方法)

一、CSS定位 1、Float:left / right /none;------左浮动/右浮动/无 2、Position:absolute;----绝对定位 3、Position:relative;...
  • u012054869
  • u012054869
  • 2016年05月31日 20:12
  • 1274

css3技巧实现九宫格布局

九宫格布局                                                                                       /*:af...
  • tooyangtoosimple_
  • tooyangtoosimple_
  • 2016年12月10日 17:50
  • 2453

CSS Grid布局这样玩

自从去年年半年开始,CSS Grid布局的相关教程在互联网上就铺天盖地,可谓是声势浩大。就针对于Web布局而言,个人认为Grid布局将是Web布局的神器,它改变了以往任何一种布局方式或者方法。不管以前...
  • hj7jay
  • hj7jay
  • 2017年04月25日 09:34
  • 1628

Jquery需要掌握的技巧

检查 jQuery 是否加载在使用 jQuery 进行任何操作之前,你需要先确认它已经加载:if (typeof jQuery == 'undefined') { console.log('jQu...
  • u011225629
  • u011225629
  • 2016年03月14日 09:05
  • 2389
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:需要掌握的八个CSS布局技巧
举报原因:
原因补充:

(最多只允许输入30个字)