<!--
1.什么是标准流
在没有给标签通过css布局的时候，标签在浏览器中有一套默认的布局规则，这个规则就是标准流
2.标准流怎么布局
1）块级标签 --- 一个占一行（不管标签 本身的宽度），
设置款和高是有效的，
默认宽度是父标签的宽度，默认高度是内容的高度。
例如：h1-h6 hr p div ul dl...
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>
<style type="text/css">
*{
margin: 0;padding: 0;
}
</style>
</head>
<body>
<div id="" style="background-color: green;width: 100%;height: 100px;">
</div>
<div style="width: 60%;background-color: red;height: 200px;float: left;">
<p>我是段落</p>
</div>
<div style="width: 40%;background-color: blue;height: 200px;float: right;"></div>
<div style="background-color: gold;width: 100%;height: 100px;float: left;"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
浮动内容环绕：
被环绕的浮动，环绕的不浮动
-->
<div id="" style=" background-color: red;width: 100px;height: 100px;float: left;">
<img src="img/luffy.jpg"/>
</div>
<div id="" style="width: 300px;">
十多个方法你不打算不能浪费那个老妇女上来，会计年度非编码两次牛逼多了哪来的绿上
来辽宁两个，多次V领看是否能慢慢玩陪违反那地方来看美女的上来开发和要付it复古特
点与it一体化融合投入和规范和认识我国还不要撒地方set印度飞饼 ，会计年度非编码
两次牛逼多了哪来的绿上来辽宁两个，多次V领看是否能慢慢玩陪违反那地方来看美女的
上来开发和要付it复古特点与it一体化融合投入和规范和认识我国还不要撒地方set印
度飞饼 溶液非的地方
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1.清除浮动
清除浮动是清除因为浮动而产生的高度他显得问题
1）高度塌陷
当父标签不浮动，并且不设置固定高度；子标签浮动就会产生高度塌陷问题。
2）清除浮动的方法
a.空盒子法
在要塌陷的标签的最后加一个空的div，并且设置他的样式clear属性为both
b.设置overflow属性
在要塌陷的标签中，添加样式overflow的属性为hidden
c.万能清除法
给高度塌陷的标签的after状态
-->
</body>
</html>
<!--
position属性 --- 选择定位的标签的参照物
值为：initial/static --- 不定位，这个是默认值
值为：absolute --- 绝对定位，相对第一个position属性不是initial/static的父标签进行定位
值为：relative --- 相对定位，相对标准流定位（相对于原标签在标准流中的位置进行定位）
值为：fixed --- 相对浏览器定位
值为：sticky --- 定位保持网页中最后一个块在最后面（网页滚动的时候在浏览器的最下面；网页不超过一屏就在内容的最下面）
left/right/top/bottom ---设置当前标签的左右上下到参考对象的距离
注意：在不给position属性的时候直接设置left/right/top/bottom是无效的
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<!--
盒子模型
html中每个可见的标签都是一个盒子模型。由content、padding、border、margin组成
1.content 内容： 设置宽和高其实是设置内容的大小；添加子标签是添加到内容内
设置背景颜色和背景图都会作用于内容部分
2.padding 内边框：内容外面的可见部分（默认是没有）；
有四个方向，设置padding会让标签变大，
而且设置的背景颜色和图片都会作用在padding上
3.border 边框： 有四个方向，可以单独控制每个方向的大小颜色和样式
一起赋值 -- border：边框宽度 边框样式 边框颜色
边框样式: solid（实线）；dashed（虚线）；dotted（点划线）；double（双实线）
4.margin 外边框：有四个方向；不可见，但是占位置
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;padding: 0;
}
.c2{
margin-top: 30px;
margin-left: 15%;
margin-right: 15%;
}
.c1{
background-color: green;
margin: 30px;
height: 200px;
width: 150px;
/*float: left;*/
position: relative;
display: inline-block;
left: 30px;
}
</style>
</head>
<body>
<div class="c2">
<div class="c1">
<!--<p>我是段落1</p>-->
</div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
</div>
<div class="c2">
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
</div>
</body>
</html>
