CSSクリア
CSS
Webドキュメント全体のスタイルのスタイルシートを保存しておきます.ドキュメント全体の一貫性を維持し、スタイル設定の細分化の必要性を低減します.
属性を1つずつ指定するHTMLとは異なり、要素単位で一度に内容やデザインを変更できます.
基本構造は、
<style></style>のラベルにスタイルを指定する要素、属性、属性値を記入すればよい.<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
<style>
*,
html,
body {
margin: 0;
padding: 0;
}
#wrap {
width: 1024px;
margin: 0 auto;
border: 1px solid black;
font-size: 0;
}
#box1 {
width: 200px;
height: 100px;
}
#box1-1 {
width: 200px;
height: 100px;
background-color: green;
}
#box2 {
width: 100px;
height: 100px;
background-color: red;
display: inline-block;
}
#box3 {
width: 100px;
height: 100px;
background-color: blue;
display: inline-block;
}
</style>
</head>
<body>
<div id="wrap">
<div id=box1>
<div id=box2></div>
<div id=box3></div>
</div>
<div id=box1-1></div>
</div>
</body>
</html><style>タグはheadタグに書き込まれ、その作成方法は「要素」{属性:属性値;に等しい要素は、上記のコードで作成したbodyのようにタグに基づいてもよいし、#wrapのように特定の要素を選択する選択者を利用してもよい.主な選択者は#(id)である.明かりがついています.よく使われるプロパティはwidthとheight、margin、paddingです.
widthとheightは幅と高さを決める属性で、単位を与えなければなりません.通常、pxと%単位が多く使用されます.
marginは要素に白を残す属性であり,paddingは逆に要素に白を残す内部属性である.
上のコードの第1段では、*、html、bodyラベルの余白とダウンジャケットをゼロにして開始します.cssを学んだときに感じたのですが、私が設定していない利益とダウンジャケットが基本的に適用されるところが多いので、欲しいデザインがないことが多いので、このように利益とダウンジャケットを解消して、デザインを始めたほうがいいです.
講師はwrap ID付きdivが楽なテクニックだと教えてくれました.彼は事前にwrapでレイアウトを設定したほうがいいと言っています.そうしないと、ページ全体を基準に設計しなければならないので、多くの困難があります.
最後にbox divのdisplayプロパティが重要です.並べ替え方法を表す属性で、block、inline、flexを表します.blockはエレメントを垂直に配置し、inlineはエレメントを水平に配置する属性です.ブロック属性を持つ要素はデフォルトではnであり、inline属性を持つ要素はnではないことを明確に理解します.これにより、属性の要素の後の要素の位置が決まります.
flexプロパティは、要素の内部に特殊な影響を及ぼす子供のプロパティです.flexプロパティを持つ要素の子供は横に配置されます.
divは基本的にblockプロパティを持つ要素です.上のコードでは、inline-blockプロパティを横に配置するように強制しますが、これ以上配置できない場合は、次の行に移動するプロパティを兼ね備えています.
Reference
この問題について(CSSクリア), 我々は、より多くの情報をここで見つけました https://velog.io/@junza301/CSS-정리テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol