CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

ボックスサイズを使用したCSS3ボックス幅

box-sizingプロパティを使用して、要素の幅だけでなく高さも変更します。

以下は、CSS3-

を使用したボックスサイズ設定でのボックス幅のコードです。

例

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
   width: 200px;
   height: 200px;
   display: inline-block;
}
.contentBox {
   padding: 50px;
   border: 1px solid rgb(255, 0, 128);
}
.borderBox {
   box-sizing: border-box;
   padding: 50px;
   border: 1px solid rgb(194, 0, 194);
}
</style>
</head>
<body>
<h1>Box sizing example using CSS</h1>
<div class="contentBox">
This div doesn't have box sizing property that's why it looks bigger
</div>
<div class="borderBox">
This div has box sizing property
</div>
</body>
</html>

出力

上記のコードは次の出力を生成します-

ボックスサイズを使用したCSS3ボックス幅


  1. CSS3フレキシブルボックスレイアウト

    CSS3は、一般にFlexboxと呼ばれるレイアウトモードのFlexibleBoxを提供します。 Flexbox（フレキシブルボックス）はCSS3のレイアウトモードです。このモードを使用すると、複雑なアプリケーションやWebページのレイアウトを簡単に作成できます。コンテナ、フレックスアイテムなどが含まれます。コンテナには次のプロパティがあります- フレックス方向 フレックスラップ フレックスフロー justify-content 整列アイテム align-content 以下は、CSS3-を使用して柔軟なレイアウトを表示するコードです。 例 <

  2. 純粋なCSSによるスムーズなスクロール

    CSSのscroll-behaviorプロパティを使用すると、スクロールの動作を変更できます。 例 次の例は、CSSのscroll-behaviorプロパティを示しています。 <!DOCTYPE html> <html> <head> <style> html {    line-height: 200px;    margin: 30px;    text-align: center;    vertical-align: middle; } #parent {