• CSS3学习笔记(2)-CSS盒子模型


    在了解更多的CSS3知识之前,有必要重新温习下CSS的盒子模型。HTML页面上所有元素都体现为一个个的矩形盒子。每一个盒子从内到外包括:元素内容(content)、内边距(padding)、边框(border)和外边距(margin)。下面左图是W3C标准盒子模型的图示,右图是IE6盒子模型:

    W3C盒子与IE6盒子的差异

    W3C盒子的宽度(width):指元素内容区域content的宽度

    W3C盒子的高度(height):指元素内容区域content的高度

    IE6盒子的宽度(width):指元素外边距区域margin的宽度

    IE6盒子的高度(height):指元素外边距区域margin的高度

     

    TRBL参数指定顺序

    从上面的图片可以看到,content、padding、border及margin的各项参数还可以明细到上下左右各位置上,在CSS中设置这些参数时,可以通过一条语句进行设置。指定参数时一般是按照TRBL依次确定的,T表示Top(上),R表示Right(右),B表示Bottom(底),L表示Left(左)。指定参数的方式有:1个参数、2个参数、3个参数和4个参数的指定方式。以下是示例说明:

    指定单个参数
    1 div{
    2     margin:2px;     //div标签的所有上下左右外边距都是2px
    3 }
    指定两个参数
    1 p{
    2     padding:2px 6px;    //p元素的上下内边距为2px,左右边距为6px
    3 }
    指定三个参数
    1 span{
    2     border-width:0 2px 4px;    //span标签上边框粗细为0,左右边框粗细为2px,底边框粗细为4px
    3 }
    指定四个参数
    1 table{
    2     margin:1px 2px 3px 4px;    //table标签的上边距为1px,右边距为2px,下边距为3px,左边距为4px
    3 }
  • 相关阅读:
    传感器仿真平台——数据生成模块(三)
    写一个ES6 的遍历目录函数
    编码风格
    关于DOM事件的一个例子
    WEB DB
    表格资料
    css3 鼠标移入移出效果
    css 3D
    正向代理和反向代理
    FileReader 对象
  • 原文地址:https://www.cnblogs.com/alexywt/p/4737184.html
Copyright © 2020-2023  润新知