HTML 2-行内要素とブロック要素-

8081 ワード
html テキストリンク
こんにちは.😊
今日は行内要素とブロック要素について見ます.
今私にも混同や困難なところがたくさんあります.
間違いもありますが、これからも勉強しながら補います.👊
始まる前に!
「なぜブロック要素と行内要素が何であるかを知るのですか?」このような考えが生まれやすい.
私もこのような考えを持っていて、私は各要素を理解してこそ、cssの使用の中で混同しないことができることを発見しました.
HTMLの블록요소(block element)と인라인요소(inline element)について説明します.

ブロックエレメント


ブロック要素の特徴(div、h 1、pタグを表す)
1)使用可能な最大幅を使用します.
2)サイズを指定できます.
デフォルトでは、width値とheight値は「wid:100%height:0;で始まる.
値が0なら何もないというのではなく、字を書くとその字のように自動的に高さ値が指定されます.
3)垂直に積み上げた構造.
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>div</title>
    <div>안녕하세요</div>
    <div>안녕하세요</div>
    <div>안녕하세요</div>
上の図のように、「こんにちは」の文字が縦に積み上げられているのが見えます.
4)marginもpaddingも利用可能
5)レイアウトが特別だと考える

ライン内要素(ライン内要素)


行内要素の特徴(典型的なspan、imgタグ)
1)使用に必要な幅
この言叶はspanラベルで、cssでバックグラウンドに色をつけて知っています
その結果、背景色の大きさが文字の大きさと一致することが決定されます.
2)サイズを指定できません.
横寸法と縦寸法は設定できません.widthとheightプロパティを追加してもサイズを指定できません.
3)水平スタック
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>span</title>
    <span>안녕하세요</span>
    <span>안녕하세요</span>
    <span>안녕하세요</span>
また、下線ではなく貼り付けて使うと、書き換えができないのも線要素の特徴です.
💡ここに貼ってあるのは上の3行ではなく、1行ずつ書いてあります.
4)margin,paddingでは上下は使用できません.
5)テキストを最適化した.

最後に。


これにより、行内の要素とブロック要素の特徴が表示されます.
インライン要素とブロック要素は本当に混同されていますが、後でcssを適切に使いたいなら、知っておく必要があります.
次に、ブロック要素と行内要素に対応するタグについて説明します.
Mac に Eclipse PDT + Pleiades な環境を構築してみるメモ
Elasticsearchシリーズ-logstashインポートデータ