CSS3_html/css_WEB-ITnose の不人気なプロパティのいくつか

時々、自分の Web ページで独自にデザインしたフォントを使用したいことがありますか? その場合は、以下を参照してください。

埋め込み Web フォント

サーバーのフォント テキストをロードして、クライアントにそのフォントを表示させることができます。インストールされていません

のフォント

语法:@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;怪异盒模型(为元素指定任何内边距和边框都将在已设定的宽度和高度进行绘制)

ログイン後にコピー

outline外轮廓效果 跟border呈现效果极其相似，但不占网页布局空间。它在元素取得焦点或者被激活时呈现,下面的例子你可以试试.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  外轮廓效果 修饰样式 不占文本空间*/}

ログイン後にコピー

あなたの Web ページのスタイルにもこのスタイルが必要なときは、まだ覚えていますか?

列のレイアウト

/列のプロパティ/列-数: 列の数を制御します。列-ギャップ: 長さの単位です。列の規則: 幅、色、 border div{/Column (column) 属性と同様に、複数の columns/ -webkit-column-count:3; -o-column-count:3; に分割されます。

以下はコード例です。試してみてください!

 /*栏之间的宽度*/ -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: 柔軟なレイアウト

利点:

1 強力な適応性、さまざまな画面解像度のインターフェイスを作成するのに非常に実用的 2.幅に合わせて自由自在。要素の幅と高さを比例的に分割します 3、要素の順序を簡単に変更できます 4. アダプティブ レイアウトは高速で保守が簡単です

柔軟なボックス モデル

display: box; 要素の子要素を柔軟なレイアウトでレイアウトします。 -webkit-box- orient:vertical;子要素の配置順序（水平または垂直）horizo​​ntalbox-diraction:normal|reverse（逆順）子要素の配置順序-webkit-box-flex:1;子要素の割り当て方法残りのスペース box-align:start |end|center 子要素の垂直方向の配置 box-pack:start|end|center 子要素の水平方向の配置 flexbox は、親要素と子要素のプロパティを含むレイアウト モジュールです。フレックスボックス レイアウトのテーマの考え方は、スペースが大きくなると、フレックス要素が利用可能なスペースを満たすようにサイズを変更し、フレックス要素が利用可能なスペースを超えると、自動的に縮小します。つまり、flex 要素は、ブラウザのサイズに応じてレイアウトを自動的に拡大および縮小できるようにする伸縮性のあるレイアウト フレックスです。