1.标准流布局
<!--1.什么是标准流
在没有给标签通过CSS布局的时候，标签在浏览器里有一套默认的布局规则，这个就是标准流
2.标准流布局规则
a.块标签 - 一个占一行（不管标签本身的宽度）；设置宽高有效；默认宽度是父标签的宽度，默认高度是内容的高度
例如：p，h1 - h6，hr，div...
b.行内标签 - 一行有多个；默认大小是内容的大小；设置宽高无效
例如：a、font、span、label
c.行内块标签 - 一行可以显示多个；默认大小是内容的大小；设置宽高有效
例如：input、button、img
3.display属性
a.display：block - 块标签
b.display：inline - 行内标签
c.display：inline-block - 行内块
d.display：none - 隐藏
4.脱流/脱标
只要标签脱流/脱标，标准流的规则全部失效；不管什么标签在脱离标准流的情况下都是按照以下规则进行布局：
一行可以显示多个；默认大小是内容大小；设置宽高有效
浮动和定位都可以让标签脱流
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>标准流布局</title>
<style type="text/css">
button:active{
border: 2px;
border-color: darkred;
}
</style>
</head>
<body>
<!-- 1.块标签 -->
<p style="background-color: greenyellow; font-size: 40px;">我是段落1</p>
<p style="background-color: hotpink; width: 200px; height: 50px;">我是段落2</p>
<!-- 2.行内标签 -->
<a href="" style="background-color: aqua; height: 60px;">百度</a><a href="" style="background-color: lightpink; width: 60px;">新浪</a>
<input type="submit" name="" id="" value="提交" style="width: 150px; height: 150px"/>
<button type="button" style="width: 60px; height: 60px; background-color: deeppink; border: none; border-radius: 8px;">提交</button>
<br>
<br>
<br>
<div id="" style="display: inline-block; background-color: dimgrey; height: 60px;">我是div1</div>
<div id="" style="display: inline;background-color: pink;">我是div2</div>
<br><br>
<form action="" method="post">
<input type="submit" name="" id="" value="提交" style="width: 150px; height: 150px"/>
</form>
</body>
</html>
2.float
<!--1.float属性
left - 左浮动
right - 右浮动
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- ========1.浮动能够让标签脱标========== -->
<div id="" style="background-color: #8B0000; height: 200px; width: 200px; float: left;">左浮动</div>
<div id="" style="background-color: deeppink; height: 200px; width: 200px; float: right;">右浮动</div>
<div id=""style="height: 400px; width: 100%; background-color: aqua; text-align: center;">
老子没动
</div>
<!-- ========2.浮动的原理========== -->
<br><br>
<div id="" style="width: 100%; height: 100px; background: blue;"></div>
<div id="" style="width: 60%; height: 300px; background: pink; float: left;"></div>
<div id="" style="width: 40%; height: 300px; background: yellowgreen; float: right;"></div>
<div id="" style="width: 100%; height: 200px; background: red; float: left;"></div>
</body>
</html>
3.内容环绕
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--浮动
被环绕的对象浮动，环绕的内容的容器标签不浮动
-->
<div style="width: 100px; height: 100px; background-color: springgreen; float: left;"></div>
<div style="width: 500px;">深蓝的天空中挂着一轮金黄的圆月，下面是海边的沙地，都种着一望无际的碧绿的西瓜。其间①有一个十一二岁的少年，项带银圈，手捏一柄钢叉，向一匹猹②尽力地刺去。那猹却将身一扭，反从他的胯下逃走了。
这少年便是闰土。我认识他时，也不过十多岁，离现在将有三十年了；那时我的父亲还在世，家景也好，我正是一个少爷。那一年，我家是一件大祭祀的值年。这祭祀，说是三十多年才能轮到一回，所以很郑重。
正月里供像，供品很多，祭器很讲究，拜的人也很多，祭器也很要防偷去。我家只有一个忙月（我们这里给人做工的分三种：整年给一定人家做工的叫长工；按日给人做工的叫短工；自己也种地，只在过年过节以及收租时候来给一定的人家做工的称忙月），忙不过来，他便对父亲说，可以叫他的儿子闰土来管祭器的。
我的父亲允许了；我也很高兴，因为我早听到闰土这名字，而且知道他和我仿佛年纪，闰月生的，五行缺土，所以他的父亲叫他闰土。他是能装弶捉小鸟雀的。</div>
</body>
</html>
4.清除浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.clear3:after{
display: block;
clear: both;
content:"";
visibility: hidden;
height: 0;
}
.clear3{
zoom: 1;
}
</style>
</head>
<body>
<!--
1.清除浮动 ：清除浮动是因为浮动而产生的高度塌陷问题
2.高度塌陷：当父标签不浮动，并且u设置固定高度；字标签浮动就会产生高度塌陷问题
3.清除浮动的方法：
a.空盒子法：在高度会塌陷的标签最后添加一个空的div，并且设置这个空的div的样式clear属性为both
b.设置高度会塌陷的标签样式的overflow属性为hiddden
c.万能清除法：给高度会塌陷的标签的after状态添加样式{display: block;clear: both;content:"";visibility: hidden;height: 0;}
再给高度塌陷的标签添加样式属性zoom的值为1
-->
<div id="" style="height: 150px; background-color: #8B0000;">
top
</div>
<!-- overflow: hidden
<div id="" style="background-color: black; overflow: hidden;">
-->
<div id="" class="clear3" style="background-color: black;">
<div id="" style="height: 200px; width: 200px; background-color: aqua; float: left;">
</div>
<div id="" style="height: 300px; width: 200px; background-color: blueviolet; float: right;">
</div>
<!-- 空盒子法
<div style="clear:both;"> </div>
-->
</div>
<div id="" style="height: 150px; background-color: cadetblue;">
footer
</div>
</body>
</html>
5.定位
<!--定位
1.position属性 - 选中定位的标签的参考对象
initial/static - 不定位，默认值；但是body的默认值不是他
absolute - 绝对定位，相对于第一个position属性不是initial/static 的父标签进行定位
relative - 相对标准流定位（一般将参照对象的position设置为relative）,相对于标准流中的位置
fixed - 相对浏览器定位
sticky - 定位保持网页中最后一个快在最后面（网页内容不满一屏时贴着内容最后，内容超过一屏在浏览器最下边）
2.left\right\top\bottom - 设置当前标签到参考对象左右上下的距离
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{
position: relative;
}
#div2{
/* 设置参考对象 */
position: absolute;
/* 设置间距 */
right: 150px;
top: 150px;
border-radius: 50%;
}
#div3{
position: fixed;
right: 20px;
top: 20px;
}
#div4{
position: sticky;
bottom: 1px;
}
</style>
</head>
<body>
<!-- 绝对定位 -->
<div id="div1" style="background-color: hotpink; width: 400px; height: 400px;">
<div id="div2" style="background-color: yellowgreen; width: 100px; height: 100px;">
</div>
</div>
<br><br>
<div id="" style="height: 1500px; width: 100%; background-color: #8B0000;">
</div>
<!-- 相对浏览器定位 -->
<div id="div3" style="background-color: deeppink; width: 100px; height: 100px;">
</div>
<div id="div4" style="background-color: cyan; height: 40px; width: 100%;">
</div>
</body>
</html>
6.盒子模型
<!--盒子模型
html中每个可见的标签都是一个盒子模型，有content、padding、border、margin组成
1).content - 内容，设置宽和高其实是设置盒子内容的大小；添加子标签是添加在内容上的，
设置背景颜色，背景图都会作用于内容部分
2).padding - 内容外面的可见部分（默认没有）设置padding会让标签变大
设置背景颜色，背景图都会作用于内容部分
3).border - 有4个方向，可以单独控制每个方向的大小、颜色、样式
4).margin - 内边距，有4个方向，可以单独控制每个方向的大小
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style type="text/css">
#div1{
/* 1.设置padding
一起设置4个方向上的padding为10px
padding: 10px;
*/
/* 2.单独设置各个方向的padding */
padding-top: 20px;
/* 3.border
1.一起赋值：边框宽度、边框样式、边框颜色
边框样式：solid（实线）、dashed（虚线）、dotted（点划线）、double（双线）
*//
border: 3px solid darkorchid;
/* 4.margin */
margin: 20px;
}
.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8{
width: 100px;
height: 100px;
background-color: deeppink;
margin-left: 10px;
margin-top: 10px;
float: left;
}
#div2{
background-color: black;
width: 450px;
height: 232px;
}
</style>
</head>
<body>
<div id="div1" style="width: 200px; height: 200px; background-color: deeppink;">
<p>我是段落1</p>
</div>
<br><br>
<div id="div2">
<div class="c1">
</div>
<div class="c2">
</div>
<div class="c3">
</div>
<div class="c4">
</div>
<div class="c5">
</div>
<div class="c6">
</div>
<div class="c7">
</div>
<div class="c8">
</div>
</div>
</body>
</html>
