Css 3学習ノート(四):ボックスモデル

1.タイプ区分
1.1基本タイプのBlock:ブラウザ全体にわたって幅が広がり、各行に1つのblock要素しか収容できません.
Inline:幅は内容によって決まり、各行に複数のinline要素を並列に収容できる.
1.2 inline-block inline-blockはblockタイプボックスの一種ですが、表示時にinlineタイプボックスの特徴があります.

div.inlineblockType{
	display:inline-block;
	background-color:yellow;
	width:300px;
}

または水平メニュースタイルを表す

ul{
	margin:0;
	padding:0;
}
li{
	width:100px;
	padding:10px 0;
	background-color:#00ccff;
	border:solid 1px #666666;
	text-align:center;
	display:inline-block;
}

1.3 inline-table表は文字と同じ行にある

table{
	display:inline-table;
	border:solid 3px #00aaff;
	vertical-align:bottom;
}

1.4 list-itemは、複数の要素をリストとして表示し、要素の先頭にタグを付けることができます.

div{
	display:list-item;
	list-style-type:circle;
	margin-left:30px;
}

1.5 run-inおよびcompact run-in:要素の後ろにblockタイプの要素がある場合、run-inタイプの要素はblock要素の内部に含まれます.
compact:compact要素はblockタイプの左側に配置されます.
1.6表の関連

.table{
	display:table;
	border:solid 3px #00aaff;
}
.caption{
	display:table-caption;
	text-align:center;
}
.tr{
	display:table-row;
}
.td{
	display:table-cell;
	border:solid 2px #aaff00;
	padding:10px;
}
.thead{
	display:table-header-group;
	background-color:#ffffaa;
}

1.7 noneタイプnoneタイプエレメントをnoneタイプとして指定すると、エレメントは表示されません.
2.ボックス外部分表示処理
2.1 overflow

div{
	width:300px;
	height:150px;
	border: solid 1px #ffcc00;
	margin:15px;
}

オプションのプロパティ値:hidden(非表示)、scroll(ダブルスクロールバーが表示されます)、auto(必要に応じてスクロールバーが表示されます)、visible(デフォルト).
2.2 overflow-xとoverflow-y overflow-xとoverflow-yを使用して、水平方向または垂直方向のコンテンツがボックスの範囲を超えた表示方法を個別に指定できます.
2.3 text-overflowは、ボックス内の内容が収容範囲を超えた場合に「...」で表される.

div[id='test3']{
	border:solid 1px #eea0cc;
	text-overflow: ellipsis;
	overflow:hidden;
	white-space:nowrap;
}

3.ボックスシャドウ
3.1 box-shadow

div[id='test3']{
	border:solid 1px #eea0cc;
	width:300px;
	height:150px;
	background-color:#CC095A;
	box-shadow:5px 5px 5px gray;
}

パラメータ値は、boxからシャドウが離れる横距離、縦距離、ぼかし半径、シャドウ色です.
3.2ボックス内のサブエレメントを使用可能
3.3 first-letterとfirst-lineを組み合わせて、最初の単語または最初の行にシャドウ効果を与えることができる
3.4表またはセルで使用可能
4.ボックスサイズ
4.1 box-sizingはwidth、heightを使用して指定した幅と高さが要素内部のpadding領域とborder領域を含むかどうかを示します.デフォルト:content-box.

div[id='test1']{
	box-sizing:content-box;
}
div[id='test2']{
	box-sizing:border-box;
}

オプションパラメータ:content-box、border-box、padding-box