css FAQ
スクロールバーを非表示にし、コンテンツ1をスクロールできます.スクロールバーの幅を計算し、非表示にしてページを右に一定の距離だけオフセットします.絶対位置決めまたはtranslateを使用できます.2.3つの容器で囲み、スクロールバーの幅を計算する必要はありません未知のcssスクロールバーを隠すこの方法はIEに互換性がなく、移動端として使用できます.それはカスタムスクロールバーの擬似オブジェクトセレクタです:-webkit-scrollbar
chromeとSafari:.element::-webkit-scrollbar { width: 0 !important }
IE 10+: .element { -ms-overflow-style: none; }
Firefox: .element { overflow: -moz-scrollbars-none; }
ボックスモデルコンテンツ領域content areaは、要素の実際のコンテンツを含む領域です.通常、背景、色、またはピクチャなどが含まれ、コンテンツ境界の内部に位置し、コンテンツ幅またはcontent-box幅、およびコンテンツ高さまたはcontent-box高さである.box-sizingがデフォルトの場合、width、min-width、max-width、height、min-height、max-heightはコンテンツサイズを制御します.内側余白領域padding areaはpaddingを囲む枠線まで延びている.コンテンツ領域content areaが背景、色、またはピクチャを設定している場合、これらのスタイルはpaddingに拡張されます(コンテンツ領域だけでなく).内側エッジ境界の内部に位置し、padding-box幅とpadding-box高さです.内側余白とコンテンツ境界との間の空間はpadding-top,padding-right,padding-bottom,padding-leftおよび略記属性paddingによって制御することができる.枠線領域border areaは、枠線を含む領域であり、内側余白領域を拡張している.枠線境界の内部にあり、border-box幅とborder-box高さです.border-widthおよび略記属性borderによって制御されます.外側距離領域margin areaは、隣接する要素を分離するために、空白領域で枠線領域を拡張する.その大きさはmargin-boxの高さと幅です.外距離領域のサイズはmargin-top,margin-right,margin-bottom,margin-leftおよび略記属性marginによって制御される.外距合并の场合、ボックス间で外距を共有するため、外距が分かりにくい.最後に、非置換の行内要素では、コンテンツの周囲に内側の余白と枠線があるにもかかわらず、その占有スペース(行の高さ)はline-heightプロパティによって決定されることに注意してください.非置換要素と置換要素置換要素置換要素とは、ブラウザがそのラベルの要素と属性に基づいて表示の具体的な内容を判断することである.たとえばinputタグは,未入力時と入力後のブラウザの状態が異なる.input,textarea,img,select,objectはいずれも置換要素であり,これらの要素には実際の内容はない.非置換要素(X)HTMLのほとんどの要素は置換できない要素であり、ブラウザに直接伝えて表示します.例えばpラベル、ブラウザは直接コンテンツを表示します.箱モデルの標準モードと怪異モード標準モード:box-sizing:content-box;
怪異モード:box-sizing:border-box;
2つのパターンの違い:
標準モードは設定されたpaddingで開かれ、怪異モードは箱の大きさを固定して箱に入れることに相当します.箱の大きさはpaddingに支えられない.
標準モード:ボックスの合計幅/高さ=コンテンツ領域の幅/高さ+padding+border+margin.
怪異モード:箱の総幅/高さ=width/height+margin.
スタイルシートを使用して外部スタイルシートを使用し、linkラベルを使用して内部スタイルシートを導入し、headラベルのstyleラベルのインラインスタイルシートにスタイルを書き込み、htmlラベルに直接cssセレクタを書き込むスタイルにはどのようなタイプがありますか?グローバルセレクタ(例えば*)タグセレクタ(例えばbody,htmlタグ)idセレクタ(例えばid="id_name"#id_name{...})classセレクタ(例えばclass="class-name".class-name".class-name{...})コンビネーションセレクタ:html,body,注意逗号などのパケットセレクタの直接子孫セレクタ(例えば.parent>.son,注意>)隣接セレクタ(例えばdiv+p,注意+)兄弟セレクタ(例えばdiv~p,注意~)子孫セレクタ(例えばdiv p,注意スペース)擬似クラスセレクタ(例えばaラベルの:link,:visited,:hover,:active)属性セレクタ(例えばp[title="content"),p[title~="content",p[title^="content")css 3に追加された擬似クラスセレクタp:first-of-typeは、その親要素に属する最初のp要素の各p要素を選択する.p:last-of-type親要素に属する最後のp要素の各p要素を選択します.p:only-of-type親要素に属する唯一のp要素の各p要素を選択します.p:only-child親要素に属する一意のサブ要素の各p要素を選択します.p:nth-child(N)親要素に属するN番目のサブ要素の各p要素を選択します.enabled、:disabledはフォームコントロールの無効化状態を制御します.:checked、ラジオボックスまたはチェックボックスが選択されています.cssセレクタの優先度計算方法?セレクタの優先度は大きいから小さい!importantキーワード(重みは無限大で、使用は推奨されません.いつ同じプロパティに複数使用するか分かりません!important)インラインスタイル(重みは1000で表すことができます)idセレクタ(重みは0100で表すことができます)クラスセレクタまたはプロパティセレクタまたは擬似クラスセレクタ(重みは0010で表すことができます)ラベルセレクタ(重みは0001で表すことができます)グローバルセレクタ*(重みが最も低く、使用を推奨、殺傷範囲が大きすぎる)Firefoxなどのブラウザのすべてのクラス名(classes)は8バイト文字列で格納、8バイトでできるholdの最大値は255である.256個のclassが同時に現れると、必ずその縁を越えてid領域に溢れ出すと思います.
Operaブラウザclassクラス名の格納は16バイトの文字列である.したがって,このブラウザでclassがidにオーバーフローするには65536個のclassを連続する必要がある.
ハイパーリンクのダミークラスのスタイル順L-V-H-A(:link,:visited,:hover,:active)
css hackとは?IEのcss hackはどう書きますか?異なるブラウザに対して異なるcssコードを書くのがcss hackです
IEのcss hack IE 9:単行スタイルの後ろに9を付け、例えばcolor:blue9;IE 7:単行スタイルの前に+を付け、例えば+color:blue;IE 6:単行スタイルの前に_を付け、例えば_color: blue\9; 行内の要素とブロックレベルの要素の違いは何ですか?それらのwidth、height、margin、paddingはすべて設定することができますか?ブロックレベル要素の再レイアウトでは、常に1行が個別に占められ、隣接する他のコンテンツは常に次の行から開始されます.そのwidth、height、margin、paddingはすべて設定できます.
インライン要素は自分のコンテンツのサイズのみを占め、他の隣接するコンテンツと1行で表示できます.そのwidth、height、margin-top、margin-bottom、padding-top、padding-bottomは設定できませんが、margin-left、margin-right、padding-left、padding-rightは設定できます.
インライン・ブロック・レベルの要素も、自分のコンテンツのサイズのみを占め、他の隣接するコンテンツと1行表示できますが、width、height、margin、paddingは設定できます.
外の距離が重なるのは何ですか.重なった結果は何ですか?外距離の重なりはmargin-collapseであり,CSSでは隣接する2つの箱(兄弟関係かもしれないし祖先関係かもしれない)の外距離を単独の外距離に結合することができる.このような外距離を結合する方法を折り畳みと呼び、したがって、結合された外距離を折り畳み外距離と呼ぶ.
折りたたみ結果は、隣接する2つの外側距離が正の場合、折りたたみ結果は両方の間の大きな値になります.2つの隣接する外距離がいずれも負数の場合,折り畳み結果は両者の絶対値の大きな値である.2つの外側の距離が正と負の場合、折りたたみ結果は両者の加算和である.rgba()とopacityの透明効果は何が違いますか?opacityは要素自体および要素の内容に作用し、rgba()は要素の色または背景色に作用し、サブ要素は継承されません.
cssで文字を垂直方向と水平方向に重ねることができる2つの属性は何ですか?垂直方向:line-height水平方向:letter-spacing letter-spacing inline-block要素の改行によるスペースギャップの問題を解消できます(font-size:0;または可能)
どのようにして要素を中心にしますか?絶対位置と負の外側余白の親コンテナは相対位置を使用し、要素は絶対位置と負の余白を使用します.例:
固定位置と負の外側余白要素は、固定位置と負の余白を使用します.例:
絶対位置決めにtranslateの親コンテナを追加するには相対位置決めを使用し、要素は絶対位置決めにtranslateを使用します.例:
固定位置決めにtranslate要素を追加固定位置決めにtranslateを追加します.例:
親要素flexレイアウトを使用するには、次のようにします.
親要素はtableレイアウトを使用します.たとえば、次のようにします.
cssではlinkと@importの違いlinkはHTMLタグに属しますが、@importはcssが提供するページロード時にlinkが並列にロードされ、@importはcssロードが完了した後に参照のスタイルをロードします@importはie 5以上で認識されますが、linkはHTMLタグで互換性の問題はありません.linkが導入したスタイルの重みは@importの参照より大きい.3列レイアウトを実現するにはどうすればいいですか?1.親コンテナは相対位置決めを使用し、両側paddingに絶対位置決めを加える.flexレイアウト(推奨)3を使用する.tableレイアウトを使う(推奨しない)BFCとは何ですか?BFCは全称block formatting context、BFCもHTMLの中の1つの箱(見えないだけ)で、少なくとも以下の条件の1つを満たすだけでBFCを形成することができる:float属性はnoneではない.position属性はstaticとrelativeではない.displayプロパティは、table-cell、table-caption、inline-block、flex、またはinline-flexのいずれかです.overflow属性はvisibleではない.BFCの作用:margin collapseを取り除くことができて浮動を取り除くことができてどのように浮動clear属性を取り除くことができて擬似クラスをプラスしてoverflow属性を使って、BFC zoom属性を形成してclearをプラスして擬似クラスをプラスします
chromeとSafari:.element::-webkit-scrollbar { width: 0 !important }
IE 10+: .element { -ms-overflow-style: none; }
Firefox: .element { overflow: -moz-scrollbars-none; }
ボックスモデルコンテンツ領域content areaは、要素の実際のコンテンツを含む領域です.通常、背景、色、またはピクチャなどが含まれ、コンテンツ境界の内部に位置し、コンテンツ幅またはcontent-box幅、およびコンテンツ高さまたはcontent-box高さである.box-sizingがデフォルトの場合、width、min-width、max-width、height、min-height、max-heightはコンテンツサイズを制御します.内側余白領域padding areaはpaddingを囲む枠線まで延びている.コンテンツ領域content areaが背景、色、またはピクチャを設定している場合、これらのスタイルはpaddingに拡張されます(コンテンツ領域だけでなく).内側エッジ境界の内部に位置し、padding-box幅とpadding-box高さです.内側余白とコンテンツ境界との間の空間はpadding-top,padding-right,padding-bottom,padding-leftおよび略記属性paddingによって制御することができる.枠線領域border areaは、枠線を含む領域であり、内側余白領域を拡張している.枠線境界の内部にあり、border-box幅とborder-box高さです.border-widthおよび略記属性borderによって制御されます.外側距離領域margin areaは、隣接する要素を分離するために、空白領域で枠線領域を拡張する.その大きさはmargin-boxの高さと幅です.外距離領域のサイズはmargin-top,margin-right,margin-bottom,margin-leftおよび略記属性marginによって制御される.外距合并の场合、ボックス间で外距を共有するため、外距が分かりにくい.最後に、非置換の行内要素では、コンテンツの周囲に内側の余白と枠線があるにもかかわらず、その占有スペース(行の高さ)はline-heightプロパティによって決定されることに注意してください.非置換要素と置換要素置換要素置換要素とは、ブラウザがそのラベルの要素と属性に基づいて表示の具体的な内容を判断することである.たとえばinputタグは,未入力時と入力後のブラウザの状態が異なる.input,textarea,img,select,objectはいずれも置換要素であり,これらの要素には実際の内容はない.非置換要素(X)HTMLのほとんどの要素は置換できない要素であり、ブラウザに直接伝えて表示します.例えばpラベル、ブラウザは直接コンテンツを表示します.箱モデルの標準モードと怪異モード標準モード:box-sizing:content-box;
怪異モード:box-sizing:border-box;
2つのパターンの違い:
標準モードは設定されたpaddingで開かれ、怪異モードは箱の大きさを固定して箱に入れることに相当します.箱の大きさはpaddingに支えられない.
標準モード:ボックスの合計幅/高さ=コンテンツ領域の幅/高さ+padding+border+margin.
怪異モード:箱の総幅/高さ=width/height+margin.
スタイルシートを使用して外部スタイルシートを使用し、linkラベルを使用して内部スタイルシートを導入し、headラベルのstyleラベルのインラインスタイルシートにスタイルを書き込み、htmlラベルに直接cssセレクタを書き込むスタイルにはどのようなタイプがありますか?グローバルセレクタ(例えば*)タグセレクタ(例えばbody,htmlタグ)idセレクタ(例えばid="id_name"#id_name{...})classセレクタ(例えばclass="class-name".class-name".class-name{...})コンビネーションセレクタ:html,body,注意逗号などのパケットセレクタの直接子孫セレクタ(例えば.parent>.son,注意>)隣接セレクタ(例えばdiv+p,注意+)兄弟セレクタ(例えばdiv~p,注意~)子孫セレクタ(例えばdiv p,注意スペース)擬似クラスセレクタ(例えばaラベルの:link,:visited,:hover,:active)属性セレクタ(例えばp[title="content"),p[title~="content",p[title^="content")css 3に追加された擬似クラスセレクタp:first-of-typeは、その親要素に属する最初のp要素の各p要素を選択する.p:last-of-type親要素に属する最後のp要素の各p要素を選択します.p:only-of-type親要素に属する唯一のp要素の各p要素を選択します.p:only-child親要素に属する一意のサブ要素の各p要素を選択します.p:nth-child(N)親要素に属するN番目のサブ要素の各p要素を選択します.enabled、:disabledはフォームコントロールの無効化状態を制御します.:checked、ラジオボックスまたはチェックボックスが選択されています.cssセレクタの優先度計算方法?セレクタの優先度は大きいから小さい!importantキーワード(重みは無限大で、使用は推奨されません.いつ同じプロパティに複数使用するか分かりません!important)インラインスタイル(重みは1000で表すことができます)idセレクタ(重みは0100で表すことができます)クラスセレクタまたはプロパティセレクタまたは擬似クラスセレクタ(重みは0010で表すことができます)ラベルセレクタ(重みは0001で表すことができます)グローバルセレクタ*(重みが最も低く、使用を推奨、殺傷範囲が大きすぎる)Firefoxなどのブラウザのすべてのクラス名(classes)は8バイト文字列で格納、8バイトでできるholdの最大値は255である.256個のclassが同時に現れると、必ずその縁を越えてid領域に溢れ出すと思います.
Operaブラウザclassクラス名の格納は16バイトの文字列である.したがって,このブラウザでclassがidにオーバーフローするには65536個のclassを連続する必要がある.
ハイパーリンクのダミークラスのスタイル順L-V-H-A(:link,:visited,:hover,:active)
css hackとは?IEのcss hackはどう書きますか?異なるブラウザに対して異なるcssコードを書くのがcss hackです
IEのcss hack IE 9:単行スタイルの後ろに9を付け、例えばcolor:blue9;IE 7:単行スタイルの前に+を付け、例えば+color:blue;IE 6:単行スタイルの前に_を付け、例えば_color: blue\9; 行内の要素とブロックレベルの要素の違いは何ですか?それらのwidth、height、margin、paddingはすべて設定することができますか?ブロックレベル要素の再レイアウトでは、常に1行が個別に占められ、隣接する他のコンテンツは常に次の行から開始されます.そのwidth、height、margin、paddingはすべて設定できます.
インライン要素は自分のコンテンツのサイズのみを占め、他の隣接するコンテンツと1行で表示できます.そのwidth、height、margin-top、margin-bottom、padding-top、padding-bottomは設定できませんが、margin-left、margin-right、padding-left、padding-rightは設定できます.
インライン・ブロック・レベルの要素も、自分のコンテンツのサイズのみを占め、他の隣接するコンテンツと1行表示できますが、width、height、margin、paddingは設定できます.
外の距離が重なるのは何ですか.重なった結果は何ですか?外距離の重なりはmargin-collapseであり,CSSでは隣接する2つの箱(兄弟関係かもしれないし祖先関係かもしれない)の外距離を単独の外距離に結合することができる.このような外距離を結合する方法を折り畳みと呼び、したがって、結合された外距離を折り畳み外距離と呼ぶ.
折りたたみ結果は、隣接する2つの外側距離が正の場合、折りたたみ結果は両方の間の大きな値になります.2つの隣接する外距離がいずれも負数の場合,折り畳み結果は両者の絶対値の大きな値である.2つの外側の距離が正と負の場合、折りたたみ結果は両者の加算和である.rgba()とopacityの透明効果は何が違いますか?opacityは要素自体および要素の内容に作用し、rgba()は要素の色または背景色に作用し、サブ要素は継承されません.
cssで文字を垂直方向と水平方向に重ねることができる2つの属性は何ですか?垂直方向:line-height水平方向:letter-spacing letter-spacing inline-block要素の改行によるスペースギャップの問題を解消できます(font-size:0;または可能)
どのようにして要素を中心にしますか?絶対位置と負の外側余白の親コンテナは相対位置を使用し、要素は絶対位置と負の余白を使用します.例:
.parent {
position: relative;
}
.son {
position: absolute;
top: 50%;
height: 50%;
margin-top: /* */;
margin-bottom: /* */;
}
固定位置と負の外側余白要素は、固定位置と負の余白を使用します.例:
.son {
position: fixed;
top: 50%;
height: 50%;
margin-top: /* */;
margin-bottom: /* */;
}
絶対位置決めにtranslateの親コンテナを追加するには相対位置決めを使用し、要素は絶対位置決めにtranslateを使用します.例:
.parent {
position: relative;
}
.son {
position: absolute;
top: 50%;
height: 50%;
transform: translate(-50%, -50%);
}
固定位置決めにtranslate要素を追加固定位置決めにtranslateを追加します.例:
.son {
position: fixed;
top: 50%;
height: 50%;
transform: translate(-50%, -50%);
}
親要素flexレイアウトを使用するには、次のようにします.
.parent {
display: flex;
justify-content: cneter;
align-content: center;
align-item: center;
}
親要素はtableレイアウトを使用します.たとえば、次のようにします.
.parent {
display: table-cell;
text-align: center;
vertical-align: middle;
}
cssではlinkと@importの違いlinkはHTMLタグに属しますが、@importはcssが提供するページロード時にlinkが並列にロードされ、@importはcssロードが完了した後に参照のスタイルをロードします@importはie 5以上で認識されますが、linkはHTMLタグで互換性の問題はありません.linkが導入したスタイルの重みは@importの参照より大きい.3列レイアウトを実現するにはどうすればいいですか?1.親コンテナは相対位置決めを使用し、両側paddingに絶対位置決めを加える.flexレイアウト(推奨)3を使用する.tableレイアウトを使う(推奨しない)BFCとは何ですか?BFCは全称block formatting context、BFCもHTMLの中の1つの箱(見えないだけ)で、少なくとも以下の条件の1つを満たすだけでBFCを形成することができる:float属性はnoneではない.position属性はstaticとrelativeではない.displayプロパティは、table-cell、table-caption、inline-block、flex、またはinline-flexのいずれかです.overflow属性はvisibleではない.BFCの作用:margin collapseを取り除くことができて浮動を取り除くことができてどのように浮動clear属性を取り除くことができて擬似クラスをプラスしてoverflow属性を使って、BFC zoom属性を形成してclearをプラスして擬似クラスをプラスします