請各位讀者添加一下作者的微信公眾號，以后有新的文章，將在微信公眾號直接推送給各位，非常感謝。
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 后面有三個屬性，分別是：
- 邊框顏色
- 邊框寬度
- 邊框類型
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） |
