css_html/css_WEB-ITnoseでのグリッドスタイルの実装

最終結果が出ました。CSAPP はついに失敗せず、良い年を迎えることができました!

さて、今回の需要は次のとおりです:

写真に示すように、子ボックスを入れます親ボックスと子ボックスの幅は 50% (33% や 25% と同様) なので、上記の効果は単純に見えますが、実際にはまだ少し面倒です。具体的なコードは

.box{	width: 400px;	height: 400px;	padding: 5px;	background-color: #CCC;	border-radius: 10px;}.block{	float: left;	width: 50%;	height: 50%;	border: 5px solid #ccc;	box-sizing: border-box;	border-radius: 7%;	background-color: #685473;}

です。

使用するヒントは次のとおりです:

1. 子要素はボーダーボックスモデルを使用します

2. 子要素の間隔は背景色と同じ色の枠線で反映されます

3.親要素の幅（各種ボックスモデルのマージンが含まれていないため、マージンを使用すると1行で2つのボックスをサポートできなくなります）

4. 子のボーダーと同じ幅のパディングを親要素に追加します。要素 (追加しない場合、子要素の間に 10 ピクセルの灰色が存在しますが、親要素に隣接する側は 5 ピクセルの灰色のみになり、美しくありません)

この効果は、一部のグリッド ゲーム (連聯館など) を作成するときに非常に便利です。 2048)、など。