HTML/CSS学習要約(6)

CSS：ボックスモデル

widthプロパティとheightプロパティでボックスモデルのサイズを設定します.単位はpx、emまたは%:.navigation {
height: 320px;
width: 100%;
}です.
min-widthおよびmax-width,min-heightおよびmax-heightでボックスモデルの最大最小値を設定し、overflowプロパティでボックスモデルを超えたコンテンツを非表示またはスクロール処理します.p {
min-height: 150px;
max-height: 300px;
min-width: 300px;
max-width: 600px;
overflow: scroll;
} scrollはスクロール、hiddenは非表示です.
border-styleプロパティで枠線スタイルを設定します.値は次のとおりです.

solid

dashed

dotted

double

groove

inset

outset

ridge

hidden or none

border-widthで枠線幅を設定します.その値はthin,medium,thick:p {
border-style: solid;
border-width: 5px;
}でもかまいません.
各エッジの幅を設定:p {
border-style: solid;
border-width: 3px 1px 2px 1px;
}を時計回りに並べ替え、上(3 px)、右(1 px)、下(2 px)、左(1 px)
1つのエッジの幅のみを設定:p {
border-style: solid;
border-left-width: 4px;
}border-colorプロパティで枠線の色を設定します.値はrgbまたは16進数:div.container {
border-style: solid;
border-width: 3px;
border-color: rgb(22, 77, 100);
}です.
border-width、border-style、border-colorを設定する場合は、borderプロパティの略記を使用します.div.container {
border: 3px solid rgb(22, 77, 100);
}はwidth-style-colorの順序で行うことが望ましいです.
border-radiusで円弧の枠線を設定する:div.container {
border: 3px solid rgb(22, 77, 100);
border-radius: 5px;
}padding属性で内容と枠の隙間を設ける:p {
border: 3px solid #A2D3F4;
padding: 10px;
}各辺の隙間を設けることができ、同様に時計回りに並べ替える:p {
border: 3px solid #XXXXXX;
padding: 5px 10px 5px 10px;
}例では上下の隙間が一致し、左右の隙間が一致し、簡潔に書くことができる:p {
padding: 5px 10px;
}片側の隙間だけを設けることができる:p {
border: 3px solid #2D3FA3;
padding-bottom: 10px;
}marginプロパティで枠線と枠線の外部のギャップを設定し、各エッジの書き方をpadding:p {
border: 1px solid #23AD44;
margin: 20px;
}と設定します.
marginの値をautoに設定してボックスモデルを中央に配置できますが、ボックスモデルの幅をページbody:div.headline {
width: 400px;
margin: auto;
}より小さく設定する必要があります.
通常、ページのpaddingとmarginにはデフォルト値があり、開発者はそれをリセットします:* {
margin: 0;
padding: 0;
}displayプロパティを使用すると、要素のデフォルトの動作を変更して、理想的なページレイアウトを実現できます.値は次のとおりです.

inline - causes block-level elements (like a div) to behave like an inline element (like a link).

block - causes inline elements (like a link) to behave like a block element (like a div).

inline-block - causes block-level elements to behave like an inline element, but retain the features of a block-level element.

none - removes an element from view. The rest of the web page will act as if the element does not exist.

一般的には、displayを使用してリスト・アイテムを作成するナビゲーション・バー:

Home

Products

Settings

Inbox

li {
display: inline;
}
要素が表示されるかどうかをvisibilityプロパティで設定します..future {
visibility: hidden;
} hiddenは非表示、visibleは表示です.display:noneとは異なり、display:noneは要素のすべてのものを削除し、スペースを含め、visibilityはスペースを保持し、要素の内容だけを非表示にします.
ボックスモデルの大きさを設定すると、気まずい制限があります.h1 {
border: 1px solid black;
height: 200px;
width: 300px;
padding: 10px;
}このボックスモデルでは、paddingとborder-widthがボックスの大きさに影響し、10 pxの内辺距離がボックスの高さを320 pxに引き上げ、幅220 px、1 pxの枠が太く321 px、221 pxになります.
font-weightのデフォルト値がnormal、box-sizingのデフォルト値がcontent-boxのようにbox-sizingプロパティを変更することで、ボックスモデルのサイズを内側の余白に合わせて変更することができます.border-boxに変更すれば、ボックスモデルのサイズが影響を受けないことを保証できます:* {
box-sizing: border-box;
}