1、标准流和拖标流
标准流布局：
在没有写任何布局样式的时候，标签在网页中的默认的布局方式。
标签在标准流中的布局主要分为三种：
1)块级标签：一个占一行；默认宽度是父标签的宽度，高度是内容的高度；设置宽度有效。 eg:div,p,hr,h1~h5,等；
2)行内标签：一行可以显示多个；默认大小是内容大小；设置宽高无效。 eg:a,font,span,等；
3)行内块标签：一行可以显示多个；默认大小是内容大小；设置宽高有效。 eg:input,img,等；
display:
block 块级标签
inline 行内标签
inline-block 行内块标签
none 隐藏
脱流(脱离标准流布局):
不管什么标签以什么技术成功脱流，那么它的布局方式只有一种：一行可显示多个；默认大小是内容的大小；设置宽度有效。
浮动和定位都可以脱流：
<!--====================1.标准流布局示例================-->
<h1>====================1.标准流布局示例================</h1>
<!--行内标签-->
<a href="" style="background-color: red; width: 100px;">百度</a>
<!--块级标签-->
<p style="background-color: chartreuse; height: 100px;">我是段落1</p>
<p style="background-color: chartreuse; height: 100px; width: 120px;">我是段落2</p>
<!--行内块(可以看成)-->
<img src="img/bear.png" style="width: 60px; height: 60px;"/>
<img src="img/bucket.png"/>
<input type="" name="" id="" value="" style="width: 100px; height: 200px;" />
<input type="" name="" id="" value="" />
<hr />
<h1>====================2.修改标签类型示例=================</h1>
<!--块级变成行内-->
<p style="background-color: hotpink; display: inline; width: 200px; height: 100px;">我是段落3</p>
<p style="background-color: khaki; display: inline;">我是段落4</p>
<!--块级变行内块-->
<p style="background-color: lightcoral; height: 60px; display: inline-block;">我是段落5</p>
<p style="background-color: darkolivegreen; height: 60px; display: inline;">我是段落6</p>
<!--行内变块级和行内块-->
<a href="" style="background-color: sandybrown; height: 60px; display: block;">百度</a>
<a href="" style="background-color: aquamarine; height: 60px; display: inline-block;">谷歌</a>
<!--隐藏标签-->
<p style="display: none;">我是段落7</p>
<p>我是段落8</p>
2、浮动
1.浮动
通过设置标签的float属性，可以让标签浮动
left: 左浮动， 浮动后标签靠左显示
right: 右浮动， 浮动后标签靠右显示
2.什么时候使用浮动
浮动可以让竖着显示的横着来; 还可以让标签靠右显示
<h1>=====================1.浮动会导致标签脱流============================</h1>
<div id="" style="height: 250px;">
<p style="background-color: chartreuse; height: 40px; float: left;">我是段落1</p>
<p style="background-color: lavenderblush; float: left;">我是段落2</p>
<a href="" style="background-color: lightskyblue; height: 40px; float: left;">我是超链接</a>
</div>
<h1>======================2.浮动让标签靠右显示=======================</h1>
<div id="">
<p style="background-color: khaki; float: right;">我是段落3</p>
<p style="background-color: lavender; float: right;">我是段落4</p>
<p style="background-color: antiquewhite; float: right;">我是段落5</p>
</div>
3、清除浮动
清除浮动指的是清除因为浮动而产生的高度塌陷问题
高度塌陷：如果父标签没有设置高度，并且没浮动，子标签浮动的时候就会出现高度塌陷的问题
清除浮动的三种方法：
1)空盒子法：在会塌陷的标签的最后添加一个空的div，并且设置这个空的div的clear:both
2)方法2：哪个标签会塌陷就在那个的标签上加上overflow:hidden;
3)万能清除法：.clearfix1:after{display:block;clear:both;content:".";visibility:hidden;height:0;} .clearfix1{zoom:1;}
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.clearfix:after{
display: block;
clear: both;
content: '';
visibility: hidden;
height: 0;
}
.clearfix{
zoom: 1;
}
</style>
<!--空盒子法-->
<div style="background-color: gainsboro; height: 50px;"></div>
<div id="">
<div style="background-color: red; height: 100px; float: left; width: 40%;"></div>
<div style="background-color: blue; height: 100px; float:left; width: 50%;"></div>
<div style="clear: both;"></div>
</div>
<div style="background-color: greenyellow; height: 50px;"></div>
<div id="" style="height: 100px;"></div>
<!--方法2-->
<div style="background-color: gainsboro; height: 50px;"></div>
<div id="" style="overflow: hidden;">
<div style="background-color: red; height: 100px; float: left; width: 40%;"></div>
<div style="background-color: blue; height: 100px; float:left; width: 50%;"></div>
</div>
<div style="background-color: greenyellow; height: 50px;"></div>
<div id="" style="height: 100px;"></div>
<!--万能清除法-->
<div style="background-color: gainsboro; height: 50px;"></div>
<div id="" class="clearfix">
<div style="background-color: red; height: 100px; float: left; width: 40%;"></div>
<div style="background-color: blue; height: 100px; float:left; width: 50%;"></div>
</div>
<div style="background-color: greenyellow; height: 50px;"></div>
4、定位
定位属性：left,right,top,bottom 设置的分别是左右上下到参考对象的对应距离。
注意：如果以上标签要有效果，必须设置参考对象(position)
设置定位的参考对象：position属性
1)initial/static(不定位，即没有参考对象):body标签在不设置position的时候不是initial也不是static
2)absolute(绝对定位):将当前标签第一个非inital/static的父标签作为参考对象
3)relative(相对定位):相对标准流(自己)位置进行定位;一般讲标签的position设置为relative来保证子标签能相对自己定位。
4)fixed(相对浏览器进行定位)：固定在浏览器某个位置
5)sticky:当页面内容超过一屏相对浏览器定位；如果没有超过一屏就相对标准流进行定位。
<!--===============1.直接相对父标签定位(父标签本身不能是initial/static)================-->
<!--<div id="" style="width: 100px; height: 100px; background-color: hotpink; top: 200px; right: 10px;position: absolute;"></div>-->
<!--=====================2.absolute的定位============================-->
<!--<style type="text/css">
#div3{
right: 20px;
position: absolute;
}
</style>
<div style="width: 300px; height: 300px; background-color: red; position: relative;">
<div style="width: 200px; height: 200px; background-color: green; position: relative;">
<div id="div3" style="width: 80px; height: 80px; background-color: blue;">
</div>
</div>
</div>-->
<!--=======================3.relative的定位================================-->
<!--<style type="text/css">
#div3{
bottom: 50px;
position: relative;
}
</style>
<div id="div3" style="width: 100px; height: 100px; background-color: hotpink;"></div>-->
<!--========================4.相对浏览器定位:fixed=================================-->
<!--<style type="text/css">
#div3{
right: 10px;
top: 100px;
position: fixed;
}
</style>
<div id="div3" style="width: 100px; height: 100px; background-color: hotpink;"></div>
<div id="" style="height: 10000px; background-color: yellow;">
</div>-->
<!--========================5.sticky定位=================================-->
<style type="text/css">
#div3{
bottom: 10px;
position: sticky;
}
</style>
<div id="" style="height: 200px; background-color: yellow;"></div>
<div id="div3" style="width: 100%; height: 100px; background-color: hotpink;"></div>
5、盒子模型
1.盒子模型
每个可见的标签其实都是由content、padding、border和margin四个部分组成；
其中content、padding、border是可见的，margin是不可见的，但是占位置
2.控制盒子模型
1)content - 设置标签的宽度和高度其实就是在设置content的大小;
标签中的内容或者子标签都是显示或者添加到content上的;
设置标签的背景会作用于content
2)padding(内边距) - padding分四个方向；这四个方向可以单独控制(大小);
设置标签的背景会作用于padding
3)border (边框) - border分四个方向；每个方向可以单独控制(大小、样式和颜色);
4)margin(外边距) - margin分四个方向; 每个方向可以单独控制(大小)
不可见，但是占位置
<style type="text/css">
#div1{
/*1.控制content的大小*/
width: 100px;
height: 100px;
/*2.控制padding
1)一起设置(同时给四个方向赋值)
padding: 值;
2)单独设四个方向的值
padding-left
padding-right
padding-top
padding-bottom
*/
/*padding: 50px;*/
padding-left: 50px;
padding-top: 10px;
/*3.控制border
1)一起设置
border: 边框宽度 边框的样式(solid-实线，dashed-虚线, dotted-点划线, double-双线) 边框颜色;
*/
border: 3px solid rgba(255,0,0,1);
border-left: 5px dotted #0000FF;
/*2)设置圆角*/
/*同时设置四个方向的圆角*/
/*border-radius: 10px;*/
/*单独设置某一个圆角*/
/*border-top-left-radius: 20px;
border-bottom-right-radius: 30px;*/
/*border-radius: 20px 30px;*/
border-radius: 10px 20px 30px;
/*4.控制margin*/
/*margin: 100px;*/
margin-left: 100px;
}
</style>
<div id="div1" style="background-color: khaki;">
div1
</div>
<input style="padding-left: 20px;"/>
<div id="">
<div id="" style="width: 200px; height: 200px; background-color: rgba(0,0,255,0.8); float: left;">
</div>
<div style="width: 100px; height: 100px; background-color: red;">
</div>
</div>
