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

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

来看看具体实现过程。

            
hello world!!
        

2. 轮廓 outline

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

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

border 的语法是 border 后面有三个属性，分别是：

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

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

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

需要注意：

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

效果演示

3. 缩放属性 resize

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

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

属性值	解释
none	用户不能调节元素的尺寸（默认值）
both	用户可以调节元素的宽度和高度
horizontal	用户可以调节元素的宽度
vertical	用户可以调节元素的高度

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

4. 分栏布局 column

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

属性	解释
column-count:number;	栏的数量控制
column-gap:长度单位；	栏与栏之间的距离
column-rule	宽度，颜色

            
我是divA
        
我是divB
        
我是divC
        

但是我们发现，随着我们将窗口去拉伸，我们的 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

                
                
11111
                
22222
                
33333
            
            

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

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

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

弹性布局2.html

            
              
头部
              
内容
              
底部
          
        

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

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