CSS の表示属性の簡単な分析-CSSチュートリアル-php.cn

この記事は主に CSS の表示属性を分析するもので、必要な方はぜひ参考にしてください。以下のエディターで見てみましょう。

表示の一般的に使用される値は何ですか?

通常のプロジェクト開発で使いやすい値は主に次のとおりです:

none (要素は表示されません)
block (要素はブロックレベルの要素として表示されます)要素の前後に改行あり) 文字);
inline (要素の前後に改行なしで、インライン要素として表示されます);
inline-block (インラインブロック要素。CSS2 の新しい値。 1);
table (要素はブロックレベルのテーブルとして表示されます)

と同様に、テーブルの前後に改行が表示されます)
table-row (要素はテーブルとして表示されます); row、と同様);

table-cell (要素は、

や	と同様、テーブルセル表示として表示されます)。 display="none" と Visibility="hidden" の違いは何ですか? 一見すると、これらはすべて隠し要素を意味しますが、確かに隠し要素です。しかし、それでも彼らは違います！ visibility="hidden" は、非表示 (のみ) であり、復元できないことを意味します。可視性が「非表示」に設定されている場合、要素は非表示になりますが、元の位置を占めます。可視性は要素の位置を保持します。要素が非表示になると、他のイベントを受信したり、イベントに応答したりできなくなるため、JS を介して表示できなくなります。 display="none" は非表示（要素が消えて）、復元できます。 display が「none」に設定されている場合、要素が非表示になることを除き、visibility="hidden" の正反対になります。表示と可視性の属性値を設定し、リフローと再描画の違いも！リフローと再描画の詳細については、次をクリックしてください: 「ページのリフローとページの再描画」 jQuery の dispaly:none と zepto の違いは何ですか? jQueryのdispaly:noneとzeptoの違い!ほとんどの初心者はまだ理解していないかもしれません。 jQuery の display:none と zepto の違いを知りたい場合は、「jQuery と zepto の display:none の違い」をクリックしてください関連する推奨事項: display 属性コレクション表示要素の共通属性を表示 css表示属性以上がCSS の表示属性の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。関連ラベル： display ソース：php.cn 前の記事：CSS両翼レイアウトの詳細説明次の記事：CSS読み込みでブロッキングが発生するか詳しく解説_CSSチュートリアル_CSS_Webページ制作このウェブサイトの声明この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。著者別の最新記事 PS Day 02: ライトエフェクトマテリアルの切り抜きについては、フォローしてください。 2018-08-28 15:02:42 PS Day 01: 文書から印鑑を抽出する方法については、フォローしてください。 2018-08-25 10:55:46 PS Day 02: 複雑な森を切り出す方法をご覧ください。 2018-08-20 16:25:41 PS Day 01: カラー写真を切り取って線画効果を生み出す方法を学ぶためにフォローしてください 2018-08-18 11:26:54 PS Day 02: ぼかしツールを学ぶためにフォローしてください 2018-08-14 16:35:58 PS Day 01: 修復ブラシツールを学ぶためにフォローしてください 2018-07-28 15:36:43 PS Day 02: モバイルツールの使用方法と適用方法については、フォローしてください。 2018-07-27 16:59:00 PS Day 01: 切り抜きツールを使用する 2018-07-27 15:22:47 PS Day 02: Photoshop のなげなわツールを練習するためにフォローしてください 2018-07-23 17:56:00 PS Day 01: 写真に境界線効果を追加する方法については、フォローしてください。 2018-07-23 16:21:38 最新の問題画像と名前の位置を修正 Web サイトをコーディングしようとしていますが、画像と名前 (Administracija) が左側に表示されますが、検索バーがある場所に表示されるはずです。 @importur... から 2024-04-05 10:41:36 0 1 3578 CSSのグリッドレイアウトのボックスプロトコル最初の 2 つのボックスを最大幅で上に移動させ、2 番目のボックスを最大幅で下に移動させたいのです。コードは次のとおりです。これは CSS コードです: /*StartServic... から 2024-04-03 16:36:04 0 2 334 ページが必要なサイズより大きい問題; React.js 現在のページは次のようになります。ご覧のとおり、上部には多くの空白があります。この空白を消す方法がわかりません。これは HTML です: <divclassName=&qu... から 2024-04-02 14:48:30 0 1 283 「min-height」パーセンテージは、要素に「display: flex」の間接的な親がある場合にのみ適用されます。 #main が display:flex ルールを取得した場合にのみ #inner 要素の高さが決まる理由が理解できません。これは私のコードです: #main{display:fl... から 2024-03-30 22:28:53 0 1 306 将PHP を使用して WordPress 関数で JSON コンテンツを取得して表示するにはどうすればよいですか? wordpress エンドポイントがあり、いくつかの json データがあります。残念ながら、関数でこの JSON データを返す方法がわかりません。 json_decode を試し... から 2024-03-30 17:42:32 0 1 346 関連トピック詳細> css CSS中心 CSSに画像を挿入する方法 CSSが表示を超えています... CSSフォントの色 CSSとは何ですか CSSで三角形を書く方法 CSSで文字の色を設定する人気のおすすめ表示楕円を超えるようにCSSを設定する方法 CSSでフォントサイズを設定する方法 CSSでホバーを使う方法 CSSで文字間隔を設定する方法 css3の新機能とは何ですか？人気のチュートリアル詳細> 関連するチュートリアル人気のおすすめ最新のコース最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライントレーニングコース) 1420866 PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ 4264355 JAVA 初心者向けビデオチュートリアル 2513325 Little Turtle のゼロベースの Python 学習入門ビデオチュートリアル 505943 PHP ゼロベースの入門チュートリアル 861084 最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライントレーニングコース) 1420866 回の学習 JAVA 初心者向けビデオチュートリアル 2513325 回の学習 Little Turtle のゼロベースの Python 学習入門ビデオチュートリアル 505943 回の学習 Web フロントエンド開発の簡単な紹介 215592 回の学習 PSビデオチュートリアルをゼロからマスターする 885590 回の学習 [Web フロントエンド] Node.js クイックスタート 7156 回の学習海外のWeb開発フルスタックコースの完全なコレクション 5557 回の学習 Go言語実践GraphQL 4681 回の学習 550W ファンマスターが JavaScript をゼロから段階的に学習します 670 回の学習 Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる 23606 回の学習最新のダウンロード詳細> ウェブエフェクト公式サイトサイト素材フロントエンドテンプレート [フォームボタン] jQuery エンタープライズメッセージフォームの連絡先コード [プレイヤーの特殊効果] HTML5 MP3 オルゴール再生効果 [メニューナビゲーション] HTML5 クールなパーティクルアニメーションナビゲーションメニューの特殊効果 [フォームボタン] jQuery ビジュアルフォームのドラッグアンドドロップ編集コード [プレイヤーの特殊効果] VUE.JS 模倣 Kugou 音楽プレーヤーコード [html5特殊効果] 古典的な HTML5 プッシュボックスゲーム [画像の特殊効果] 画像効果を追加または削減するための jQuery スクロール [フォトアルバム効果] CSS3 個人アルバムカバーホバーズーム効果 [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート [フロントエンドテンプレート] オンライン電子書籍ストアモールのウェブサイトテンプレート [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイトテンプレートを解決します [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート [PNG素材] かわいい夏の要素のベクター素材 (EPS+PNG) [PNG素材] 4 つの赤い 2023 卒業バッジベクター素材 (AI+EPS+PNG) [バナー画像] 歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材（AI+EPS） [PNG素材] 金色の卒業帽ベクター素材（EPS+PNG） [PNG素材] 黒と白のスタイルの山アイコンベクター素材 (EPS+PNG) [PNG素材] 異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材（EPS+PNG） [バナー画像] フラットスタイルの植樹祭バナーベクター素材 (AI+EPS) [PNG素材] 9つのコミックスタイルの爆発するチャットバブルベクター素材（EPS+PNG） [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート [フロントエンドテンプレート] オンライン電子書籍ストアモールのウェブサイトテンプレート [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイトテンプレートを解決します [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！私たちについて免責事項 Sitemap © php.cn All rights reserved

や

と同様、テーブルセル表示として表示されます)。

display="none" と Visibility="hidden" の違いは何ですか?

一見すると、これらはすべて隠し要素を意味しますが、確かに隠し要素です。しかし、それでも彼らは違います！

visibility="hidden" は、非表示 (のみ) であり、復元できないことを意味します。可視性が「非表示」に設定されている場合、要素は非表示になりますが、元の位置を占めます。可視性は要素の位置を保持します。要素が非表示になると、他のイベントを受信したり、イベントに応答したりできなくなるため、JS を介して表示できなくなります。

display="none" は非表示（要素が消えて）、復元できます。 display が「none」に設定されている場合、要素が非表示になることを除き、visibility="hidden" の正反対になります。

表示と可視性の属性値を設定し、リフローと再描画の違いも！リフローと再描画の詳細については、次をクリックしてください: 「ページのリフローとページの再描画」

jQuery の dispaly:none と zepto の違いは何ですか?

jQueryのdispaly:noneとzeptoの違い!ほとんどの初心者はまだ理解していないかもしれません。 jQuery の display:none と zepto の違いを知りたい場合は、「jQuery と zepto の display:none の違い」をクリックしてください