ホームページ > 記事 > ウェブフロントエンド > HTMLとCSSの重要な知識と難しい知識のまとめ

HTMLとCSSの重要な知識と難しい知識のまとめ

小云云オリジナル: 2018-03-02 10:33:171890ブラウズ

この記事では主にHTMLとCSSの重要かつ難しい知識ポイントをまとめてお伝えしますので、お役に立てれば幸いです。

幅と高さを可変にして垂直方向と水平方向に p を中央に配置する方法

親ボックスに設定するだけです: display: justify-content: center;align-items: center;

CSS3 変換を使用します

親ボックスの設定:position:relative

p 設定:transform:translate(-50%,-50%);position:absolute;top:50%;left:50%;

display:table を使用しますcell メソッド

親ボックスの設定:display:table-cell; text-align:center;vertical-align:middle;

p 設定:display:inline-block;vertical-align:middle;

2.position いくつかの属性

position の 4 つの一般的な属性値は、相対、絶対、固定、静的です。通常、「left」、「top」、「right」、「bottom」属性と組み合わせて使用されます。

静的: デフォルトの場所。通常の状況では、特に宣言する必要はありませんが、継承が発生した場合、要素によって継承された属性がそれ自体に影響するのを見たくない場合があるため、Position:static を使用して継承をキャンセルできます。要素の位置をデフォルト値に戻します。静的に設定された要素は、常にページフローによって指定された位置に配置されます (静的要素は、上、下、左、または右の宣言を無視します)。一般的にはあまり使われない。

relative: 相対的な位置決め。相対位置は、他の要素に何が起こるかに関係なく、要素の上、右、下、左のオフセット値はすべて元の位置に基づいてオフセットされます。相対的に移動された要素は、依然として元の位置のスペースを占有していることに注意してください。
absolute: 絶対的な位置決め。絶対に設定された要素の場合、その親コンテナに位置属性が設定されており、その位置属性値が絶対または相対である場合、親コンテナに従ってオフセットされます。親コンテナが位置プロパティを設定していない場合、オフセットは本体に基づきます。絶対属性が設定された要素は、標準フロー内の位置を占めないことに注意してください。
fixed: 位置を固定しました。位置が固定に設定されている要素は、ブラウザウィンドウを基準にして指定された座標に配置できます。要素は、ウィンドウがスクロールされているかどうかに関係なく、その位置に留まります。それは常に身体に基づいています。固定属性が設定された要素は、標準フロー内の位置を占めないことに注意してください。

float のフローティングとクリア
3.1 フローティング関連知識
float 属性の値:

left: 要素は左にフロートします。

right: 要素は右にフロートします。
none: デフォルト値。要素はフロート表示されず、テキスト内のどこにでも表示されます。

フローティングの特徴:

フローティング要素は通常のドキュメントフローから分離されますが、フローティング要素はそれ自体に影響を与えるだけでなく、周囲の要素の配置や周囲の要素にも影響を与えます。

要素がインライン要素であってもブロックレベル要素であっても、float に設定すると、floating 要素はブロックレベルのボックスを生成し、その幅と高さを設定できるため、float がよく使用されます。横に並べたメニューを作成し、サイズを設定して横に並べることができます。

フローティング要素の表示には、状況に応じて異なるルールが適用されます。

フローティング要素がフローティングである場合、そのマージンは、それを含むブロックのパディングを超えません。 PS: 要素を超えたい場合は、margin 属性を設定できます

2 つの要素のうちの 1 つが左にフロートし、もう 1 つが右にフロートする場合、左側のフローティング要素の marginRight は、次の marginLeft に隣接しません。右側の浮動要素。
フローティング要素が複数ある場合、フローティング要素は重ならないように順番に配置されます。
複数のフローティング要素がある場合、次の要素の高さは前の要素を超えず、含まれるブロックを超えることはありません。
非浮動要素と浮動要素が同時に存在し、非浮動要素が前にある場合、浮動要素は非浮動要素よりも高くなりません。
浮動要素は上に揃えられます。

オーバーラップの問題

インライン要素がフローティング要素に重なると、その境界線、背景、コンテンツがフローティング要素の上に表示されます

ブロックレベルの要素がフローティング要素に重なると、境界線と背景はフローティング要素の下に表示され、コンテンツはフローティング要素の上に表示されます

要素のクリア属性

clear 属性: 現在の要素の左側と右側にフローティング要素がないことを確認します。 clear は要素自体のレイアウトにのみ影響します。
値: left、right、両方
3.2 親要素の高さの崩壊の問題
float と親要素の高さの崩壊をクリアする必要があるのはなぜですか?
親要素の高さの崩壊の問題を解決します: ブロックレベルの要素が設定されていない場合height、その高さはの子要素によってサポートされます。子要素で float を使用すると、子要素は標準のドキュメントフローから外れます。つまり、親要素には高さを拡張するコンテンツがないため、親要素の高さは無視されます。いわゆる高さ崩れです。
3.3 float をクリアする方法
方法 1: 親 p の高さを定義する
原理: 親 p に固定の高さ (高さ) を定義することで、親 p が高さを取得できない問題を解決できます。
長所: コードが簡潔です。
短所: 高さが固定されているため、固定内容のモジュールに適しています。 (非推奨)
方法 2:

などの空の要素を使用する

(.clear{clear:both})
原理：添加一对空的 p 标签，利用 css 的 clear:both 属性清除浮动，让父级 p 能够获取高度。
优点：浏览器支持好
缺点：多出了很多空的 p 标签，如果页面中浮动模块多的话，就会出现很多的空置 p 了，这样感觉视乎不是太令人满意。（不推荐使用）
方法三：让父级 p 也一并浮起来
这样做可以初步解决当前的浮动问题。但是也让父级浮动起来了，又会产生新的浮动问题。不推荐使用
方法四：父级 p 定义 display:table
原理：将 p 属性强制变成表格
优点：不解
缺点：会产生新的未知问题。（不推荐使用）
方法五：父元素设置 overflow：hidden、auto；
原理：这个方法的关键在于触发了 BFC。在 IE6 中还需要触发 hasLayout（zoom：1）
优点：代码简介，不存在结构和语义化问题
缺点：无法显示需要溢出的元素（亦不太推荐使用）
方法六：父级 p 定义伪类: after 和 zoom

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

.clearfix {zoom:1;}
原理：IE8 以上和非 IE 浏览器才支持: after，原理和方法 2 有点类似，zoom(IE 转有属性) 可解决 ie6,ie7 浮动问题
优点：结构和语义化完全正确, 代码量也适中，可重复利用率（建议定义公共类）
缺点：代码不是非常简洁（极力推荐使用）
经益求精写法

.clearfix:after { 
content:”\200B”; 
display:block; 
height:0; 
clear:both; 
} 
.clearfix {*zoom:1;} 照顾 IE6，IE7 就可以了

4.BFC 相关知识
定义：BFC(Block formatting context) 直译为 “块级格式化上下文”。它是一个独立的渲染区域，只有 Block-level box 参与，它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干。
BFC 布局规则
BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

BFC 这个元素的垂直方向的边距会发生重叠，垂直方向的距离由 margin 决定，取最大值
BFC 的区域不会与浮动盒子重叠（清除浮动原理）。
计算 BFC 的高度时，浮动元素也参与计算。

哪些元素会生成 BFC

根元素
float 属性不为 none
position 为 absolute 或 fixed
display 为 inline-block， table-cell， table-caption， flex， inline-flex
overflow 不为 visible

5.box-sizing 是什么
设置 CSS 盒模型为标准模型或 IE 模型。标准模型的宽度只包括 content，二 IE 模型包括 border 和 padding
box-sizing 属性可以为三个值之一：

content-box，默认值，只计算内容的宽度，border 和 padding 不计算入 width 之内
padding-box，padding 计算入宽度内
border-box，border 和 padding 计算入宽度之内

6.px，em，rem 的区别
px 像素 (Pixel)。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果 px 要换算成物理长度，需要指定精度 DPI。
em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。
rem 是 CSS3 新增的一个相对单位 (root em，根 em)，使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是 HTML 根元素。
7.CSS 引入的方式有哪些? link 和 @import 的区别是?
有四种：内联 (元素上的 style 属性)、内嵌 (style 标签)、外链 (link)、导入 (@import)
link 和 @import 的区别：

link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务；@import 属于 CSS 范畴，只能加载 CSS。
link 引用 CSS 时，在页面载入时同时加载；@import 需要页面网页完全载入以后加载。
link 是 XHTML 标签，无兼容问题；@import 是在 CSS2.1 提出的，低版本的浏览器不支持。
link 支持使用 Javascript 控制 DOM 去改变样式；而 @import 不支持。

流式布局与响应式布局的区别
流式布局
使用非固定像素来定义网页内容，也就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进
行伸缩，不受固定像素的限制，内容向两侧填充。
响应式开发
利用 CSS3 中的 Media Query(媒介查询)，通过查询 screen 的宽度来指定某个宽度区间的网页布局。

超小屏幕 (移动设备) 768px 以下
小屏设备 768px-992px
中等屏幕 992px-1200px
宽屏设备 1200px 以上

レスポンシブ開発はより面倒であるため、作業の一部を完了するためにブートストラップなどのサードパーティのレスポンシブフレームワークを使用して行われるのが一般的です。もちろん、レスポンシブ開発を自分で作成することもできます。
違い

-
フローレイアウト
レスポンシブ開発

開発方法
モバイルWeb開発+PC開発
レスポンシブ開発

アプリケーションシナリオ
一般的に、すでにPC Webサイトを持っている場合、Webサイトを開発するときに別途開発するだけで済みます。モバイル版モバイル端末
一部の新規構築ウェブサイトではモバイル端末への対応が求められるようになり、一連のページが様々な端末に対応

開発
強力な連携と高い開発効率
様々な端末に対応し低効率

適応性
モバイルデバイスにのみ適応されており、パッドでのエクスペリエンスは比較的劣っています
さまざまな端末に適応可能です

効率性
コードはシンプルで読み込みが速いです
コードは比較的複雑で読み込みに時間がかかります

プログレッシブエンハンスメントとグレースフルデグラデーション
主な違いは、重点を置くコンテンツと、その違いによって生じるワークフローの違いです

エレガントなダウングレードは、最初から完全な機能を構築し、その後、下位バージョンのブラウザと互換性を持たせます。。
プログレッシブ拡張では、最も基本的な機能を保証するために低バージョンのブラウザー用のページを構築し、効果やインタラクションを改善し、高度なブラウザー用の追加機能を追加して、より良いユーザーエクスペリエンスを実現します。

違い:

グレースフルデグレードは複雑な現状から始まり、ユーザーエクスペリエンスの提供を削減しようとします
プログレッシブエンハンスメントは非常に基本的な機能バージョンから始まり、将来の環境のニーズに適応するために拡張し続けます
ダウングレード(機能的減衰) は過去を振り返ることを意味しますが、プログレッシブ強化はその基盤が安全領域にあることを確認しながら、将来を見据えることを意味します

10. CSS 非表示要素のいくつかの方法と違い
display:none

要素は完全に消えます。要素が元々占有していたスペースは他の要素によって占有されるため、ブラウザのリフローと再描画が発生します。
クリックイベントはトリガーされません

visibility:hidden

display:none の違いは、要素がページから消えた後も、その要素が占有するスペースは保持されるため、ブラウザーは再描画を行わないだけです。再描画。
クリックイベントはトリガーできません
要素が非表示になった後にページレイアウトが変更されることが予想されないシナリオに適しています

opacity:0

要素の透明度を 0 に設定した後、私たちの目にはユーザーの場合、要素も非表示になります。これは要素を非表示にする方法とみなされます。
と Visibility:hidden の共通点の 1 つは、要素が非表示になった後もスペースを占有することですが、透明度を 0 に設定した後は要素が非表示になるだけで、ページ上にまだ存在することは誰もが知っています。
クリックイベントをトリガーできます

高さや幅などのボックスモデルの属性を0に設定します

簡単に言えば、要素のマージン、境界線、パディング、高さと幅、および要素ボックスモデルに影響を与えるその他の属性を0に設定します要素に子がある場合、要素またはコンテンツもその子要素を非表示にするために overflow:hidden を設定する必要があります。これは一種のトリックです。
要素のborder、padding、その他の属性が0以外に設定されている場合、要素が引き続きページ上に表示されることは明らかであり、要素のクリックイベントをトリガーすることに問題はありません。すべての属性が 0 に設定されている場合、要素が消えることは明らかです。つまり、クリックイベントをトリガーできません。
この方法は実用的ではなく、いくつかの問題がある可能性があります。ただし、私たちが通常使用する一部のページ効果は、要素の overflow:hidden を設定し、次に timer 、 margin-bottom 、 border-top を通じて要素の高さと margin-top を継続的に設定する jquery の slideUp アニメーションなど、この方法で完成する場合があります。、border-bottom、padding-top、padding-bottom は 0 なので、slideUp 効果が得られます。

その他のクリエイティブな方法

要素の位置と左、上、下、右などを設定して、要素を画面外に移動します
要素の位置とZインデックスを設定し、Zインデックスを設定しますできるだけ小さい負の数にします

srcとhrefの違いを簡単に説明します
hrefはネットワークリソースの場所を指し、現在の要素(アンカー)または現在のドキュメント(リンク)へのリンクを確立します。ハイパーリンクに使用されます。
src は外部リソースの場所を指し、指すコンテンツは現在のタグの場所にあるドキュメントに埋め込まれます。src リソースをリクエストすると、それが指すリソースがダウンロードされてドキュメントに適用されます。 jsスクリプト、img画像、フレームなどの要素として。ブラウザーがこの要素を解析すると、リソースがロード、コンパイル、実行されるまで、他のリソースのダウンロードと処理が一時停止されます。これは、ピクチャやフレームなどの要素にも当てはまります。これは、指定されたリソースをオブジェクトに埋め込むのと似ています。現在のタグ。これが、js スクリプトが先頭ではなく下部に配置される理由でもあります。
業界の要素は何ですか?ブロックレベル要素とは何ですか? 無効な要素とは何ですか?
この質問は、面接で聞かれると時々少し戸惑います~~~ 普段はあまり気にしません。。。。
インライン要素: a、b、span、img、input、strong、select、label、em、button、textarea
ブロックレベル要素: p、ul、li、dl、dt、dd、p、h1-h6、blockquote
空の要素: コンテンツのない HTML 要素 (例: br、meta、hr、link、input、img)

幅と高さが可変の p を垂直方向と水平方向に中央に配置する方法

親ボックスに設定するだけです: display: justify-content: center;align-items: center;

CSS3 変換を使用します

親ボックスの設定:position:relative

p 設定:transform:translate(-50%, -50%);position:absolute;top:50%;left:50%;

display:table を使用します- セルメソッド

親ボックスの設定：display:table-cell; text-align:center;vertical-align:middle;

p設定：display:inline-block;vertical-align:middle;

2.positionいくつかの属性

位置の 4 つの共通属性値: 相対、絶対、固定、静的。通常、「left」、「top」、「right」、「bottom」属性と組み合わせて使用されます。

relative: 相対的な位置決め。相対位置は、他の要素に何が起こるかに関係なく、上、右、下、左のオフセット値はすべて元の位置に基づいてオフセットされます。相対的に移動された要素は、依然として元の位置のスペースを占有していることに注意してください。
absolute: 絶対的な位置決め。絶対に設定された要素の場合、その親コンテナに位置属性が設定されており、その位置属性値が絶対または相対である場合、親コンテナに従ってオフセットされます。親コンテナが位置プロパティを設定していない場合、オフセットは本体に基づきます。絶対属性が設定された要素は、標準フロー内の位置を占めないことに注意してください。
fixed: 位置を固定しました。位置が固定に設定されている要素は、ブラウザウィンドウを基準にして指定された座標に配置できます。要素は、ウィンドウがスクロールされているかどうかに関係なく、その位置に留まります。それは常に身体に基づいています。固定属性が設定された要素は、標準フロー内の位置を占めないことに注意してください。

float のフローティングとクリア
3.1 フローティング関連知識
float 属性の値:

left: 要素は左にフロートします。

right: 要素は右にフロートします。
none: デフォルト値。要素はフロート表示されず、テキスト内のどこにでも表示されます。

フローティングの特徴:

フローティング要素の表示には、状況に応じて異なるルールが適用されます。

2 つの要素のうちの 1 つが左にフロートし、もう 1 つが右にフロートする場合、左側のフローティング要素の marginRight は、次の marginLeft に隣接しません。右側の浮動要素。
フローティング要素が複数ある場合、フローティング要素は重ならないように順番に配置されます。
複数のフローティング要素がある場合、次の要素の高さは前の要素を超えず、含まれるブロックを超えることはありません。
非浮動要素と浮動要素が同時に存在し、非浮動要素が前にある場合、浮動要素が非浮動要素よりも高くなることはありません
浮動要素は上に揃えられます。

オーバーラップの問題

インライン要素がフローティング要素に重なると、その境界線、背景、コンテンツがフローティング要素の上に表示されます

ブロックレベルの要素がフローティング要素に重なると、境界線が表示されます。背景はフローティング要素の下に表示され、コンテンツはフローティング要素の上に表示されます。要素の

clear 属性: 現在の要素の左側と右側にフローティング要素がないことを確認します。 clear は要素自体のレイアウトにのみ影響します。

値: 左、右、両方
3.2 親要素の高さの崩壊の問題
フロートと親要素の高さの崩壊をクリアする必要があるのはなぜですか?
親要素の高さの崩壊の問題を解決します: ブロックレベルの要素がそうでない場合高さを設定すると、その高さはの子要素によってサポートされます。子要素で float を使用すると、子要素は標準のドキュメントフローから外れます。つまり、親要素には高さを拡張するコンテンツがないため、親要素の高さは無視されます。いわゆる高さ崩れです。
3.3 float をクリアする方法
方法 1: 親 p の高さを定義する
原理: 親 p に固定の高さ (高さ) を定義することで、親 p が高さを取得できない問題を解決できます。
長所: コードが簡潔です。
短所: 高さが固定されているため、固定内容のモジュールに適しています。 (非推奨)
方法 2:
などの空の要素を使用する

(.clear{clear:both})
原則: 空の p タグのペアを追加し、css の clear:both 属性を使用して float をクリアし、親 p が高さを取得できるようにします。
長所: 優れたブラウザサポート
短所: 空の p タグがたくさんあるページ上に多数のフローティングモジュールがある場合、空の p タグが多くなり、あまり満足のいくものではないようです。 (推奨されません)
方法 3: 親 p も浮動させる
これにより、現在の浮動問題を最初に解決できます。ただし、親もフローティングになるため、新たなフローティングの問題が発生します。推奨されません
方法 4: 親 p が display:table を定義する
原則: p 属性をテーブルに強制する
利点: 不可解
欠点: 新しい未知の問題が発生します。 (非推奨)
方法 5: 親要素のオーバーフロー設定: hidden、auto;
原則: このメソッドの鍵は、BFC をトリガーすることです。 IE6 では、hasLayout (zoom: 1) もトリガーする必要があります
利点: コードは簡潔で、構造的および意味論的な問題はありません
欠点: オーバーフローする必要がある要素は表示できません (推奨されません)
方法 6: 疑似を定義する親 p クラス: 後とズーム
display:block;
visibility: hidden;
.clearfix {zoom:1 ;}
原則: IE8 以降および非 IE ブラウザーのみサポート: その後、原則は方法 2 に似ており、ズーム (IE 転送には属性がある) で ie6 と ie7 のフローティング問題を解決できます
利点: 構造とセマンティクスは完全に正しく、コードの量は適度です。再利用性 (パブリッククラスを定義することをお勧めします)
欠点: コードはあまり簡潔ではありません (強くお勧めします)
より良いメソッドの作成を目指しています
.clearfix:after {
content: ”200B”;
display:block;
clear:both;
.clearfix {*zoom:1;} フローティングに関する詳しい知識については、こちらを参照してください。記事:
http://luopq.com/2015/11 /08/CSS-float/

4.BFC 関連の知識
定義: BFC (ブロックフォーマットコンテキスト) は、文字通り「ブロックレベルのフォーマットコンテキスト」と訳されます。これは、ブロックレベルボックスのみが参加する独立したレンダリング領域であり、内部のブロックレベルボックスのレイアウト方法を指定し、この領域の外側とは何の関係もありません。
BFC レイアウトルール
BFC はページ上で分離された独立したコンテナーであり、コンテナー内のサブ要素は外部の要素に影響を与えません。およびその逆。

BFC この要素の垂直方向のマージンはマージンによって決まります。最大値を取ると、

BFC の領域はフローティングボックスと重なりません (フローティングの原則をクリアします)。
BFC の高さを計算するとき、浮動要素も計算に参加します。

どの要素が BFC を生成するか

ルート要素
float 属性は none ではない

位置は絶対または固定である

表示は inline-block、table-cell、table-caption、flex、inline-flex である
オーバーフローは表示されない

5. ボックスサイジングとは何ですか? CSS ボックスモデルを標準モデルまたは IE モデルに設定します。標準モデルの幅にはコンテンツのみが含まれ、2 番目の IE モデルにはボーダーとパディングが含まれます。box-sizing 属性には、

コンテンツの幅のみが計算されます。

padding-box 内では、padding は幅に計算されます。
border-box、border とpadding は幅に計算されます

6. px、em、rem
px ピクセル (ピクセル）。絶対単位。ピクセル px は、モニタ画面の解像度に関連しており、コンピュータシステムの仮想的な長さの単位であり、物理的な長さに変換する場合は、精度 DPI を指定する必要があります。

em は、現在のオブジェクト内のテキストのフォントサイズに対する相対的な長さの単位です。インラインテキストの現在のフォントサイズが手動で設定されていない場合は、ブラウザのデフォルトのフォントサイズを基準とします。親要素のフォントサイズを継承するため、固定値ではありません。

rem は、CSS3 の新しい相対単位 (ルート em) です。 rem を使用して要素のフォントサイズを設定する場合も相対サイズですが、HTML ルート要素に対してのみ相対的です。
7.CSSの導入方法は何ですか? linkと@importの違いは何ですか?
inline(要素のstyle属性)、embedded(styleタグ)、external link(リンク)の4種類があります。 @import )

link と @import の違い:

link は CSS をロードするだけでなく、RSS などの他のトランザクションも定義できます。@import は CSS カテゴリに属し、CSS のみをロードできます。
link CSS を参照する場合、ページのロードと同時にロードされます。@import では、ページが完全にロードされた後にロードする必要があります。

link は XHTML タグであり、互換性の問題はありません。@import は CSS2.1 で提案されたものであり、以前のバージョンのブラウザではサポートされていません。

link は、JavaScript を使用して DOM を制御してスタイルを変更することをサポートしていますが、@import はサポートしていません。

流式布局与响应式布局的区别
流式布局
使用非固定像素来定义网页内容，也就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进
行伸缩，不受固定像素的限制，内容向两侧填充。
响应式开发
利用 CSS3 中的 Media Query(媒介查询)，通过查询 screen 的宽度来指定某个宽度区间的网页布局。