CSSチュートリアル

CSSの基本用語

无忌哥哥

Jun 28, 2018 pm 04:57 PM

1. ドキュメントフロー: ページ要素のデフォルトの配置は、HTML ドキュメント内の要素の順序に従って左から右、上から下に配置されます。

2. ブロック要素はデフォルトで 1 行を占めます。幅と高さを設定できます。例:

、

...;

3. デフォルトでは、幅と高さは水平方向に 1 行に配置されます。...;のように内容によって決まり、設定できません。

4. 置換要素: 内容要素の要素は、タグの属性によって設定されます。タグは実際には、 CSSの基本用語などのプレースホルダーです。

5. 非置換要素: コンテンツ

、

、などの要素が含まれています

6. 要素の内容が来るからです。外部リソースからの場合、単一のタグが多数あるため、ほとんどの置換要素には 1 つのタグだけが必要ですが、次のような例外もあります。

であるか、単にリソースの導入であるかのいずれかです。

6-2. コンテンツがユーザーによって直接タグに書き込まれる、

、

およびその他のテキストタグは、最も一般的な非置換要素です

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css中的基本术语</title>
</head>
<body>
<!--div和p标签写在前面就先显示,因为是块标签,所以都独占一行垂直排列-->
<div>div标签是最简单最常用的块标签</div>
<!--打开浏览器的开发者工具(调试工具),查看元素样式,可以看到他的display属性: block-->
<p>div标签是最简单最常用的块标签</p>
<!--a标签写在了后面就在后面显示,因为为行内标签,所以在一行中水平排列-->
<a href="index.html"><em>首页</em></a> | <a href="news.html">公司新闻</a> | <a href="about">关于我们</a>
<hr>
<!--以上的p,div标签是非替换元素,它的内容由当前文档提供,因为外部资源的大小具有不可控性,所以默认为行内元素-->
<img src="/static/imghwm/default1.png"  data-src="../images/1.jpg"  class="lazy"      style="max-width:90%" alt="">
<input type="text">
</body>
</html>

以上がCSSの基本用語の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

Smart Forms Frameworkを使用してJavaScript連絡フォームを作成するMar 07, 2025 am 11:33 AM

このチュートリアルでは、Smart Formsフレームワークを使用して、プロフェッショナルなJavaScriptフォームの作成を示しています（注：使用できなくなりました）。フレームワーク自体は利用できませんが、原則とテクニックは他のフォームビルダーに関連しています。

WordPressブロックと要素にボックスシャドウを追加しますMar 09, 2025 pm 12:53 PM

CSS Box-Shadowおよびアウトラインプロパティは、WordPress 6.1でTheme.jsonサポートを獲得しました。実際のテーマでどのように機能するか、そしてこれらのスタイルをWordPressブロックと要素に適用するために必要なオプションのいくつかの例を見てみましょう。

スクリーンリーダーの分解：アクセス可能なフォームとベストプラクティスMar 08, 2025 am 09:45 AM

これは、フォームアクセシビリティについて行った小さなシリーズの3番目の投稿です。 2番目の投稿を逃した場合は、「ユーザーフォーカスの管理：Focus-Visible」をご覧ください。で

満足している属性を持つインラインテキストエディターを作成しますMar 02, 2025 am 09:03 AM

インラインテキストエディターの構築は些細なものではありません。このプロセスは、ターゲット要素を編集可能にすることから始まり、その過程で潜在的なSyntaxerrorの例外を処理します。エディターの作成このエディターを構築するには、コンテンツを動的に変更する必要があります

最初のカスタムSvelteトランジションを作成しますMar 15, 2025 am 11:08 AM

Svelte Transition APIは、コンポーネントがカスタムSVELTE遷移を含むドキュメントを入力または離れるときにアニメーション化する方法を提供します。

GraphQLキャッシングの使用Mar 19, 2025 am 09:36 AM

最近GraphQLの作業を開始した場合、またはその長所と短所をレビューした場合、「GraphQLがキャッシュをサポートしていない」または

5つの最高のPHPフォームビルダー（および3つの無料スクリプト）を比較するMar 04, 2025 am 10:22 AM

この記事では、Envato Marketで入手可能なPHPフォームのビルダースクリプトを説明し、機能、柔軟性、デザインを比較します。特定のオプションに飛び込む前に、PHPフォームのビルダーが何であるか、そしてそれを使用する理由を理解しましょう。 PHPフォーム

node.jsとexpressのMulterを使用してファイルアップロードしますMar 02, 2025 am 09:15 AM

このチュートリアルは、node.js、Express、およびMulterを使用してファイルアップロードシステムを構築することをガイドします。単一および複数のファイルのアップロードをカバーし、後で検索するためにMongoDBデータベースに画像を保存することさえ示します。まず、プロジェックをセットアップします

See all articles

ホットAIツール

ホットツール

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。