盒模型，百分比设置元素的大小学习
1.盒模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒模型/框模型</title>
</head>
<!-- .box -->
<div class="box">景甜</div>
<div class="box">景甜</div>
<style>
.box{
width: 150px;
height: 150px;
/* 内敛元素 */
/* display: inline; */
/* display:block; */
display: inline-block;
/* 可视属性只有3个,边框（solid实线dashed虚线）和背景色 */
/* border-top: 5px solid royalblue; */
border: 5px dashed royalblue;
background-color: blueviolet;
/* 可以通过添加内边框padding(不显示)，让内容与边框之间可以呼吸 */
padding :10px;
/* 看padding用如下： */
background-clip: content-box;
margin: 15px;
}
/*宽:15+5+10+150+15+5+10 = 210px */
/*为了简化布局,计算方便，我们通常直观的认为盒子的width,heigth应该就是盒子最终的大小 */
.box {
/* border-box: width/height = padding + border + width/height */
box-sizing: border-box;
/*content-box:width/height = width/height 默认值kbox-sizing: content-box; */
/* box-sizing: content-box; */
}
/* box-sizing:border-box;计算盒子大小时,将内边距与边框全部计算在内所以，width,height就是最终大小，从而简化布局*/ */
/*实现所有元素样式的初始化*/
{
padding:0;
margin:0;
box-sizing: border-box;
}
/* 盒模型常用属性
1.width
2.height
3.border
4.padding
5. margin */
/* box-sizing:改变了盒子大小的计算方式* */
</style>
<body>
<!-- html文档的元素默认在浏览器中按照文档流的顺序排列即，排列顺序与元素在html中的书写顺序是一致(写到前面的就显示在前面)-->
<!-- 元素分为二类,内联元素，块元素 -->
<!-- 对应的排列方式与页面元素的排列方式是一致
所有页面是一个二维的空间，只有宽和高
二维空间中的元素排列只有二种方式:水平，垂直默认先水平，排列不下，再换行按垂直方向排列
只要这个元素的类型确定,例如是一个内联元素 display: inline,则这个元素就水平排列，一行显示不下就换行显示 -->
<!-- 如果这个元素的display:block，就是一个块级元素， -->
<!-- 央元素二边默认会自动添加换行，二边不允许存在其它元素，总是独占一行-->
<!-- !--所以，页面中的所有元素,都是以一个可视的矩形块进行排列布局的 -->
<!--这个矩形块就是盒子,它的描述方式就是:"盒模犁"-->
</body>
</html>
2.百分比设置元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百分比设置元素的大小</title>
<style>.container{
}
header {
height: 6vh;
width: 90vw;
background-color: aqua;
}
footer{
height: 8vh;
width: 90vw;
background-color: blanchedalmond;
}
main{
height: 86vh;
width: 90vw;
background-color: aquamarine;
}
/* 100-(6+8)=86 */
</style>
<!-- <style>
body{
background-color: blueviolet;
}
</style> -->
<style>
/* 内容高度 */
.container{
background-color: brown;
width: 50vw;
height: 50vh; */
/* min-height:1000px; */
/* width: 100%;
height: 100%; */
/* height: auto;auto也是0也不行 */
}
</style>
</head>
<body>
<!-- <div class="container"></div> .container容器 就算放上颜色也是没有效果的-->
<div class="container">
<header>页眉</header>
<main>主体</main>
<footer>页脚</footer>
</div>
<!--<div class="containet">今天阳光真好</div> -->
</body>
</html>
