[🦁FE DAY 8(3)］標準CSS枠型番
16811 ワード
標準CSSボックス型番
標準CSSボックスモデルの要素のフルサイズ=内容+ボーリング+塗りつぶし
1.コンテンツボックスサイズのwidth、heightを設定します(blockboxのみ!)
<head>
<style>
div {
width: 50px;
height: 50px;
background-color: orange;
}
</style>
</head>
<div><div>
<body>
2. border
borderはコンテンツボックスの枠線です!
標準CSSボックスモデルでは、borderのサイズも要素のサイズ全体に含まれます.button {
border-width: 3px;
border-style: solid;
border-color: blue;
}
/* 축약형 */
button {
border: 3px solid blue;
}
<head>
<style>
div {
width: 50px;
height: 50px;
background-color: orange;
}
</style>
</head>
<div><div>
<body>button {
border-width: 3px;
border-style: solid;
border-color: blue;
}
/* 축약형 */
button {
border: 3px solid blue;
}border-width
直接指定
border-style
,
,
,
border styleにはいろいろあるので、いつでも探してください!
( https://developer.mozilla.org/ko/docs/Web/CSS/border-style )
border-color
button {
border-color: red; /* 네 면에 동일한 색상*/
border-color: red orange; /* 상하 좌우 */
border-color: red orange yellow; /* 상 좌우 하 */
border-color: red orange yellow green; /* 상 우 하 좌 (시계방향)*/
}radiusアトリビュートは、枠線の頂点を丸くします.
border-radius: 30px;
制作
->radiusを50%に設定すると、要素の幅の半分に相当する半径の円が作成されます.
div{
width: 100px;
height: 100px;
border-width: 3px;
border: 3px solid black;
border-radius: 50%;
}
border-top-left-radius: 50px; /* 상단 왼쪽 */
border-top-right-radius: 40px; /* 상단 오른쪽 */
border-bottom-left-radius: 30px; /* 하단 왼쪽 */
border-bottom-right-radius: 20px; /* 하단 오른쪽 */
3. padding
標準CSSボックスモデルでは、塗りつぶしのサイズも要素のサイズ全体に含まれます.
div {
width: 100px;
height: 30px;
border: 3px solid black;
padding: 10px;
}
div合計横値=100+10+3+3=126div総縦値=30+10+10+3+3=56
padding: 10px; /* 네 방향 모두 동일하게 10px 적용*/
padding: 10px 20px; /* 상하 좌우 */
padding: 10px 20px 30px; /* 상 좌우 하 */
padding: 10px 20px 30px 40px; /* 상 우 하 좌 */4. margin
marginは要素サイズ全体に含まれません.しかし、要因と要因の間の領域に影響します.
div {
width: 100px;
height: 30px;
border: 3px solid black;
margin: 10px;
}
div総横方向値=100+3+3=106div総縦値=30+3+3=36
->利益値はすべての要素サイズに含まれません.
margin: 10px; /* 네 방향 모두 동일하게 10px 적용*/
margin: 10px 20px; /* 상하 좌우 */
margin: 10px 20px 30px; /* 상 좌우 하 */
margin: 10px 20px 30px 40px; /* 상 우 하 좌 */
margin: 10px auto;
/* auto
: 요소 크기를 제외한 나머지 마진영역을 반으로 나눠 왼쪽과 오른쪽에 분배한다.
좌우로만 auto적용할 수 있고 상하로는 auto 적용할 수 없다.*/エッジオーバーラップ(エッジ折りたたみ)
: 인접하는 블록요소의 상하단의 마진이 겹쳐졌을 때 더 큰 마진 값이 적용되는 현상1.隣接するブロック要素間で発生します.
2.上下端のみオーバーラップ現象が発生.(左右の余白のマージは発生しません)
ケース1:隣接するブロック要素間の上下の境界が重なる
<div class="one"></div>
<div class="two"></div>div {
width: 100px;
height: 100px;
background-color: khaki;
}
.one {
margin-bottom: 30px;
}
.two {
argin-top: 60px;
}
の2つの要素の境界は上下に重なるが、2つの境界値は増加しない.第1の要素の利益値(30 px)よりも大きい第2の利益値(60 px)が適用されたことを決定することができる.ケース2:親子の利益が重なる
(1)親子ともに利益がない状態
.parent {
background-color: white;
width: 300px;
margin: 0;
}
.children {
background-color: blue;
width: 200px;
height: 200px;
border: 1px solid black;
margin: 0;
}
(2)子供に1人当たり50 pxの利益を与える.
なぜこんなことになったのか、
利益が重なる現象の条件が満たされているからだ.
まず親と子の2つの要素はBLOCK要素であり、隣接している.(条件1を満たす)
また、子供の左右の利差はよく適用されるが、上下の利差にのみ適用される.これは親と子供の間の利益が結合したことを意味します!(条件2を満たす)
すなわち、利益が連結されると、2つの利益値のうち大きな利益値が適用される.
子供の利益値は50 px、親の利益値は0 pxなので、より大きな子供の利益値は50 pxです.
そのため、50 pxは現在、親の利益値となっている.
親要素にborder値を適用する
tableラベル自体にはサイズがなく、ボックスのサイズには影響しません!
<div class="parent">
<div class="children">A</div>
<div class="children">B</div>
</div>サブエレメントの表示属性値をinline-blockに置き換えます
利益結合現象の条件1(隣接するブロック要素の間でのみ発生する)は満たされず、親と子供の間の利益結合現象は発生しない.
しかし、子ども同士の利益合併もなく、子どもたちの利益値は増える.
の画像から見ると、子供の間で本来発生すべき境界結合は境界結合を生じず、互いに反発し合い、この部分をより広くしている.オーバーフロー親要素オーバーフロー親要素:適用を非表示
Reference
この問題について([🦁FE DAY 8(3)］標準CSS枠型番), 我々は、より多くの情報をここで見つけました https://velog.io/@alsdl3344/FE-DAY84-표준-CSS-박스-모델-대체-CSS-박스-모델テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol