mozilla
您的搜索结果

    布局

    本文是 CSS Getting Started 的第12部分; 主要讲述一些修改页面布局的方法。 你可以通过学习来修改自己示例的布局。

    说明: 布局

    你可以通过 CSS 来设置布局的炫酷效果。其中所涉及的部分高阶技术并不是本文范畴。

    当你设计一个简单布局时, 你的样式表与浏览器默认样式表之间的交互、以及与布局引擎的交互都是相当复杂的。 这也是一个高阶话题,并不在本文范畴。

    本文主要介绍一些简单的布局方法。

    文档结构

    当你想控制文档布局时,就不得不改变它的结构。

    页面标记语言通常都会有公共标签来创建结构。例如, 在 HTML 中你可以使用 <div> 元素来创建结构。

    示例

    在你的示例中, 编号段落并没有自己的容器。

    你的样式表无法为这些段落画出边框,因为没有选择器指向它们。

    为了解决这个问题, 你可以添加一个<div> 在段落之外。这个标签是唯一的,所以你可以给它指定一个id属性:

    <h3>Numbered paragraphs</h3>
    <div id="numbered">
      <p>Lorem ipsum</p>
      <p>Dolor sit</p>
      <p>Amet consectetuer</p>
      <p>Magna aliquam</p>
      <p>Autem veleum</p>
    </div>
    

    现在你可以用样式表在表单周围画出边框了:

    ul, #numbered {
      border: 1em solid #69b;
      padding-right:1em;
    }
    

    运行结果如下:

    (A) The oceans

    • Arctic
    • Atlantic
    • Pacific
    • Indian
    • Southern

    (B) Numbered paragraphs

    1: Lorem ipsum

    2: Dolor sit

    3: Amet consectetuer

    4: Magna aliquam

    5: Autem veleum

    大小单位

    到目前为止,你可以通过像素来指定大小。这在有些情况下是非常合适的,比如电脑屏幕显示。 但当用户改变字体大小之后,你的布局可能会发生错位。

    因此,最好通过百分比或 ems (em) 来指定大小。 em 通常是指当前字体大小(字母m的宽度)。当用户改变字体大小时,你的布局会自己修正。

    示例

    文本左边的border通过像素来指定大小。

    文本右边的border通过 ems来指定大小。

    在你的浏览器中,修改字体大小,会发现右边的border会自己修正大小而左边的不会。:

    RESIZE ME PLEASE
    更多详情

    对于其它设备,其它的长度单位可能更合适。

    在本指南中会有其它篇幅详细介绍这一点。

    更多详情参见CSS说明中 Values .

    文本布局

    有两个属性可以指定元素内容的对齐方式。你可以用它们来进行简单的布局:

    text-align
    内容对齐。 可以使用下面几个值: left, right, center, justify
    text-indent
    指定内容缩进。

    这两个属性可以应用于任何文本类内容,不只是纯文本。 需要注意的是,它们会被元素的子元素继承, 所以需要在子元素中将它们关闭,以免出现意想不到的效果。

    示例

    标题居中:

    h3 {
      border-top: 1px solid gray;
      text-align: center;
    }
    

    输出结果:

    (A) The oceans

    在 HTML 文档中, 标题之后的内容并不属于标题。当你对齐一个标题时,其后的元素不会继承该样式。

    浮动

     float 属性强制元素靠左或靠右。 这是控制元素位置和大小的简单方法。

    本文剩下部分都是围绕浮动元素展开。你可以使用 clear 属性来避免其它元素受到浮动效果的影响。

    示例

    在你的示例中,list是根据窗口拉伸。你可以通过使用浮动元素来使它们靠左。

    为了保证标题在正确的位置, 你必须为标题指定clear属性来避免标题靠左:

    ul, #numbered {float: left;}
    h3 {clear: left;}
    

    运行结果如下:

    (A) The oceans

    • Arctic
    • Atlantic
    • Pacific
    • Indian
    • Southern

    (B) Numbered paragraphs

    1: Lorem ipsum

    2: Dolor sit

    3: Amet consectetuer

    4: Magna aliquam

    5: Autem veleum

    (box右侧需要增加一些padding ,防止文本与边框太近)

    位置

    你可以为一个元素使用  position 元素并指定下列值来设置其位置。

    这些是高阶属性。 可以通过简单的方式来使用它们—这也是在基础教程里提到它们的原因。但使用它们来实现复杂的布局会相对困难一些。

    relative
    通过为元素指定一个值,元素相对于其原来位置移动。也可以使用margin来达到同样的效果。
    fixed
    为元素指定相对于窗口的确切位置 。即使文档的其它元素出现滚动,元素位置仍然不变。
    absolute
    为元素指定相对于其父元素的确切位置。只有在父元素使用 relative, fixed or absolute 时才有效。你可以为任何父元素指定 position: relative;因为它不会产生移动。
    static
    默认值。当明确要关闭位置属性时使用。

    position 属性(除了 static)一起使用的, 有下列属性: top, right, bottom, left, width, height 通过设置它们来指定元素的位置或大小。

    示例

    为了放置两个元素,一个在另外一上方, 创建一个父容器来包含两个子元素:

    <div id="parent-div">
      <p id="forward">/</p>
      <p id="back">\</p>
    </div>
    

    在你的样式表里,将父容器的position设置为 relative。无需为它设置领衔。 将子元素的position属性设置为 absolute:

    #parent-div {
      position: relative;
      font: bold 200% sans-serif;
    }
    
    #forward, #back {
      position: absolute;
      margin:0px; /* no margin around the elements */
      top: 0px; /* distance from top */
      left: 0px; /* distance from left */
    }
    
    #forward {
      color: blue;
    }
    
    #back {
      color: red;
    }
    

    输出结果如下,反斜杠显示在斜杠上方

    /

    \

     
    更多详情

    更多详情的postion说明在 CSS Specification 中占用了两个章节: Visual formatting modelVisual formatting model details.

    如果你的样式表工作在多种浏览器环境下,你会发现不同浏览器对标准协议的解释会有很多不同, 而且特定浏览器的特定版本可能存在BUG。

    实践: 设置布局

    1. 修改示例文档, doc2.html, 和样式表, style2.css, 使用之前的示例 文档结构 and 浮动.
    2. 浮动 示例中, 添加padding 来分离文本和右侧border ,值设为0.5 em.
    挑战

    修改示例文档, doc2.html, 在文档末尾添加一个标签, 注意在</body>之前。

    <img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin">
    

    如果你在之前的教程中没有下载过该图片, 现在下载, 将它与示例文件放在同一目录下:

    Image:Yellow-pin.png

    预测一下你的图片将会出现在哪里,然后刷新浏览器验证一下。

    在样式表中添加一条规则,将图片显示在文档右上角。

    刷新浏览器并把窗口拉小。 查看图片是否在右上角,拖动容器大小,再次查看。

    (A) The oceans

    • Arctic
    • Atlantic
    • Pacific
    • Indian
    • Southern

    (B) Numbered paragraphs

    1: Lorem ipsum

    2: Dolor sit

    3: Amet consectetuer

    4: Magna aliquam

    5: Autem veleum

     

    Yellow map pin

     查看该挑战的解决方案

    接下来是什么?

    你几乎已经学习了这篇CSS基本教程的所有主题。接下来将描述更多CSS规则的高级选择器,以及你可以用来展示表格的一些特定方法。

    文档标签和贡献者

    此页面的贡献者有: ziyunfei, larryzhang, mengzyou, Chajn, teoli
    最后编辑者: mengzyou,