[CSS]2002年03月22日第2日開発ログ(2)

6547 ワード
CSS Webベース 大邱AI学校 テキストリンク

1.勉強の内容


box model


各ラベルのボリュームの決定
(重要度順:選択者->boxモデル...)

Q.h 1ラベルは改行できますが、リンクは自動的に改行されていませんか?
確認するには、h 1ラベルに枠線を付けてください.
枠線=border(太さ、線、色)
<html>
    <head>
        <style>
            h1{
                border: 10px solid red;
            }
            a{
                border: 10px solid red;
            }
        </style>
    </head>
<body>
   <h1>WEB</h1>
   <h1>WEB</h1>
   Lorem ipsum dolor sit<a href="http://w3c.org">amet</a> ....등등

A.
h 1ラベルは画面全体を使用し、
-> h1 = block level element
aラベルはコンテンツサイズと同じサイズを使用する
-> a, img = inline element
선언이 똑같은 경우 

<style>
	h1, a {
    		border: 10px solid red;
        }
</style>

各ラベルにはデフォルトのデザインがありますが、css(=制御)に変更できます.
display:最大フレームワーク仕様のプロパティを決定する
はい.inline, block, none, grid
Q.テキストと枠線の間の余白
間隔=padding
  <style>
            h1{
                border: 10px solid red;
                padding: 30px;
            }
  </style>
<style>
            h1{
                border: 10px solid red;
                padding: 30px;
                margin: 50px;
            }
 </style>

2.難しいところ



上50 px下50 pxの場合、真ん中に100 pxの距離があるはずです.
中間空白が100 px未満の原因は(垂直であれば)利益値が重なる現象で50に下がる.

3.解決方法


4.勉強の心得


22032 Webベースcss 1人鋼1:42:32
[JAVA]継承とは?
📚 [JavaScript]演算子