• 网页元素的大小和边距


    网页中元素的大小和边距,主要由 width, height, margin, border, padding 这些属性来设置。

    width 和 height 是指的宽度和高度,可以设置为度量长度,比例长度或者自动(auto)。例如:

    <div id="one" style="120px; height:80px">hello one</div>
    <div id="two" style="12%; height:8%">hello two</div> 

    另外还有 max-width, max-height, min-width, min-height 这几个属性,它们用于设置元素大小的最大和最小值。这些属性配合比例长度来使用比较合适。对于行内非替换元素,比如 <a>,<em>,<span> 等,将无法设置它的 height 属性,它们的高度由字体大小和行高决定。

    margin 是该元素和相邻元素的外边距,可以用以空格分隔的四个长度值来分别设置上右下左几个边距值,或者分别用 margin-top, margin-right, margin-bottom 和 margin-left 来设置。对于行内非替换元素,垂直方向的 margin 无效。

    padding 是该元素的内边距,即元素里面的内容与边框的距离。与 margin 类似,这几个属性同样有上下左右四个方向可以设置。对于行内非替换元素,可以设置垂直方向的 padding ,但不会影响元素的位置。

    注意当设置 margin 和 padding 为比例宽度时,不管是左右还是上下,都是按照元素的宽度来计算的。

    border 用于设置元素的边框,包括宽度,样式和颜色,可以一起设置也可以分别用 border-width,border-style,border-color 来设置。例如

    p {
        border: 1px solid gray;
    }

    参考资料:

    [1] CSS 框模型概述
    [2] The CSS Box Model
    [3] W3C CSS2 - Box model #margin-properties
    [4] CSS:IE 中 border:none 的陷阱
    [5] Inline elements and padding | Max Design

    [YAML] Date: 2011-05-14 15:37:43, Updated: 2013-06-03 12:36:00

  • 相关阅读:
    2017微软秋招A题
    UVA 494 Kindergarten Counting Game
    loss function与cost function
    coderforces 721b
    coderforces719b
    PyQt4打包exe文件
    PyQt4 UI设计和调用 使用eric6
    PyQt4 进度条和日历 代码
    PyQt4 颜色选择,字体选择代码
    PyQt4调用UI文件
  • 原文地址:https://www.cnblogs.com/zoho/p/2432140.html
Copyright © 2020-2023  润新知