用CSS进行布局

发表于 更新于 分类于 阅读次数：
本文字数： 4k 阅读时长 ≈ 4 分钟

描述：使用CSS创建各种各样的布局。

开始布局的注意事项

内容与显示分离

应始终保持内容（HTML）与样式（CSS）分离。

方法：使用外部样式表

布局方式

网站设计主要有两大类型：固定宽度和响应式。

固定（fixed）布局：整个页面和每一栏都有基于像素的宽度。

缺点：页面不会随着显示环境的变化而变化，它的宽度始终不会发生改变。

响应式页面：也称为流式（fluid或liquid）页面。使用百分数定义宽度，允许页面随显示环境的改变进行放大或缩小。除了具有流动栏，响应式页面还可以根据屏幕尺寸以特定方式调整其设计。

注意：没有一种布局方式可以适用于所有的情景。

浏览器注意事项

大多数情况下，在将网站放到服务器上发布之前，通常需要在很多浏览器上对页面进行测试。

构建页面

高效网页的核心是结构良好、语义化的HTML。

构建页面

  1. 恰当的使用article、aside、nav、section、header、footer和div等元素将页面划分成不同的逻辑区块。
  2. 按照一定的顺序防止内容，确保页面在不使用CSS的情况下也是合理的。
  3. 以一致的方式使用标题元素（h1~h6），并对它们按优先级来进行排序。
  4. 使用合适的语义标记剩余的内容。
  5. 如果有必要，可以使用注释来标记不同的区域和内容。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<body>
<div class="page">
    <!--开始报头-->
    <header class="masthead" role="banner">
        <!--报头-->
    </header>
    <!--结束报头-->

<div class="container">
    <!--开始主体部分-->
    <main role="main">
        <section class="post">
           <!--section1-->
        </section>

        <section class="post">
            <!--section2-->
        </section>

        <nav role="navigation">
            <!--链接列表项-->
        </nav>
    </main>
    <!--结束主体部分-->

    <!--开始附注栏-->
    <div class="sidebar">
        <article class="about">
            <!--about me-->
        </article>

        <div class="mod">
            <h2>MY TRAVELS</h2>
            <img src="../img/map.PNG" class="map"/>
        </div>

        <aside  class="mod">
            <h2>POPULAR POSTS</h2>
            <ul class="links">
                [链接说明]
            </ul>
        </aside>

        <aside  class="mod">
            <h2>RECENTLY SHARED</h2>
            <ul class="links">
                [链接说明]
            </ul>
        </aside>
    </div>
    <!--结束附注栏-->
</div>
    <!--结束容器-->
    <!--开始页脚-->
<footer role="contentinfo" class="footer">
    <!--页脚-->
</footer>
    <!--结束页脚-->
</div>
<!--结束页面-->
</body>

在旧版浏览器中为HTML5元素添加样式

旧版浏览器会把article,aside…以及其他一些元素显示为单独的行，而div、p以及其他的在HTML5之间的HTML版本中称为块级元素。所以我们可以把他们转化为块级元素。

大多数浏览器允许对它们并不原生支持的元素添加样式。（Internet Explorer8及以下版本是例外）

针对全部浏览器为HTML5新元素添加样式

  1. 将下面代码添加到样式表文件。

    1
    2
    3
    article,aside,figcaption,figure,footer,header,main,nav,section{
    display: block;
    }

  2. 有两种方法可以实现为IE9之前的版本添加HTML5新元素。

    方法一：在每个页面的head元素中添加下面的代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="aaa.css"/>
    <!--[if lt IE9]> 
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
        </script>
    <![endif]-->
    </head>

    大多数浏览器默认将它们无法识别的元素作为行内元素处理。

    方法二（推荐）：将该js文件放在自己的网站上。

    可以通过https://github.com/aFarkas/html5shiv/下载HTML5 shiv的ZIP文件，该地址是存放和维护HTML5 shiv代码的地方。

    下载后，打开ZIP文件，里面会有几个文件夹。你只需要打开dist文件夹，其中包含了要用的html5shiv.js。将这个文件复制到你的网站的某个子目录里面。还可以使用html5shiv-printshiv.js，它功能跟html5shiv.js差不多，只是它还支持IE8及之前版本在打印时能够正确的处理新的HTML5元素。

    1
    2
    3
    4
    5
    6
    7
    8
    9
        <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="aaa.css"/>
        <!--[if lt IE9]>
            <script src="js/html5shiv.js"></script>
        <![endif]-->

    </head>

对默认样式进行重置或标准化

每个浏览器都有内置的默认样式表。

整体上，不同浏览器提供的默认样式表是相似的，但也存在一定的差异。所以，开发人员在应用他们自己的css之前，常常需要抹平这些差异。

抹平差异的方法主要有两种：

  1. 使用CSS重置（reset）开始主样式表，如Eric Meyer创建的Meyer重置（http://meyerweb.com/eric/tools/css/reset/）。另外还有其他的一些重置样式表。

    CSS重置可以有效的将所有默认样式都设为“零”。

  2. 使用Nicolas Gallagher和Jonathan Neal创建的normalize.css开始主样式表。该样式表位于https://necolas.github.com/normalize.css/（最新版本用Download按钮）。

    对默认样式进行微调，这样它们在不同的浏览器中具有相似的外观。

    更重要的是，这个版本与使用当今常见的浏览器查看的效果是极为相似的。

从上面合适的URL中复制CSS，并粘贴到自己的样式表中。

盒模型

概念：CSS处理网页时，他认为每个元素都包含在一个不可见的盒子里。

盒模型

每个元素都有自己的盒子。

宽度、高度和盒模型

CSS的width属性对元素所显示宽度的影响，有两种处理方式。（不包括任何将其与邻近元素隔开的外边距）

方法一：（默认的处理方法）浏览器中元素的宽度与其width属性值并不一致（除非他没有内边距和边框）。CSS中的宽度指示的是内边距里内容区域的宽度。(只是指内容)

而元素在浏览器中的显示宽度则是内容宽度、左右内边距和左右边框的总和。显示高度与之类似。

方法二：（更为直观方式）元素的显示宽度就等于width属性的值。内容宽度、内边距和边框都包含在里面。height与之类似。

要使用这种模式，需要对元素进行设置：

box-sizing: border-box;

方法一和方法二对比：

对比

控制元素的显示类型和可见性

要不要鼓励一下！
0%