cssデバッグスタイル整理

1366 ワード

以前はプロジェクト开発、开発の知识をばらばらにメモして、ずっと整理して総括したくなくて、今ブログを书いて整理しましょう

css編


1.divのコンテンツを垂直に中央に配置する方法
ないぶピッチほう
padding-top: 4px;
padding-right: 4px;
padding-bottom: 4px;
padding-left: 4px;

2.divに枠線スタイルを表示させるにはどうすればいいですか?.divcss5{border:1px solid #F00}
3.CSS 3フィレット(border-radius)
-mozはFirefox-webkitはSafariとChromeに使用されます.たとえば
#round {
padding:10px; width:300px; height:50px;
border: 5px solid #dedede;
-moz-border-radius: 15px;      /* Gecko browsers */
-webkit-border-radius: 15px;   /* Webkit browsers */
border-radius:15px;            /* W3C syntax */
}

4.web携帯のフォント適応
cssメソッド
@media screen and (min-width: 320px) {
html {font-size: 12px;}
}
@media screen and (min-width: 360px) {
html {font-size: 14px;}
}
@media screen and (min-width: 400px) {
html {font-size: 16px;}
}
@media screen and (min-width: 440px) {
html {font-size: 18px;}
}
@media screen and (min-width: 480px) {
html {font-size: 20px;}
}
@media screen and (min-width: 640px) {
html {font-size: 26px;}
}

ラベルはfont-size:1.0 remで、フォントsizeは画面に合わせて適応します.
5.段落内のテキストを改行しないようにする:
p{
white-space: nowrap
}

normalデフォルト.空白はブラウザに無視されます.nowrapテキストは改行されず、ラベルに遭遇するまでテキストは同じ行で続行されます.pre-wrapは空白文字シーケンスを保持しますが、通常は改行します.pre-lineは空白のシーケンスを結合しますが、改行は保持されます.