1. 标准流布局
<!--
1.什么是标准流
在没有给标签通过CSS布局的时候，标签在浏览器中有一套默认的布局规则，这个规则就是标准流布局
2.标准流布局规则
1)块级标签 : 一个占一行(不管标签本身的宽度)；设置宽高有效；默认宽度是父标签的宽度，默认高度是内容的高度
例如：p,h1-h6,hr,div....
2)行内标签 : 一行可以有多个；默认大小是内容的大小；设置宽度无效
例如：a,font,label,span
3)行内块标签 : 一行可以显示多个；默认大小是内容的大小；设置宽度有效
例如: input,button,img
3.display属性
block - 块级标签
inline - 行内标签
inline-block - 行内块
none - 隐藏
4.脱流/脱标
只要标签脱流,标准的流的规则全部失效；不管什么样的标签在脱离标准流的情况下都是按照以下规则进行布局：
一行可以显示多个；默认大小是内容的大小；设置宽度有效
浮动和定位都可以让标签脱流
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.块级标签-->
<p style="background-color: yellowgreen; width: 200px; display: inline-block;">我是段落1</p>
<p style="background-color: lightcoral; font-size: 40px; width: 300px; display: inline-block;">我是段落2</p>
<!--2.行内标签-->
<!--<a href="" style="background-color: lavender; width: 200px; height: 100px;">百度一下</a>
<a href="" style="background-color: lemonchiffon;">百度一下</a>-->
<div style="height: 200px; background-color: hotpink;">
<p>我是段落</p>
</div>
<div style="width: 70%; height: 300px; background-color: lightgreen; display: inline-block;">
<!--<p>我是段落</p>-->
</div>
<div style="width: 29%; height: 300px; background-color: salmon; display: inline-block;"></div>
<div style="height: 200px; background-color: seagreen;"></div>
</body>
</html>
2. 浮动
<!--
1.float属性
left(左浮动)
right(右浮动)
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--==============1.浮动能够让标签脱流==============-->
<!--<div style="background-color: lightblue; height: 60px; float: left;">div1</div>
<div style="background-color: lightcoral; height: 60px; float: left;">div1</div>
<a href="" style="background-color: lavender; width: 200px; float: left;">百度一下</a>-->
<!--==============2.浮动原理========================-->
<!--<div style="background-color: lightcoral; height: 100px; width: 20%; float: left;"></div>
<div style="background-color: rgba(0,255,0,0.4); height: 200px; width: 30%; float: left;"></div>
<div id="" style="background-color: bisque; width: 100%; height: 100px; display: inline-block;">
div1
</div>-->
<!--==============3.练习：分析一下代码的效果===========-->
<!--情况1-->
<!--<div style="background-color: green; width: 200px; height: 100px;"></div>
<div style="background-color: rgba(255,0,0,0.4); width: 400px; height: 250px; float: left;"></div>
<div style="background-color: yellow; width: 300px; height: 150px;"></div>
<div style="background-color: deeppink; width: 100px; height: 80px; display: inline-block;">div</div>-->
<!--情况2-->
<!--<div style="background-color: green; width: 200px; height: 100px; float: right;"></div>
<div style="background-color: red; width: 400px; height: 250px;"></div>
<div style="background-color: rgba(255,255,0,0.4); width: 300px; height: 150px; float: left;"></div>
<div style="background-color: deeppink; width: 100px; height: 80px; display: inline-block;">div</div>-->
<div style="width: 100%; height: 100px; background-color: yellowgreen;">
<!--<div id="" style="height: 50%; width: 100%; background-color:deepskyblue;">
</div>-->
</div>
<div style="width: 60%; height: 400px; background-color: red; float: left;">
<p>我是段落</p>
</div>
<div style="width: 40%; height: 400px; background-color: sandybrown; float: left;"></div>
<div style="width: 100%; height: 200px; background-color: khaki; float: left;"></div>
</body>
</html>
3. 内容环绕
<!--
1.float属性
left(左浮动)
right(右浮动)
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--==============1.浮动能够让标签脱流==============-->
<!--<div style="background-color: lightblue; height: 60px; float: left;">div1</div>
<div style="background-color: lightcoral; height: 60px; float: left;">div1</div>
<a href="" style="background-color: lavender; width: 200px; float: left;">百度一下</a>-->
<!--==============2.浮动原理========================-->
<!--<div style="background-color: lightcoral; height: 100px; width: 20%; float: left;"></div>
<div style="background-color: rgba(0,255,0,0.4); height: 200px; width: 30%; float: left;"></div>
<div id="" style="background-color: bisque; width: 100%; height: 100px; display: inline-block;">
div1
</div>-->
<!--==============3.练习：分析一下代码的效果===========-->
<!--情况1-->
<!--<div style="background-color: green; width: 200px; height: 100px;"></div>
<div style="background-color: rgba(255,0,0,0.4); width: 400px; height: 250px; float: left;"></div>
<div style="background-color: yellow; width: 300px; height: 150px;"></div>
<div style="background-color: deeppink; width: 100px; height: 80px; display: inline-block;">div</div>-->
<!--情况2-->
<!--<div style="background-color: green; width: 200px; height: 100px; float: right;"></div>
<div style="background-color: red; width: 400px; height: 250px;"></div>
<div style="background-color: rgba(255,255,0,0.4); width: 300px; height: 150px; float: left;"></div>
<div style="background-color: deeppink; width: 100px; height: 80px; display: inline-block;">div</div>-->
<div style="width: 100%; height: 100px; background-color: yellowgreen;">
<!--<div id="" style="height: 50%; width: 100%; background-color:deepskyblue;">
</div>-->
</div>
<div style="width: 60%; height: 400px; background-color: red; float: left;">
<p>我是段落</p>
</div>
<div style="width: 40%; height: 400px; background-color: sandybrown; float: left;"></div>
<div style="width: 100%; height: 200px; background-color: khaki; float: left;"></div>
</body>
</html>
4. 清除浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*方法1*/
/*.clear1{
clear: both;
}*/
/*方法2*/
/*.clear2{
overflow: hidden;
}*/
/*方法3*/
.clear2:after{
display:block;
clear:both;
content:"";
visibility:hidden;
height:0;
}
.clear2{
zoom: 1;
}
</style>
</head>
<body>
<!--
1.清除浮动：
清除浮动是清除因为浮动而产生的高度塌陷的问题。
1）高度塌陷
当父标签不浮动，并且不设置固定高度；子标签浮动就会产生高度塌陷的问题
2)清除浮动的方法
a.空盒子法: 在高度会塌陷的标签的最后添加一个空的div,并且设置这个空的div的样式的clear属性为both
b.设置高度会塌陷的标签的样式的overflow属性为hidden
c.万能清除法: 给高度会塌陷的标签的after状态添加样式{display:block;clear:both;content:"";visibility:hidden;height:0;}
再给高度会塌陷的标签添加样式属性zoom的值为1
-->
<div style="background-color: hotpink; height: 150px;"></div>
<div class="clear2" style="background-color: black;">
<div id="" style="background-color: aquamarine; height: 150px; width: 200px; float: left;">
</div>
<div id="" style="background-color: yellow; height: 550px; width: 200px; float: right;">
</div>
<!--1.空盒子法-->
<!--<div class="clear1"></div>-->
</div>
<div style="background-color: blanchedalmond; height: 250px;">bottom</div>
</body>
</html>
5. 定位
<!--定位
1.position属性 - 选中定位的标签的参考对象
initial/static - 不定位，默认值；但是body的不是它们
absolute - 绝对定位, 相对第一个position属性不是initial/static的父标签进行定位
relative - 相对定位,相对标准流定位(相对于原标签在标准流中的位置进行定位)
fixed - 相对浏览器定位
sticky - 定位保持网页中最后一个块在最后面（网页滚动的时候在浏览的最下面，网页不超过一屏在内容的最下面）
2.left\right\top\bottom
设置当前标签的左、右、上、下到参考对象的左、右、上、下的距离
注意: 在不给position属性的时候直接设置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: 100px;
}
/*===========相对定位===============*/
#div22{
position: relative;
right: -100px;
}
/*============相对浏览器定位==========*/
#div111{
position: fixed;
right: 20px;
bottom: 100px;
}
#div222{
position: sticky;
bottom: 20px;
}
</style>
</head>
<body>
<div id="" style="background-color: yellow; height: 400px;">
</div>
<!--===========绝对定位========-->
<!--<div id="div1" style="background-color: yellow; width: 400px; height: 400px;">
<div id="div2" style="background-color: red; width: 100px; height: 100px;"></div>
</div>-->
<!--===========相对定位========-->
<!--<div id="div11" style="background-color: red; width: 100px; height: 100px;"></div>-->
<!--<div id="div22" style="background-color: yellow; width: 100px; height: 100px;"></div>-->
<!--===========相对浏览器定位============-->
<!--<div id="div111" style="background-color: yellowgreen; width: 100px; height: 100px;"></div>-->
<div id="div222" style="background-color: yellowgreen;height: 100px;"></div>
<div id="div3" style="position: absolute; left: 100px; right: 100px; background-color: chartreuse; height: 100px;">
</div>
</body>
</html>
6. 盒子模型
<!--盒子模型
html中每个可见的标签都是一个盒子模型，由content、padding、border、margin组成
1)content - 内容，设置宽和高其实是设置盒子内容的大小；添加子标签是添加在内容上；
设置背景颜色和背景图都会作用于内容部分
2)padding - 内容外面的可见部分(默认没有),有四个方向; 设置padding会让标签变大；
设置背景颜色和背景图都会作用于padding部分
3)border - 边框，有四个方向，可以单独控制每个方向的大小、颜色、样式
4)margin - 内边距，有四个方向；不可见，但是占位置
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
/*2.padding*/
/*1)一起设置4个方向的padding值都为50px*/
/*padding: 50px;*/
/*2)单独设置各个方向的padding*/
padding-left: 20px;
padding-top: 20px;
/*3.border
* 1）一起设置
* 格式 - border: 边框宽度 边框样式 边框颜色
* 边框样式 - solid(实线)\dashed(虚线)\dotted
*/
border: 2px solid darkblue;
/*2)单独设
*/
/*border-left-width: 10px;*/
border-left: 5px dashed red;
/*4.margin*/
/*1）一起设置*/
/*margin: 20px;*/
margin-left: 20px;
}
</style>
</head>
<body>
<div id="div1" style="width: 100px; height: 100px; background-color: hotpink;">
<p>我是段落</p>
</div>
<input type="" name="" id="" value="" style="padding-left: 10px;"/>
</body>
</html>
7. 盒子布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1{
width: 400px;
height: 600px;
background-color: yellowgreen;
float: left;
margin-left: 20px;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
</body>
</html>
