cssシリーズ(1)-ビジネスコードで使用できるテクニック

ようこそissues斧正:cssテクニック

ビジネスコードで使用可能なCSSテクニック

chromeの下の10 pxフォントに対応

p {
    font-size: 10px;
    -webkit-transform: scale(.83);
}

この方法は、フロントエンドページでより小さなフォントを表示する必要があり、ブラウザと互換性がある場合に便利です.

テキストオーバーフロー省略記号を表示...

p {
    display:block;
    white-space:nowrap; 
    overflow:hidden; 
    text-overflow:ellipsis;
}

この方法はフロントエンドページのフォールトトレランスに非常に有効です.1つの要素の内容が多すぎると、表示が終わらず、省略記号がユーザーの体験をよりよくすることができます.要素の幅が制限されていない場合、コンテンツが多すぎるとテキストがオーバーフローし、ユーザー体験に深刻な影響を及ぼします.

要素にhoverグラデーション効果を追加

div {
    width:200px;
    height:200px;
    transition: box-shadow .5s;
    -moz-transition: box-shadow .5s;
    -webkit-transition: box-shadow .5s;
    -o-transition: box-shadow .5s;
}
div:hover {
    box-shadow: 0 14px 20px #666;
}

マウスが通過するとシャドウ効果があり、マウスが離れて回復します.

中央div

一般的なmarginメソッド:

div { 
    width:200px;
    margin:0 auto;
}

幅1/2のmargin、50%のleft、topメソッド:

div {        
    Width:500px ; 
    height:300px;      
    Margin: -150px 0 0 -250px;        
    position:relative;       
    background-color:pink;      
    left:50%;
    top:50%;     
}

LTRB値が0の方法:

div { 
    width: 400px;
    height: 300px; 
    margin:auto;
    position: absolute; 
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0;
}

transformメソッド

div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

テキスト要素があれば、外パンをdivにして、中のline-height=height:

p {
    height:30px;
    line-height:30px;
}

flexフレキシブルボックスレイアウトが中央:

div {
    display: flex;
    flex-flow: row wrap;
    width: 408px; 
    align-items: center; 
    justify-content: center;
} 

デフォルトの継承

デフォルト継承:font-size font-family colorなど、要素にはUL LI DL DD DTなどがあります.継承不可:border padding margin width heightなどの要素サイズを表す属性.

フローティングのクリア

最後にdiv空ラベルを使用してフローティングをクリアします(div以外はdisplay:blockが必要です)が、この方法ではDOMに不要な要素が追加され、あまり使われていません.

.clear{clear:both;} 

overflowプロパティを使用します.widthまたはzoom:1を定義する必要があります.heightを定義することはできません.hiddenまたはautoのoverflowプロパティを適用すると、含まれるフローティング要素が自動的にクリーンアップされます.

div {
    float:none;
    overflow:hidden; 
} 

親divに擬似クラスを定義する:afterとzoom(zoomはIE 6.7専属)

.clearfix:after{
    content:'';
    height:0;
    display:block;
    visibility:hidden;
    clear:both
}

最大幅と高さの互換性

height:autoを使用する場合は、エラーを許容するために要素の最大または最小の幅の高さを考慮する必要があります.

div {
    min-height:500px;
    height:auto;
    max-width:500px;
    width:auto;
}

义齿

email me
a {cursor:not-allowed;}

cursorその他の一般的なプロパティ

default        （       ）
auto         。        。
crosshair          。
pointer                （   ）
move                   。
text              。
wait                （         ）。
help                 （            ）。

Windows font&&mac font互換

* {
    font-family: "PingFang SC","microsoft yahei",Arial,Helvetica,sans-serif;
}

「PingFang SC」はmacの下でマイクロソフトの黒に近いフォントで、「microsoft yahei」は「マイクロソフトの黒」と同じですが、中国語(GB 2312)の文字には対応していないサイトもあります.英語のほうがいいです.Arialは主に文字の数字に使われています.

イベントをブロック

email me
a {pointer-events:none;}

テキストの選択を禁止

* {
    -moz-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

aラベルhover

クリックされてアクセスされたハイパーリンクスタイルはhoverとactiveを持つスタイルではありません.解決策はCSS属性の配列順序を変更することです:L-V-H-A（link,visited,hover,active）

CSSは簡単なスライド効果を書きます

div {
      width:480px;
      height:320px;
      margin:50px auto;
      overflow: hidden;
      box-shadow:0 0 5px rgba(0,0,0,1);
      background-size: cover;
      background-position: center;
      -webkit-animation-name: "loops";
      -webkit-animation-duration: 20s;
      -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes "loops" {
    0% {background:url(0.jpg) no-repeat;}
    25% {background:url(1.jpg) no-repeat;}
    50% {background:url(2.jpg) no-repeat;}
    75% {background:url(3.jpg) no-repeat;}
    100% {background:url(4.jpg) no-repeat;}
}

rgba()とopacity

rgba()とopacityは透明な効果を実現できますが、最大の違いはopacityが要素に作用し、要素内のすべての内容の透明度です.

div {
    opacity:0.5;
}

一方rgba()は、要素の色または背景色にのみ作用します.rgbaの透明な要素を設定するサブ要素は、透明な効果を継承しません.

div {
    background: rgba(255,255,0,0.8);
  }

フィレットの使用

div {  
    -moz-border-radius: 5px;  
    -webkit-border-radius: 5px;  
    border-radius: 5px;  
}

!important

css優先度:!important>インラインスタイル>id>class>tagなので、使用!importantの場合は注意が必要です.

擬似クラスの使用

p:first-of-type親要素に属する最初のp要素を選択します.p:last-of-type親要素に属する最後のp要素を選択します.p:only-of-type親要素に属する唯一のp要素を選択します.p:only-child親要素に属する唯一の子要素を選択します.p:nth-child(n)親要素に属するn番目のサブ要素を選択します.:enabled:disabledはフォームコントロールの無効化状態を制御します.:checkedラジオボックスまたはチェックボックスが選択されています::selectionマッチングユーザーが選択した選択は部分的です

义齿

positionリファレンス記事:css相対位置決めと絶対位置決めの詳細

    



.parent{
    position: absolute;  //         
    border: 1px solid #ccc;
    height: 200px;
    width: 200px;
}
.child{
    position: relative;  //         
    left: 100px;
    top:100px;
    background: blue;
    height: 50px;
    width: 50px;
}

relative：

    TRBL，        position  ，                。
    TRBL，      position  ，               ，   TRBL  。     Padding  ，               ，    。
                    ，       ，            。

absolute:

    TRBL，        position  ，     absolute                ，    TRBL  。    
    TRBL，      position  ，               ，   TRBL   。              ，   padding        。    
            “  ”   “    ” “    ”       。             ，                。
             ，                     ，                   。

新しいプロパティの使用

    （box-shadow）
    （text-shadow、）    
transform:rotate(9deg)scale(0.85,0.90)translate(0px,-30px)skew(-9deg,0deg);//   ,  ,  ,  
     @media (min-width: 1280px)
border-image           border-image: url(border.png) 27/27px round;
    （gradient） linear-gradient       radial-gradient