web嵌入字體
@font-face{
font-family: "字體名字";
src:url("路徑");
font-weight:bold;
}
例
@font-face{
font-family: "123";
src:url("font/BlackoakStd.otf");
}
div{
font-family: "123";
}
box-sizing:border-box;
寬高固定 邊框不在往外撐 而是向內(nèi)占內(nèi)容
outline 和border效果相似 但不占網(wǎng)頁空間
outline: 10px dashed black;
resize
將textarea的大小拖動(dòng)關(guān)閉 resize:none不能修改 both可修改寬高 horizontal只改寬度 vertical 只能改高度l inherit
textarea{
width: 100px;
height: 50px;
resize:none;}
給div設(shè)置拖動(dòng)
div{
width: 100px;
height: 100px;
background-color: red;
resize:both;
overflow: hidden;
}
分欄
column-count: 3; 欄的數(shù)量
column-gap:100px;欄之間的距離
column-rule: 5px dashed red;分割線
例
div{
/*列的數(shù)量*/
-webkit-column-count: 3;
-moz-column-count: 3;
-o-column-count: 3;
column-count: 3;
/*列之間的距離*/
column-gap:100px;
-webkit-column-gap:100px;
/*分割線*/
column-rule: 5px dashed red;
-webkit-column-rule: 5px dashed red;
}
彈性盒模型
display: -webkit-box; 將一個(gè)元素的子元素以彈性布局進(jìn)行布局
-webkit-box-orient: vertical;子元素的排列方式（豎向）默認(rèn)橫向
-webkit-box-direction:reverse;（逆序）子元素的排列順序
-webkit-box-flex:1;子元素如何分配剩余空間
-webkit-box-align:center;子元素的垂直對齊方式 start左 end右 center居中
-webkit-box-pack:center;子元素的水平對齊方式
