css - 04盒子模型
阿新 • • 發佈：2022-04-21
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style> /*通常用div標籤作為盒子模型，盒子模型一般作用於塊元素*/ /*塊元素定義的長和寬對應的是盒子模型中的content，盒子的寬或高等於content+padding+border*/ /*除margin外padding、border的設定會使盒子變大，使用"box-sizing: border-box;"可以固定盒子 的寬高為content=content(尺寸增大或縮小)+padding+border*/ /*1. 元素居中定義與外距定義細節*/ /*.out{*/ /* width: 800px;*/ /* border: 3px solid red;*/ /*}*/ /*.in {*/ /* width: 400px;*/ /* border: 3px solid black;*/ /* margin: 0 auto;*/ /* text-align: center;*/ /*}*/ /*margin: 30px 40px 60px 100px*/ /*//外邊距：上 右 下 左*/ /* margin: 0 auto*/ /*//外邊距：上下緊貼 左右居中（auto解決了邊框寬度與左右邊距的自動計算問題）*/ /*margin 外邊距負值表示溢位*/ /*margin 外邊距 如果有重疊，則取最大的值*/ /*2.固定盒子大小尺寸 */ /*article {*/ /* border: solid 2px #ddd;*/ /* width: 300px;*/ /* height: 300px;*/ /*padding: 50px;*/ /* box-sizing: border-box;*/ /* !*固定盒子大小尺寸的宣告*!*/ /*}*/ /*div {*/ /* padding: 30px 50px 100px 80px;*/ /*}*/ /*3.fill-available自動撐滿可用空間*/ /*main {*/ /* width: 500px;*/ /* height: 500px;*/ /* background-color: aqua;*/ /*}*/ /*main > div {*/ /* background-color: red;*/ /* display: inline-block;*/ /* height: -webkit-fill-available;*/ /* !*width: -webkit-fill-available;*!*/ /*}*/ /*4.fit-content根據內容自適應尺寸*/ /*main {*/ /* width: 500px;*/ /* height: 500px;*/ /* background-color: aqua;*/ /* border: solid 1px yellow;*/ /*}*/ /*main > div {*/ /* background-color: red;*/ /* margin: auto;*/ /* width: fit-content;*/ /* padding: 20px;*/ /*}*/ /*width:fit-content自適應自身元素;width:max-content自適應子元素*/ /*5.max-content盒子根據內容尺寸自適應*/ /*main {*/ /* !*width: min-content;*!*/ /* width: max-content;*/ /* height: 300px;*/ /* margin: auto;*/ /* background-color: aqua;*/ /* border: solid 1px yellow;*/ /*}*/ /*main > div {*/ /* background-color: red;*/ /* margin-bottom: 10px;*/ /* padding: 10px;*/ /*}*/ </style> </head> <body> <!--1. 元素居中定義與外距定義細節--> <!--<div class="out">--> <!-- <div class="in"> content </div>--> <!--</div >--> <!--2.固定盒子大小尺寸--> <!--<article>--> <!-- <div> content </div>--> <!--</article>--> <!--3.fill-available自動撐滿可用空間--> <!--<main>--> <!-- <div>--> <!-- content--> <!-- </div>--> <!--</main>--> <!--4.fit-content根據內容自適應尺寸--> <!--<main>--> <!-- <div>--> <!-- content--> <!-- </div>--> <!--</main>--> <!--5.max-content盒子根據內容尺寸自適應--> <!--<main>--> <!-- <div>線上視訊教程學習網站，www.baidu.com</div>--> <!-- <div>程式語言開發</div>--> <!--</main>--> </body> </html>