H5学习_番外篇_CSS3其他属性_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:22:58
Original
922 people have browsed it

二维码.jpg

0.今日课程大纲

  • 服务器端字体: font-face
  • 轮廓: outline
  • 缩放属性: resize
  • 分栏布局: column
  • 弹性布局: flex-box

1. 服务器端字体 font-face

我们在第三天CSS 样式中,学习了一个属性叫做 font-family,他的作用是定义你所使用的字体具体是哪一种,但是仅对有对应字体的电脑有效。例如常见的字体有宋体或者黑体等,这些我们的电脑一般系统自带的字体库中都会直接安装好。

但是我们假如想更改一下字体什么的?让我们的用户看到的字体和我们在自己电脑上设置的字体是一样的,那又该怎么做呢?

我们在这里介绍一个概念,就是服务器字体,属性为 @font-face。它的作用是能够加载服务器端的字体文件,让客户端显示客户端所没有安装的字体。那具体该怎么实现?

首先,你需要在网上下载你所需要的字体文件库,放入你的 font(字体目录,根据自己电脑情况来) 目录中。

其次就是将下载的文件放入你的页面中,这时候也就要用到我们的属性 font-face了。

    @font-face{        font-family:“你的web字体名称”;        src:url(“字体路径”);        font-weight:bold;    }
Copy after login

来看看具体实现过程。

    <!DOCTYPE html>    <html lang="en">    <head>        <meta charset="UTF-8">        <title>Document</title>        <style type="text/css">        /*@font-face {            font-family: "唐菜也体";            src: url("fonts/FuturaBTLtIt.otf");        }        div{            font-family: "唐菜也体";            font-size: 50px;        }*/        @font-face{            font-family: "郜慧姣体";            src: url("fonts/FuturaBTHv.otf");        }        div{            font-family: "郜慧姣体";            font-size: 30px;        }        </style>    </head>    <body>        <div>hello world!!</div>    </body>    </html>
Copy after login

2. 轮廓 outline

轮廓是绘制于元素周围的一条线,,位于位置边缘的外围,可以起到突出元素的作用。

根据定义可以发现和边框 border 是非常类似的一个东西。

border 的语法是 border 后面有三个属性,分别是:

  1. 边框颜色
  2. 边框宽度
  3. 边框类型

outline是围绕元素。它是围绕元素的边距。但是,它是来自不同的边框属性。

outline不是元素尺寸的一部分,因此元素的宽度和高度属性不包含轮廓的宽度。

需要注意:

我在某网站上查询,说是请始终在 outline-color 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的颜色。 ,但是在实际的测试过程中,我发现网站给出的效果并没有生效,无论你是在你 style 之前设置,还是之后设置,实际都会发生颜色的改变,当然也可能是我个人出错,如果有读者发现存在问题,请及时联系我。

效果演示

    <!DOCTYPE html>    <html lang="en">    <head>        <meta charset="UTF-8">        <title>Document</title>        <style type="text/css">        *{            padding: 0;            margin: 0;        }        div{            width: 100px;            height: 100px;            border: 10px red solid;            outline: dotted green 10px;        }        p{            width: 50px;            height: 50px;            background: pink;        }        </style>    </head>    <body>        <div></div>        <p></p>    </body>    </html>
Copy after login

3. 缩放属性 resize

我们可以通过给一个元素的宽度和高度去固定这个元素的大小,有时候我们需要去拉伸这个元素的宽度和高度。我们可以到源代码中去改变他的宽度和高度,但是这样显得非常麻烦,那么我们该如何去在页面中直接调节他的宽度和高度呢?

在 CSS3 中添加了一个新的属性 resize ,它叫做 缩放属性,它适用于所有元素,方便之处在于用户可以直接到页面中调节元素的宽度和高度。

属性值 解释
none 用户不能调节元素的尺寸(默认值)
both 用户可以调节元素的宽度和高度
horizontal 用户可以调节元素的宽度
vertical 用户可以调节元素的高度
    <!DOCTYPE html>    <html lang="en">    <head>        <meta charset="UTF-8">        <title>Document</title>        <style type="text/css">        textarea{            resize:both;        }        div{            width: 100px;            height: 100px;            background-color: #ccc;            resize: both;        }        </style>    </head>    <body>        <textarea></textarea>        <div></div>    </body>    </html>
Copy after login

我们给一个 textarea 元素还有一个 div 元素分别设置了resize:both 之后,按照语法来说,这两个元素都可以进行拉伸,但实际上,只有 textarea 元素可以进行拉伸,而 div 元素却不可以,原因是,除了 textarea 元素之外,其他元素想要使用缩放,必须设置 overflow 属性(overflow:visible 除外)。

    <!DOCTYPE html>    <html lang="en">    <head>        <meta charset="UTF-8">        <title>Document</title>        <style type="text/css">        textarea{            resize:both;        }        div{            width: 100px;            height: 100px;            background-color: #ccc;            resize: both;            overflow: auto;        }        </style>    </head>    <body>        <textarea></textarea>        <div></div>    </body>    </html>
Copy after login

4. 分栏布局 column

在我们经常阅读的报纸中,一般下一个版面会被分成多个列去进行排版,在 CSS3出台之前,实现这个效果需要非常多的代码,而CSS3规范中对多栏布局进行了定义,我们可以使用 CSS表单样式轻松搞定这个效果。

属性 解释
column-count:number; 栏的数量控制
column-gap:长度单位; 栏与栏之间的距离
column-rule 宽度,颜色
    <!DOCTYPE html>    <html lang="en">    <head>      <meta charset="UTF-8">      <title>分栏</title>      <style type="text/css">      body{          /*设置分栏数*/        -webkit-columns: 3;        -moz-columns: 3;        -o-columns: 3;        columns: 3;        /*设置间距 100px*/        -webkit-column-gap: 100px;        -moz-column-gap: 100px;        -o-column-gap: 100px;        column-gap: 100px;        /*设置分栏间隔线*/        -webkit-column-rule: 10px solid red;        -moz-column-rule: 10px solid red;        -o-column-rule: 10px solid red;        column-rule: 10px solid red;      }      div{        height: 50px;        margin-top: 10px;        background-color: cyan;      }      </style>    </head>    <body>        <div>我是divA</div>        <div>我是divB</div>        <div>我是divC</div>    </body>    </html>
Copy after login

但是我们发现,随着我们将窗口去拉伸,我们的 column-rule还停留在原位置,需要重新刷新才能适应界面,这是我们现在不好解决的,所以接下来要介绍另外一种布局方式,弹性布局。

5. 弹性布局 flex-box

引用一下别人打得比方,“box-flex”直译为“房子-分配”,假如马林大叔省吃俭用一辈子,终于在上海郊外买了间150平米的商品房。后来,马林大叔想回老家养老,决定把房子分配给他的三个儿子。

ok,先暂停下,这里提到的“房子”就是”box-flex”中的”box”,“分配”就是”box-flex”中的”flex”,于是,这个“分配房子”的举动就称为”box-flex”,而box-flex属性的值就是说的如何分配,分配比例是什么。

继续我们的例子,马林大叔的三个儿子分别叫做大马,中马和小马,其中大马已经结婚多年,有一堆双胞胎女儿,拖家带口的人多;而中马和小马是优秀的光棍人士。

所以,大马要求分配更多的房子,最终,家人一番协商有了下面的分配结果,就是:

    #大马 { 房子-分配: 2; }    #中马 { 房子-分配: 1; }    #小马 { 房子-分配: 1; }
Copy after login

如果装换成CSS表示就是:

    #first_boy { box-flex: 2; }    #second_boy { box-flex: 1; }    #three_boy { box-flex: 1; }
Copy after login

box-flex的含义与作用理解瞬间柳暗花明:用来按比例分配父标签的宽度(或高度)空间。

box-flex的值为至少为1的整数时起作用。但是,仅仅一个box-flex属性是不足以实现子元素间的空间分配,因为还要看其老爸的意思。

只有父元素同意了,几个孩子才能分配这房子,所以,父元素中也是需要添加声明的,体现在代码中就是:

    #father { display: box; }
Copy after login

display: box;的声明其实就是弹性盒模型的声明。

我们试着将上面的案例写成代码:

弹性布局1.html

    <!DOCTYPE html>    <html>        <head>            <meta charset="utf-8">            <title></title>            <style type="text/css">                *{                    padding: 0;                    margin: 0;                }                .father{                    display: box;                    display: -webkit-box;                    display: -moz-box;                    display: -o-box;                }                .one{                    box-flex:2;                    -webkit-box-flex:2;                    -moz-box-flex:2;                    -o-box-flex:2;                    background: red;                }                .two{                    background: pink;                }                .three{                    background: blue;                }                .two,.three{                    box-flex:1;                    -webkit-box-flex:1;                    -moz-box-flex:1;                    -o-box-flex:1;                }            </style>        </head>        <body>            <div class="father">                <div class="son one">11111</div>                <div class="son two">22222</div>                <div class="son three">33333</div>            </div>        </body>    </html>
Copy after login

上面的案例是三个子元素按照一定的比例去分配父元素的宽度,接下来再来看第二个案例,

当第一个头元素和最后一个尾部元素给了固定的高度之后,中间的内容元素如何自适应屏幕的高度,

使得三个子元素占据满屏的高度。

弹性布局2.html

    <!DOCTYPE html>    <html lang="en">    <head>      <meta charset="UTF-8">      <title>弹性布局</title>      <style type="text/css">        *{          margin: 0px;          padding: 0px;        }        body,html,.wrap{          height: 100%;        }        .wrap{          /*开启弹性盒子 让子元素弹性自适应布局*/          display: -webkit-box;          /*弹性布局盒子中 子元素的排列方式(横向或者竖向)horizontal(默认横向)*/          -webkit-box-orient:vertical;          /*翻转 子元素的排列顺序*/          -webkit-box-direction:reverse;        }        .header{          height: 100px;          background-color: cyan;        }        .content{          background-color: #ccc;          /*占据剩余的空间*/          -webkit-box-flex:2;        }        .footer{          height: 100px;          background-color: orange;        }      </style>    </head>    <body>          <div class="wrap">              <div class="header">头部</div>              <div class="content">内容</div>              <div class="footer">底部</div>          </div>    </body>    </html>
Copy after login

当然,除了按比例分配父元素的宽度或者高度之后,我们还有一些其他的属性。这里不做更多介绍。

属性 含义
box-orient 子元素的方向,默认是横排(horizontal:横着排;vertical:竖着排。)
box-direction 子元素的排列顺序,默认是正常(normal:正常;reverse:反转。)
box-align 子元素在垂直方向上的对齐表现(start 、end、center)
box-pack 子元素在水平方向上的对齐表现(start、end、center)
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!