CSS関連のヒント

IE10、IE11ブラウザで入力テキストテキストボックスをクリックすると、テキスト入力後に削除機能のある×ボタンが表示されます。

Aコロンを削除する方法。

readonly

: 編集不可、フォーカス不可、背景色はデフォルトで透明、フォントカラーはデフォルトで前景色、chorme および ie はサポートされません。Firefox はサポートしません。 readonly 属性をサポートします (属性内で定義:

onfocus="this.blur()"

)

disabled

: 編集できません、フォーカスを取得できません、背景色のデフォルトはグレー、フォントの色のデフォルトはグレー、値はできませんLabel 属性 (readonly) の大文字と小文字はその効果に影響しませんが、js の DOM は厳密に大文字と小文字を区別します (readOnly)。

Firefox の CSS 使用プラグインは、重複または未使用の CSS ルールを表示できます。各ページを 1 回スキャンする方が、自動スキャンよりも正確です。

Firefox は、background-position-x/y 属性をサポートしていません。代わりに、background-position:X Y を使用してください。

位置が固定されている要素の場合、幅は適応可能な最小幅となり、行全体を占有することはありません。

表のセルは自動的に縮小され、オーバーフロー属性は使用できません。 width 属性が固定幅に設定されている場合でも、最小のテキスト幅まで縮小されます。本当に固定幅を設定したい場合は、td で p をネストし、p の幅を設定できます。または、テーブルの table-layout:fixed 属性を使用します。

テーブルの最初の行は、テーブル全体のセル幅を決定します。

コンテンツに応じてテーブルの幅を調整したい場合は、white-space:nowrap 属性を追加するだけです。特にIE、その他のブラウザでは幅が自動的に調整されます。

ブラウザのサイズを変更しますか?

font の省略に関する注意事項

1. 省略する場合、font-size と line-height は、slash/ によって 1 つの値のみを形成でき、別々に記述することはできません。

font: italic ボールド .8em/1.2 Arial, sans-serif; // ファミリ間で使用され、番号

2 の順序は変更できません。同時に指定するだけで動作します。さらに、font-weight、font-style、および font-variant を設定しない場合は、デフォルト値が使用されます

ページが中央にあるときにスクロール バーがジャンプしないようにする方法:

マージンがある場合のみ-left は自動です。表示されますか? スクロール バーの値が変化し、ページがジャンプします。

1.body { overflow-y:scroll; } //オーバーフローを超えるとスクロールバーが表示され、オーバーフローを超えない場合は醜い灰色のスクロールバーが残ります

2.wrap-outer {margin-left: calc(100vw - 100%);} //左側のスクロールバーの幅をあらかじめ確保しておきます

//calc()は四則演算を実行できるcss3の関数です(前後にスペースが必要です)

)、パーセンテージ、px、em 、rem およびその他の単位を混合できます// 100vw はスクロール バーの幅を含むビューポートの幅を指し、100% はスクロール バーを除いたビューポートの幅です。スクロール・バー。

margin-leftが固定値の場合はジャンプしません。スクロール バーが最上位レイヤーに表示され、下のコンテンツが非表示になります。

解像度が異なると、表示される幅も異なります

.abc{ height:300px; border:1px solid #000; margin:0 auto} //通用样式
@media screen and (min-width: 1201px) { //设置了浏览器宽度不小于1201px时 abc 显示1200px宽度
      .abc {width: 1200px}
}
@media screen and (max-width: 1200px) {//设置了浏览器宽度不大于1200px时 abc 显示900px宽度
      .abc {width: 900px}
}

注: CSS コードの順序、CSS を大きいものから小さいものに植字します (ブラウザの幅が大きいほど、高いと判断してください)

ブロック要素はデフォルトで 1 行を占めます。幅が十分でない場合は自動的に折り返されます。white-space:nowrap 属性を使用して強制的に改行を行わないようにすることができます。

子要素に width=100% を設定すると、ボーダーがある場合、子要素の幅が親要素の固定幅を超えます。

box-sizing: content-box|border-box|inherit;//ボックスモデルが幅と高さを計算する方法を指定します。

content-box: 幅と高さは要素のコンテンツ ボックスにのみ適用され、要素のパディングと境界線は幅と高さの外側に描画されます。

border-box: 要素に指定されたパディングとボーダーは、設定された幅と高さの範囲内で描画されます。

.cf:after, .cf:before {content: " "; display: table;}

.cf:after {clear: Both;}

: before は、テーブル タイプが独立した BFC を生成できるためです。上記の高さの崩壊、

: 後はフロートをクリアし、親の高さの崩壊を防ぐ役割を果たします。コードは少なく、効率が高くなります。

画像と可変サイズの複数行テキストの垂直方向と水平方向の中央揃え?

1. 親コンテナを display:table に設定して固定の高さを与え、子コンテナを display:table-cell に設定し、vertical-align:middle 属性を使用します (テーブルとインライン要素で有効)。

または: 親コンテナは相対位置を使用する必要があります。position:relative; 子コンテナは絶対位置を使用する必要があります。top:50%;left:50%

margin-top

の値は半分です。コンテナの高さと幅の負の値。

または:

親要素の相対位置、子コンテナの絶対位置、top:0、bottom:0、margin:auto、計算は必要ありません。 同時に水平方向に中央揃えしたい場合は、position:relative属性を使用するか、pの別のレイヤーを追加してmargin:auto属性を使用します。

複数列のコンテンツは固定されておらず、高さが等しい CSS ハック:

親コンテナの設定 overflow:hidden; 子要素: margin-bottom:9999px;

每个p都增加相同的高度，内容少的增加的p会被父容器hidden掉。

  label标签的for 属性规定 label 与哪个表单元素绑定。

隐式和显式的联系

例如，在 XHTML 中：

显式的联系：

<labelfor="SSN">SocialSecurity Number:</label>
<inputtype="text" name="SocSecNum" id="SSN" />

隐式的联系：

<label>Date of Birth: <inputtype="text" name="DofB" /></label>

第一个标记是以显式形式将文本 "Social Security Number:" 和表单的社会安全号码的文本输入控件 ("SocSecNum") 联系起来，它的 for 属性的值和控件的 id 一样，都是 SSN。第二个标记 ("Date of Birth:") 不需要 for 属性，它的相关控件也不需要 id 属性，它们是通过在 2e1cf0710519d5598b1f0f14c36ba674 标签中放入 d5fd7aea971a85678ba271703566ebfd 标签来隐式地连接起来的。

 ie8之前不支持opacity属性，需要使用滤镜：filter:alpha(opacity=30);  /* IE 4-9 */ 

IE专有的滤镜属性filter是只适用于 layout 元素的，也就是说如果你给一个p设置透明用的是filter:alpha(opacity=80);如果你没有让p触发hasLayout，那么这个透明将无效。需要另外设置zoom：1；这个属性进行触发。

 a32b6b784e0bd382bf2765eccb4a2120IE8开始添加的属性，指定浏览器去模拟某个特定版本的IE浏览器的渲染方式，解决IE的兼容性问题。

   background-origin: 规定 background-position 属性相对于什么位置来定位。

padding-box      背景图像相对于内边距框来定位；（默认）

border-box背景图像相对于边框盒来定位；

content-box背景图像相对于内容框来定位。

background-position ：设置背景图像的起始位置。

默认值：0% 0%（从背景图的左上点开始）；如果只设置一个值，另一个值将为“居中”（50%/center）

background-size:取值（IE8不支持此属性）

百分比/length：背景图的尺寸相对于背景区域的长度。只设一个，第二个为auto（会保持比例不变，不变形）。

如果都设为100%，则背景图会铺满背景区域，但长宽比率会跟着变化。

contain:背景区域按背景图的固定比例包含整个背景图。背景图的尺寸以背景图按固定比例扩大，其任意一条边到达背景区域的边界为止，经常会导致另一边空白。

cover:背景图按固定长宽比缩放至填充满整个背景区域，有一边的背景图会因超出背景区域而被切除。

IE8兼容：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='绝对路径',sizingMethod='scale/crop');

      crop : 背景图大小不变，剪切图片以适应区域尺寸。

      image : 默认值。增大或减小区域的尺寸边界以适应背景图的尺寸，相当于overflow：visible的效果。

      scale : 缩放背景图以适应区域的尺寸边界。

①不能指定任意大小background百分比②只适于单张图片不能使用图片精灵等拼图③要引用绝对路径图片④兼容ie7，8

 JPG：有损压缩，压缩比例高，体积小，打开快。不支持透明，色彩丰富，数码相机最常用的格式，压缩比率高。

PNG：无损压缩，体积大。

      png8：支持透明/不透明，体积小，256种颜色，适合颜色比较单一的图像，如纯色、logo、图标等。

      png24：支持半透明，体积稍大，1600万种颜色，适合颜色比较丰富的图片。

更多css相关tips相关文章请关注PHP中文网！