有的時(shí)候是不是想在自己的網(wǎng)頁(yè)中,用自己設(shè)計(jì)的字體呢?那么請(qǐng)看下面!
嵌入web字體
能夠加載服務(wù)器的字體文字，讓客戶端顯示客戶端沒有安裝的字體
語(yǔ)法:
@font-face{
? font-family:<你的web字體的名稱>;
src：url(“字體路徑”);
font-weight:bold;
}
@font-face{
/*定義字體*/
font-family:"我的字體";
src:url("font/CooperBlackStd.otf");
}
div{
font-family: "我的字體";
/*引用字體*/
}
p{
font-family: "CooperBlackStd";
}
你還在為特殊的邊框效果而苦惱嗎?
box-sizing:border-box;怪異盒模型(為元素指定任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度進(jìn)行繪制)
outline外輪廓效果 跟border呈現(xiàn)效果極其相似鸠儿，但不占網(wǎng)頁(yè)布局空間。它在元素取得焦點(diǎn)或者被激活時(shí)呈現(xiàn),下面的例子你可以試試.
div{
width: 100px;
height: 100px;
background-color: red;
border: 10px dashed black;
}
p{
width: 100px;
height: 100px;
background-color: red;
outline: 10px dashed black;
/*box-sizing:border-box 怪異盒模式
outline 外輪廓效果 修飾樣式 不占文本空間*/
}
還記當(dāng)年的報(bào)紙排版嗎?當(dāng)你的網(wǎng)頁(yè)樣式也有此樣式需求時(shí),看看下面吧!
分欄布局
/分欄屬性/
column-count：number锻梳；欄的數(shù)量控制
column-gap：長(zhǎng)度單位衫画；欄之間的距離
column-rule：寬度睡榆，顏色场航；欄欄之間的見隔線缠导，類似border
div{
/欄（列）的屬性 分成幾欄/
-webkit-column-count:3;
-moz-column-count:3;
-o-column-count:3;
column-count:3;
下面的是代碼實(shí)例,去試試吧!
/*欄之間的寬度*/
-webkit-column-gap:100px;
-moz-column-gap:100px;
-o-column-gap:100px;
column-gap:100px;
/*欄之間的分隔線 寬度 顏色*/
-webkit-column-rule:5px dashed red;
column-rule:5px dashed red;
}
flex-box：彈性布局
優(yōu)點(diǎn)：
1適應(yīng)性強(qiáng)，在做不同屏幕分辨率的界面式都非常實(shí)用
2.可以隨意按照寬度溉痢。比例劃分元素寬高
3酬核，可以輕松改變?cè)氐捻樞?br>
4.自適應(yīng)布局實(shí)現(xiàn)快捷，易維護(hù)
彈性盒模型
display：box;將一個(gè)元素的子元素以彈性布局進(jìn)行布局
-webkit-box-orient:vertical;子元素的排列順序（橫向或豎向）horizontal
box-diraction:normal|reverse(倒序)子元素的排列順序
-webkit-box-flex:1;子元素如何分配剩余空間
box-align:start|end|center 子元素垂直對(duì)齊方式
box-pack:start|end|center 子元素的水平對(duì)齊方式
flexbox是布局模塊适室，它包含父元素和子元素的屬性
flexbox布局的主題思想是元素改變大小適應(yīng)可用空間，當(dāng)空間變大時(shí)举瑰，flex元素將伸展大小以填充可用空間捣辆，當(dāng)flex元素超出可用空間時(shí)將自動(dòng)縮小，總之此迅，flex元素是可以讓你的布局根據(jù)瀏覽器的大小變化自動(dòng)進(jìn)行伸縮的
彈性布局flex-box
注意:優(yōu)先以橫向布局
代碼實(shí)例!!!!!!(如有不懂自行理解)
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
.wrap{
height: 100%;
/*在父級(jí)聲明彈性盒模型*/
display: -webkit-box;
/*彈性盒模型默認(rèn)是水平布局 可以設(shè)置為垂直布局*/
/*-webkit-box-orient:vertical;*/
}
.wrap div{
/*width: 200px;*/
/*height: 100px;*/
}
.con1{
background-color:red;
-webkit-box-flex:2;
}
.con2{
background-color:blue;
-webkit-box-flex:1;
/*設(shè)置當(dāng)前快變成彈性模型汽畴，填充剩余內(nèi)容 必要條件父級(jí)設(shè)置彈性盒模型*/
}
.con3{
background-color: yellow;
/*填充比例*/
-webkit-box-flex:1;
}
