HTML5学习_番外篇_CSS3其他属性

请各位读者添加一下作者的微信公众号,以后有新的文章,将在微信公众号直接推送给各位,非常感谢。


二维码.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;
    }

来看看具体实现过程。

    <!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>

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>

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>

我们给一个 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>

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>

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

5. 弹性布局 flex-box

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

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

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

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

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

如果装换成CSS表示就是:

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

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

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

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

    #father { display: box; }

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>

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

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

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

弹性布局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>

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

属性 含义
box-orient 子元素的方向,默认是横排(horizontal:横着排;vertical:竖着排。)
box-direction 子元素的排列顺序,默认是正常(normal:正常;reverse:反转。)
box-align 子元素在垂直方向上的对齐表现(start 、end、center)
box-pack 子元素在水平方向上的对齐表现(start、end、center)

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 9,811评论 1 88
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 1,828评论 0 5
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 2,110评论 0 24
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 730评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 799评论 0 9