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. DIV+CSS常用网页布局技巧!

    以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...

  2. CSS进阶内容——布局技巧和细节修饰

    CSS进阶内容--布局技巧和细节修饰 我们在之前的文章中已经掌握了CSS的大部分内容,但仍有一些内容我们没有涉略,这篇文章就是为了补充前面没有涉及的内容,为我们的知识做出补充并且介绍一些布局技巧 当然 ...

  3. css后台页面布局技巧

    目标: 实现左边侧边栏固定,右边内容区自适应 侧边栏内容较少时背景100%高度展示 侧边栏内容较多时可以滚动,且不让显示滚动条(显示太丑) 内容区较少时不出现滚动条,较多时可以滚动 code: < ...

  4. 总结与学习DIV+CSS网页布局技巧

    以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...

  5. CSS之定位布局(position,定位布局技巧)

    css之定位 1.什么是定位:css中的position属性,position有四个值:absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设 ...

  6. div+css 布局技巧总计

    一.css 样式 1.float 首先需要了解块级元素(block element).每个块级元素都默认占用一行,在同一行只能添加一个块元素(float 除外).块级元素一般可以嵌套块级元素或者行内元 ...

  7. css布局技巧

    CSS用户界面样式 鼠标样式currsor li{ cursor:pointer: } 设置或检索在对象上移动鼠标指针采用何种系统预定义的光标形状 属性值 描述 default 默认 pointer ...

  8. 移动平台3G手机网站前端开发布局技巧

    本文转载至:移动平台3G手机网站前端开发布局技巧汇总 - 前端开发-武方博 您或许正在或准备参与一个WepApp项目,您或许正在Google搜索mobile development相 关的文章,您或许 ...

  9. 移动平台3G手机网站前端开发布局技巧汇总

    移动平台3G手机网站前端开发布局技巧汇总 作者:前端开发-武方博   发布:2011-05-10 09:11   分类:移动开发   阅读:120,618 views   7条评论     您或许正在 ...

随机推荐

  1. PHP Fuzzing行动——源码审计

    目录: Section 1: 20种PHP源码快速审计方式  Section 2: PHP源码审计自动化( PHP Fuzzer )  风险级别: ■ Low ■ Medium ■ High   在开 ...

  2. 使用NuGet加载包,发现加载的dll都是最新版,原来少加了参数[-Version]

    使用NuGet获取AutoMapper 发现无法正确加载包,项目版本是3.5,获取的dll版本较高,查资料发现可以通过 “-Version” 指定加载包版本 http://www.mamicode.c ...

  3. 顺丰接口 api对接说明

    1       功能说明 物流轨迹查询-使用的物流单号和快递单号即可实现查询物流信息. 1.1   接口规则 (1).查询接口支持按照运单号查询(单个查询). (2).指定的物流运单号选择相应的快递公 ...

  4. TinyThread源码分析之中断

    转载请注明来源:cuixiaolei的技术博客 https://github.com/xhawk18/TinyThread TinyThread 是基于Cortex-M0的小型的OS. 知识储备: I ...

  5. Oracle基础 锁

    一.锁 数据库是一个多用户使用的共享资源.当多个用户并发地存储数据时,数据库中就会产生多个事务同时存取同一数据的情况.若对并发操作不加控制就可能会读取和存储不正确的数据,破坏数据库的一致性. 锁是实现 ...

  6. maven 本地仓库nexus的安装

    首先我们将nexus下载下来:http://www.sonatype.org/downloads/nexus-latest-bundle.zip 下载下来之后我们将文件解压,解压完成之后,我们首先,打 ...

  7. http请求数据

    /// <summary>        /// http请求post数据        /// </summary>        /// <param name=&q ...

  8. 理论制作 Windows 开机动画

    第一次接触 Windows 开机动画是 2012 年,那时候魔方的版本号还是 3.12,魔方里面有个很酷炫狂霸拽的功能就是替换 Windows 7 的开机动画.一开始我是在IT之家论坛里下载开机动画, ...

  9. [转]如何烧录tizen镜像文件?(图文教程)

    http://blog.csdn.net/flydream0/article/details/9179143 上一篇文章我已讲过如何制作镜像文件(http://blog.csdn.net/flydre ...

  10. Atmega8型号细分区别

    TMEGA8L- 8PU.ATMEGA8L-8PI.ATMEGA8L-8PC.ATMEGA8-16PU.ATMEGA8-16PI.ATMEGA8-16PC. ATMEGA8L-8AU.ATMEGA8L ...