HTML5和CSS3详解6

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

一：列布局

CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。我们知道，当一行文字太长时，读者读起来就比较费劲，有可能读错行或读串行；人们的视点从文本的一端移到另一端、然后换到下一行的行首，如果眼球移动浮动过大，他们的注意力就会减退，容易读不下去。所以，为了最大效率的使用大屏幕显示器，页面设计中需要限制文本的宽度，让文本按多列呈现，就像报纸上的新闻排版一样

  1. 常用属性：

    a. column-count: 属性设置列的具体个数

    b. column-width: 属性控制列的宽度

    c. column-gap: 两列之间的缝隙间隔

    d. column-rule: 规定列之间的宽度、样式和颜色

    e. column-span: 规定元素应横跨多少列(n:指定跨n列 all:跨所有列)

  2. 多列的用法：

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
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .wrapper{
        width:1054px;
        padding:20px;
        margin:0 auto;
        font-family: "微软雅黑",Arial;
        /*设置以几列的方式显示*/
        column-count:2;
        /*指定列宽*/
        column-width:500px;
        /*指定列与列之间的间距*/
        column-gap: 50px;
        /*指定列与列之间间隙的样式*/
        /*column-rule:2px dotted red*/
        /*相对应下面的三个属性*/
        column-rule-color:red;
        column-rule-style:dotted;
        column-rule-width:2px;
    }
    .wrapper > h4{
        column-span: all;
    }
</style>

  1. 列高度的平衡：

    如果设定列的最大高度，这个时候，文本内容会从第一列开始填充，然后第二列，第三列

max-height: 300px;

二：伸缩布局

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便。CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。

  1. 重要属性

    a. display:flex:如果一个容器设置了这个属性，那么这个盒子里面的所有直接子元素都会自动的变成伸缩项(flex item)

    b. justify-content: 设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式,语法：justify-content：flex-start | flex-end | center | space-between | space-around

  • flex-start：弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。

  • flex-end：弹性盒子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。

  • center：弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐，同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距（如果剩余空间是负数，则保持两端相等长度的溢出）。

  • space-between：弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数，或该行只有一个子元素，则该值等效于\’flex-start\’。在其它情况下，第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。

  • space-around：弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数，或该行只有一个伸缩盒项目，则该值等效于\’center\’。在其它情况下，伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。

    c. flex-flow: flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。它用来设置或检索弹性盒模型对象的子元素排列方式,它的两种取值：flex-direction：定义弹性盒子元素的排列方向。flex-wrap：控制flex容器是单行或者多行。

​ flex-direction： flex-direction：row | row-reverse | column | column-reverse

  • row：主轴与行内轴方向作为默认的书写模式。即横向从左到右排列（左对齐）。

  • row-reverse：对齐方式与row相反。

  • column：主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。

  • column-reverse：对齐方式与column相反。

    flex-wrap： flex-wrap：nowrap | wrap | wrap-reverse

    • nowrap：flex容器为单行。该情况下flex子项可能会溢出容器

    • wrap：flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行

    • wrap-reverse：反转 wrap 排列。

d) flex属性：flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选

​ 语法：flex: [flex-grow][flex-shrink] [flex-basis]：大多数情况下没必要使用这种语法，当使用flex缩写时，大多数情况下没必要使用这种语法

​ flex: [number]：这个语法指定了一个数字，代表了这个伸缩项目该占用的剩余空间比例​

​ flex: auto：属性值被设为auto的伸缩项目，会根据主轴自动伸缩以占用所有剩余空间

  1. 案例-携程网页面：

    a. 主要技术点:display:flex; | flex-wrap:wrap;

    b. 效果：

图片1

c. div结构：

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
<div class="layout">
    <header>
        <div class="banner">
            <a href="">
                <img src="../images/banner.jpg" alt="">
            </a>
        </div>
    </header>
    <div class="main">
        <div class="item">
            <div class="pub"></div>
            <div class="sub">
                <a href="javascript:;">海外酒店</a>
                <a href="javascript:;">团购</a>
                <a href="javascript:;">特惠酒店</a>
                <a href="javascript:;">客栈公寓</a>
            </div>
        </div>
        <div class="item">
            <div class="pub"></div>
            <div class="sub">
                <a href="javascript:;">海外酒店</a>
                <a href="javascript:;">团购</a>
                <a href="javascript:;">特惠酒店</a>
                <a href="javascript:;">客栈公寓</a>
            </div>
        </div>
        <section class="extra">
            <a href="javascript:;">
                <img src="../images/extra_1.png">
            </a>
            <a href="javascript:;">
                <img src="../images/extra_2.png">
            </a>
        </section>
    </div>
    <footer>
        <nav>
            <a href="javascript:;">电话预订</a>
            <a href="javascript:;">下载客户端</a>
            <a href="javascript:;">我的</a>
        </nav>
        <!-- 版本信息 -->
        <div class="copyright">
            <!-- 网站链接 -->
            <p class="link">
                <a href="javascript:;">网站地图</a> |
                <a href="javascript:;">ENGLISH</a> |
                <a href="javascript:;">电脑版</a>
            </p>
            <p>&copy;2015 携程旅行</p>
        </div>
    </footer>
</div>

d. 样式：

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .layout{
        min-width: 320px;
    }
    header{

    }
    .banner{
        display: flex;
    }
    .banner > a{
        flex: 1;
    }
    .banner > a >  img{
        width:100%;
        height:auto;
        display: block;
    }

    footer{
        width:100%;
    }
    footer > nav{
        display: flex;
    }
    footer > nav > a{
        flex: 1;
        text-align: center;
        text-decoration: none;
        color: #666;
        font-size: 12px;
        line-height:40px;
        border-top:1px solid #ccc;
        border-bottom:1px solid #ccc;
    }
    .copyright > p {
        padding-top:10px;
        text-align: center;
        font-size: 12px;
    }
    .copyright > p > a{
        padding:0 5px;
        text-decoration: none;
        color: #666;
    }

    .main{
        padding:5px;
    }
    .main > .item{
        margin-top: 5px;
        display: flex;
        height:90px;
        border-radius: 5px;
    }
    .main > .item:nth-child(1){
        background-color: #ff697a;
    }
    .main > .item > .pub{
        flex: 1;
        border-top:1px solid #fff;
    }
    .main > .item > .sub{
        flex: 2;
        display: flex;
        flex-wrap: wrap;
    }
    .main > .item > .sub > a{
        width:50%;
        height: 45px;
        text-align: center;
        line-height:45px;
        color: white;
        text-decoration: none;
        font-size: 13px;
        border-left:1px solid #fff;
        border-top:1px solid #fff;
        box-sizing: border-box;
    }
    .main .extra{
        display: flex;
    }
    .main .extra > a{
        flex: 1;
    }
    .main .extra > a > img{
        width:100%;
    }
</style>

三：web字体：

开发人员可以为自已的网页指定特殊的字体，无需考虑用户电脑上是否安装了此特殊字体，从此把特殊字体处理成图片的时代便成为了过去。它的支持程度比较好，甚至IE低版本浏览器也能支持。

  1. 字体格式

    不同浏览器所支持的字体格式是不一样的，我们有必要了解一下有关字体格式的知识。

    1、TureTpe(.ttf)格式

    .ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；

    2、OpenType(.otf)格式

    .otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；

    3、Web Open Font Format(.woff)格式

    woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；

    4、Embedded Open Type(.eot)格式

    .eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+；

    5、SVG(.svg)格式

    .svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+

  2. 字体图标

    常见的是把网页常用的一些小的图标，借助工具帮我们生成一个字体包，然后就可以像使用文字一样使用图标了

    a. 优点

    • 将所有图标打包成字体库，减少请求；
    • 具有矢量性，可保证清晰度；
    • 使用灵活，便于维护

b. 生成字体图标文件

a) 下载字体图标文件：如https://www.awesomes.cn/的网站的介绍和使用

图片2

b) 自定义字体

1
2
3
4
5
6
7
8
9
/*定义字体图标*/
@font-face {
    font-family: 'wjs'; //自定义的字体名称
    src: url('../fonts/MiFie-Web-Font.eot'); /* IE9*/
    src: url('../fonts/MiFie-Web-Font.eot') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/MiFie-Web-Font.woff') format('woff'), /* chrome、firefox */
    url('../fonts/MiFie-Web-Font.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('../fonts/MiFie-Web-Font.svg') format('svg'); /* iOS 4.1- */
}

c) 通过css样式使用字体

1
2
3
4
5
6
7
8
/*自定义字体图标*/
.wjs_font_icon{
    font-family: wjs; //这里对应着自定义的字体名称
}
/*手机图标对应的编码*/
.wjs_font_icon_phone::before{
    content: "\e908"; //指定显示的内容
}

四：综合案例：

如果觉得文本对您有帮助，欢迎打赏