cssデバッグスタイル整理
1366 ワード
以前はプロジェクト开発、开発の知识をばらばらにメモして、ずっと整理して総括したくなくて、今ブログを书いて整理しましょう
css編
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は空白のシーケンスを結合しますが、改行は保持されます.
padding-top: 4px;
padding-right: 4px;
padding-bottom: 4px;
padding-left: 4px;
#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 */
}
@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;}
}
p{
white-space: nowrap
}