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