`
L.Y
  • 浏览: 13986 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

div+css的padding缩写方式

    博客分类:
  • css
 
阅读更多

在css中使用padding可以将padding-top, padding-bottom, padding-left, padding-right缩写为一个标记。padding标记可以带一个、二个、三个、四个参数,各有不同的含义。

[示例代码]

<html>
    <body>
        <div style="border: 1px solid red; padding: 20px;">
            <div style="border: 1px solid blue;">
                padding: 20px;上、下、左、右各20px。
            </div>
        </div>
        <div style="border: 1px solid red; padding: 20px 40px;">
            <div style="border: 1px solid blue;">
                padding: 20px 40px;上、下20px;左、右40px。
            </div>
        </div>
        <div style="border: 1px solid red; padding: 20px 40px 60px;">
            <div style="border: 1px solid blue;">
                padding: 20px 40px 60px;上20px;左、右40px;下60px。
            </div>
        </div>
        <div style="border: 1px solid red; padding: 20px 40px 60px 80px;">
            <div style="border: 1px solid blue;">
                padding: 20px 40px 60px 80px;上20px;右40px;下60px;左80px。
            </div>
        </div>
    </body>
</html>

[div+css关键词]

div css

[div+css重要工具]

Internet Explorer Developer Toolbar, http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&amp;displaylang=en

[div+css的常见问题]

较验div+css格式,http://validator.w3.org/
div+css的margin缩写方式
div+css的padding缩写方式

[div+css的浏览器兼容问题]

水平居中,Firefox使用margin-left: auto; margin-right: auto; IE6 使用text-align: center;
垂直居中,Firefox中使用display: table-cell; vertical-align: middle;可以实现div垂直居中,而IE6中则需要借助IE6中css的特点实现垂直居中。
!important标记,Firefox支持!important标记,IE6忽略!important标记

分享到:
评论

相关推荐

    CSS文集

    横向导航 CSS样式嵌套 div+css处理firefox与IE6的水平居中效果 div+css的padding缩写方式 div+css的格式较验 div+css的重要工具:Internet Explorer Developer Toolbar div+css使用!important标记...

    H5+CSS3.zip

    css盒模型:块级元素,内联元素,内敛块状元素,none使元素隐身,设置宽度、高度、背景色、边框、圆角,padding内边距,margin外边距; css布局模型:流动模型flow,浮动模型float,层模型layer,层模型的绝对定位、...

    Div+CSS 规则整理 提高效率

    一、 善用css缩写规则  /*注意上、右、下、左的书写顺序*/ 1. 关于边距(4边): 1px 2px 3px 4px (上、右、下、左) 1px 2px 3px (省略的左等于右) 1px 2px (省略的上等于下) 1px (四边都相同)   2. ...

    《CSS设计彻底研究》【中文PDF+源代码】

    在《CSS设计彻底研究》中对设计中常用的网页元素和布局方式都给出详细的分类和归纳,并讲解了完整的解决方法,主要包括各种导航菜单(水平的、竖直的、固定宽度的、自适应宽度的、下拉的等),Tab面板、伸缩面板和...

    《CSS设计彻底研究》光盘源码

     3.2.3 实验2——属性的缩写形式   3.2.4 实验3——边框与背景   3.3 内边距(padding)   3.4 外边距(margin)   3.5 盒子之间的关系   3.5.1 HTML与DOM   3.5.2 标准文档流   3.5.3 div ...

    css设计彻底研究 源代码

     3.1 盒子的内部结构 3.2 边框(border) 3.2.1 实验1——border-style 3.2.2 属性值的简写形式 3.2.3 实验2——属性的缩写形式 3.2.4 实验3——边框与背景 3.3 内边距(padding) 3.4 外边距...

    CSS网站布局实录 (第二版)PDF版

    6.5.2 margin与padding边距缩写 6.5.3 border边框缩写 6.5.4 list列表缩写 6.5.5 background背景缩写 6.5.6 color颜色缩写 6.6 CSS代码优化 6.6.1 增加代码重用率 6.6.2 使用样式覆盖进行简化 6.7 园角样式设计 ...

    css入门笔记

    使用css样式方式 1.内联样式 行内样式 特点:将css样式定义在HTML标记中 语法: 样式声明:用样式属性和值组成(属性:值;) 常用的样式属性: 1.颜色 属性 :color 颜色 取值:颜色英文名 2.背景颜色 ...

    jQuery详细教程

    jQuery 使用 $ 符号作为 jQuery 的简介方式。 某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。 jQuery 使用名为 noConflict() 的方法来解决该问题。 var jq=jQuery.noConflict(),帮助您使用...

    EXTJS总结.txt

    传入一个CSS选择符的参数,然后依据该CSS选择符从当前元素下面,形成期待匹配子节点的集合,也就是“选择”的操作,最后以一个Ext.CompositeElement类型的组合元素的形式返回。如果以Ext.select()调用表示从document...

    jquery插件使用方法大全

    它是轻量级的js库(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。jQuery使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX...

Global site tag (gtag.js) - Google Analytics