快速キャンパスMGS 3期-4月19日(CSS属性)
CSS属性 css
はhtml
のどの部分を制御することができますか?
![](https://s1.md5.ltd/image/16300f35ecaf11696a26e6e5590c8df4.png)
![](https://s1.md5.ltd/image/da5e68db65da69aebf6a07b5b1a27449.png)
![](https://s1.md5.ltd/image/fccddca0f6f64c7dac1104a07a95e2a0.png)
![](https://s1.md5.ltd/image/0cd61324f3c01e53180632b7ebdd4c7f.png)
![](https://s1.md5.ltd/image/56460b63dee1790adeff366bf4a46af4.png)
![](https://s1.md5.ltd/image/39978023fbc268136b0dbadf6b3e05d5.png)
![](https://s1.md5.ltd/image/07ab7f9e9f4e6af29958f829a0db0534.png)
![](https://s1.md5.ltd/image/062e254acac45fa908f5a82a14b2d778.png)
![](https://s1.md5.ltd/image/257138aba12caca56afa10c465885b0c.png)
![](https://s1.md5.ltd/image/93370f3141eafea7301ebcc7b1249ad9.png)
![](https://s1.md5.ltd/image/e6f7abe8511b639abd0cdde2b9d8e850.png)
![](https://s1.md5.ltd/image/905712d45b00ddac174ad360cc325e56.png)
入る前に。
💡 意味
赤:既定
青:デフォルト以外でよく使用されるプロパティ
1.箱型
width, height
単位:px、em、vwなどの単位
<span>
:典型的なインライン要素![](https://s1.md5.ltd/image/0df9299960320b2e3b9a677acc3e4705.png)
<div>
:典型的なブロック要素![](https://s1.md5.ltd/image/2caf22981dd221291c23dd0dce3a21d0.png)
max-width, max-height
単位:px、em、vwなどの単位
min-width, min-height
単位:px、em、vwなどの単位
2.単位
px
:画素%
:相対パーセントem
:要素のフォントサイズrem
:ルート要素(html
)のフォントサイズvw
:ビューポート幅のパーセントvh
:ビューポートの垂直幅のパーセント3. margin
margin: 10px;
:10 pxマージンを上下左右に適用margin: 10px 20px;
:上下10 px、左右20 pxマージンmargin: 10px 20px 30px;
:上10 px,中(左右)20 px,下30 pxマージンmargin: 10px 20px 30px 40px;
:上10 px,右20 px,下30 px左40 pxマージンアプリケーション(🕑 時計回り0:外部余白なし
Auto:ブラウザは、水平(垂直)幅要素の中央揃えに使用する余白を計算します.
単位:px、em、vwなどの単位
4. padding
単位:px、em、vwなどの単位
%:親要素の水平幅の割合を指定します.
5. border
border: 선-두께 선-종류 선-색상;
border-width
border-style
solid:実線(普通線)
破線
border-color
色:線の色
透明:透明
6. border-radius
単位:px、em、vwなどの単位
![](https://s1.md5.ltd/image/ebcb314b132b9d0bfc42feae2a7f0e3d.png)
7. box-sizing
👩💻 例
content-box:要素の内容(content)でサイズを計算する
border-box:要素の内容+padding+borderを使用してサイズを計算
![](https://s1.md5.ltd/image/e3720825f90fc5e3db7c531355277094.png)
❓ Question 1. 次のコードで指定した要素の実際の幅は?
width: 100px;
padding: 20px;
border: 1px solid red;
💡 142px;❓ Question 2. 次のコードで指定した要素の実際の幅は?
width: 100px;
padding: 20px;
border: 1px solid red;
box-sizing: border-box;
💡 100px;8. overflow
hidden:オーバーフロー内容の切り取り
Auto:スクロールバーは、コンテンツがオーバーフローした場合にのみカットおよび作成されます.
![](https://s1.md5.ltd/image/f6ec341dc4af729d3f93392eee52c0ec.png)
9. display
各要素に指定された値
block:ボックス(レイアウト)要素
inline:文字要素
inline-block:文字+ボックス要素
プライベート値
flex:Flexbox(1 Dレイアウト)
grid:グリッド(2 Dレイアウト)グリッド2 Dレイアウト
none:表示されないプロパティが画面から消えます
その他:table、table-row、table-cell等
10. opacity
0:0~1の小数点数
11.フォント
font-style
イタリックイタリックイタリック
font-weight
bold,700:厚くする
100~900:100、9個の数値単位、非正常および太字の厚さ
font-size
単位:px、em、remなどの単位に指定
line-height
単位:px、em、remなどの単位に指定
font-family
12.テキスト
color
色:その他の指定可能な色
text-align
右:右揃え
中心ちゅうしん:中央揃えちゅうしんはいち
text-decoration
下線:下線
直線通過ちょくせんせんこう:中線ちゅうせん
text-indent
単位:px、em、remなどの単位に指定
13.背景
background-color
色:指定可能な色
background-image
url(「パス」):イメージパス
background-repeat
repeat-x:水平繰返し画像
repeat-y:垂直繰り返し画像
No-repeat:重複なし
background-position
単位(x、y軸):px、em、remなどの単位に指定
![](https://s1.md5.ltd/image/0522d3d8559874e85d049ee2200630eb.png)
background-size
単位:px、em、remなどの単位に指定
cover:スケールを維持し、より広い要素幅に適しています.
contain:スケールを維持し、短い要素幅に適しています.
![](https://s1.md5.ltd/image/4fc87f73ccbdc06246ab82dbf5fe4f57.png)
🤔 tip
画像を挿入するときに横と縦の寸法を同時に表示する必要はありません.寸法を変更するたびにスケールで変更するのが面倒で、横寸法か縦寸法のどちらかを指定するだけでスケールで出力できます!
background-attachment
固定:画像をビューポートに固定し、Xをスクロールします.
Reference
この問題について(快速キャンパスMGS 3期-4月19日(CSS属性)), 我々は、より多くの情報をここで見つけました https://velog.io/@jytrack/패스트-캠퍼스-MGS-3기-4월-19일CSS-속성テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol