1.文档流normal flow
-网页是一个多层结构
-通过CSS可以分别为每一层设置样式
-用户只能看到最顶层
-最底层：文档流（我们所创建的元素默认都是从文档流中进行排列）
<head><style>.box1 {background-color: blue;}/*它的父元素为body*/.box2 {width: 100px;background-color: red;}span {background-color: aqua;}</style>
</head>
<!--元素有两个状态：在文档流中/不在文档流（现在只考虑前者）-元素在文档流（基岩）中有什么特点：（元素也可以脱离文档流，不再区分块和行内）-块元素 div--块元素会在页面中独占一行--默认宽度时父元素的全部（即浏览器设置宽度为多少，背景就宽多少）--默认高度是子元素的总和-行内元素 span--行内元素不会只占一行，只占自身大小--在页面中自左向右排列(若一行容纳不了，则会换行)--默认高度和宽度跟里面的元素有关--><body><!--两个块元素--><div class="box1">我是div1</div><div class="box2">我是div2</div><span>我是span1</span><span>我是span2</span>
</body>
2.盒子模型
<!--盒子模型(对元素进行布局)-CSS将页面中的所有元素都设置了一个矩形的盒子-将元素设置为矩形的盒子后，对页面的布局就变成了将不同的盒子摆放到不同的位置-每一个盒子都有一下几个部分组成：--内容区（content）--内边距（padding）--边框（border）--外边距（margin），决定盒子位置
--><head><style>.box1 {/*内容区content，元素中的所有子元素和文本都在内容去中大小由width和height来设置*/width: 100px;height: 100px;background-color: aqua;/*边框border，边框属于盒子边缘设置边框：宽度 border-width颜色 border-color样式 border-style边框的大小会影响到盒子大小（盒子内容一直不变）*/border-width: 20px;border-color: red;border-style: solid;}</style>
</head><body><div class="box1">1234</div></body> 
1.盒子模型-边框
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1 {width: 200px;height: 200px;background-color: rgb(6, 106, 139);/*边框，下面三个元素缺一不可（border-width有默认值，一般3px）*//*border-xxx-width,xxx可以为top right bottom left来指定某一个边的宽度*/border-width: 10px 20px 30px 40px;/*边框上右下左（顺时针）宽度*//*指定边框颜色，同样可以分别制定四个边框的颜色，也可以用border-xxx-color指定颜色*/border-color: orange red yellow green;/*指定边框样式，与上面类似。默认值为none（无边框）solid 实线dotted 点状虚线dashed 虚线double 双线*/border-style: solid dotted dashed double;}.box2 {width: 100px;height: 100px;background-color: rgb(6, 106, 139);/*border简写属性,没有顺序要求border-xxx xxx可以为top right bottom left单独设置一边的样式*/border: solid 10px orange;/*单独去掉一边*/border-bottom: none;}</style>
</head><body><div class="box1"></div><div class="box2"></div>
</body>
2.盒子模型-内边距
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1 {width: 200px;height: 200px;background-color: rgb(6, 106, 139);border: solid 10px orange;/*内边距padding-内容区和边框之间的距离-四个方向：padding-top/right/bottom/left内边距的设置会影响到盒子大小，颜色默认为内容颜色盒子可见框的大小由内容区+内边距+边框共同决定*/padding-top: 50px;padding-bottom: 50px;padding-left: 50px;padding-right: 50px;/*padding的简写,上右下左，跟前面的border一样*/padding: 10px 20px 30px 40px;}.inner {width: 200px;height: 200px;background-color: yellow;}</style>
</head><body><div class="box1"><div class="inner"></div></div></body>
3.盒子模型-外边距
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1 {width: 200px;height: 200px;background-color: aqua;border: 10px red solid;/*外边距margin不影响盒子可见框的大小影响盒子的位置共有四个方向的外边距：margin-top/right/bottom/left*/margin-top: 100px; /*盒子向下移动*/margin-left: 100px; /*盒子向右移动*//*margin简写，跟border一样*/margin: 100px,100px; }</style>
</head><body><div class="box1"></div>
</body>
4.盒子模型-水平方向的布局
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.outer {/*width默认为auto*/width: 800px;height: 200px;border: 10px red solid;}/*元素水平方向的布局：元素在其父元素中水平方向的位置有以下几个属性共同决定margin-leftborder-leftpadding-leftwidthpadding-rightborder-rightmargin-right(一般不用，浏览器会自动调整确保下面的等式成立)要满足以下等式：上面的加起来=父元素内容区的宽度若不成立，则称为过度约束，等式会自动调整（一般调整margin-right）水平居中：width:xxxpx;margin:0 auto;*/.inner {width: 200px;height: 200px;background-color: aqua;margin-left: 100px;margin-right: auto;}</style>
</head><body><div class="outer"><div class="inner"></div></div>
</body>
5.盒子模型-垂直方向的布局
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/*元素垂直方向的布局*/.outer {width: 250px;height: 400px;background-color: #bfa;/*默认情况下父元素的高度被子元素撑开若设置具体值，则按具体值来 */}/*子元素实在父元素的内容区中排列的若子元素大于父元素，则溢出用overflow处理溢出的子元素overflow:visible:默认显示hidden：隐藏溢出部分scroll:生成两个滚动条，通过滚动条查看完整内容auto 根据需要生成滚动条*/.inner {width: 100px;height: 100px;background-color: red;margin-bottom: 100px;overflow: auto;}</style>
</head><body><div class="outer"><div class="inner"></div><div class="inner">111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div></div>
</body>
未完待续。。。
