CSS3でフレキシブルボックスを作る方法

CSS3 でフレキシブル ボックスを記述する必要がある場合がありますが、このコードはどのように作成すればよいでしょうか?これには、ボックスが表示されるときにシャドウ効果を生成できる box-shadow 属性を使用する必要があります

書き方:

box-shadow: length length length color

最初のパラメータはボックスから影までの水平距離を表します

2番目のパラメータはボックスから影の垂直距離を表します

3番目のパラメータは影のぼかし半径を表します

4番目のパラメータは色を表します影

はい ボックス内の要素に影を使用します

ボックス内の子要素に個別に影を使用できます。

最初の文字セレクターまたは最初の行セレクターを使用して、最初のテキストまたは最初の行にのみ

影効果を持たせることができます

表とセルに影を使用します

ボックスを使用できます-シャドウ属性 テーブルとテーブル内のセルにシャドウ効果を与えます。

要素の幅と高さの計算方法を指定します

css3の場合は、box-sizing属性を使用して、要素の幅と高さの計算方法を指定します

box-sizing属性

cssの場合は、 width 属性と height 属性は要素の幅と高さを指定します。

ただし、box-sizing 属性を使用すると、width 属性と height 属性で指定した width と

height の値にそれぞれ要素内のパディング領域、および境界線の幅と高さを含めるかどうかを指定できます。 。

box-sizing属性に指定できる属性値は、content-box属性値とborder-box属性値です。前者は要素の幅と高さに内部パディング領域が含まれていないことを意味し、後者は要素の幅と高さに内部パディング領域と幅と高さが含まれていることを意味します。国境の。

以前は、デフォルトでは content-box 属性値が使用されていました。

さらに、box-sizing 属性の属性値

を

padding

-box として指定できます。つまり、指定された幅と

高さには、コンテンツの幅と高さ、コンテンツの幅と高さが含まれます。境界線の幅と高さを除く

パディング領域

は、要素の合計幅を制御するために使用されます。この属性が使用されない場合、スタイルで使用されるデフォルトの

が使用されます。 -box 属性値はコンテンツの幅のみを指定しますが、要素の合計幅は指定されていません。

場合によっては、border-box 属性値を使用すると、

ページ レイアウト

がより便利になります。

たとえば、2 つの div 要素の border-box 属性値が 50% に設定されている限り、2 つの div

要素が確実に並べて表示されます。

これはフレキシブルボックスの作り方です。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事にご注目ください。

関連書籍:

HTMLに画像を挿入する方法

HTMLでdivを中央揃えするときに注意すべきこと

HTMLでifコメントを使用する方法

以上がCSS3でフレキシブルボックスを作る方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。