css - 04盒子模型

来源：恒创科技编辑：恒创科技编辑部

2024-01-18 17:48:59

<!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>