一 标准流和脱标流
1 问题： 有人问 为什么有的标签会换行 有的标签在同一行
因为我们的标签有分类的
总体来分 分成 标准流 和 脱标流（脱离标准流）
标准流 就是标签自带的特性，自带的特性又有三种情况
A 块级标签
独占一行 ，默认宽度和父标签同宽，高度取决于内容。可以通过 width和height设定内容的大小
例如： div p h系列 ol-li ul-li
B 行内标签
默认的宽高取决于内容，不能通过 width和height设定大小。多个行内标签在父标签宽度允许的情况下 在同一行
例如： span a
C 行内块级标签
默认的宽高取决于内容，可以通过 width和height设定内容的大小，多个行内块标签在父标签宽度允许的情况下 在同一行
例如: img input button
2 学标准流这个知识点干什么用
有的时候 我们需要使用 块级标签 但是有希望其能在同一行 此时我们就发现这个标签的块级特征不是我们想要的 所以需要改特征
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: yellow;
display: inline-block;
}
</style>
</head>
<body>
<div>123123</div>
<div>456456</div>
</body>
div默认是块级标签 但是我们希望的效果 行内块才可以实现 所以我们就需要将 div的特征改成 行内块
此时可以通过 display 属性 修改其特征 ： block 块 inline 行内 inline-block 行内块 none 隐藏
脱标流 就是脱离标准流 不符合标准流特征 产生一种新的特征
两种方式进行脱标： 浮动 定位
二 浮动
文字环绕效果 我们使用 标准流标签 很难实现这个效果。
所以他们就创造了一个新的 属性 叫做 float 翻译成 浮动
就是为了专门解决 文字环绕 。 他们将 设定float的标签 设定了新特性 文字遇到浮动元素 会自动绕开
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
img {
float: right;
}
</style>
</head>
<body>
<div>
<img src="img/bdbri.png" width="200" >
<p>
2000年，在杨峻荣的推荐下，周杰伦开始演唱自己创作的歌曲；11月7日，发行首张个人专辑《Jay》，并包办全部歌曲的作曲、和声编写以及监制工作 [27] ；该专辑融合了R&B、嘻哈等多种音乐风格 [28] ，其中主打歌曲《星晴》获得第24届十大中文金曲优秀国语歌曲金奖 [29] ，而周杰伦也凭借该专辑在华语乐坛受到关注，并于次年举办的第12届台湾金曲奖颁奖典礼上凭借该专辑获得最佳流行音乐演唱专辑奖，入围最佳制作人奖，凭借专辑中的歌曲《可爱女人》获得第12届台湾金曲奖最佳作曲人奖提名 [30-31] 。
周杰伦
周杰伦(24张)
2001年9月，周杰伦发行了第二张专辑《范特西》，他除了担任专辑的制作人外，还包办了专辑中所有歌曲的作曲；该专辑是周杰伦确立其唱片风格的作品，其中结合中西方音乐元素的主打歌《双截棍》成为饶舌歌曲的代表作之一 [32-33] ；该专辑发行后也让周杰伦打开东南亚市场 [32] ，并于次年凭借该专辑获得第13届台湾金曲奖最佳专辑制作人奖、最佳流行音乐专辑奖以及香港唱片销量大奖颁奖典礼十大销量国语唱片等奖项，周杰伦亦凭借专辑中的歌曲《爱在西元前》获得第13届台湾金曲奖最佳作曲人奖 [34] ；10月，为李玟创作融合中西方音乐元素的歌曲《刀马旦》；12月24日，发行EP《Fantasy + Plus》，收录了他在桃园巨蛋演唱会上演唱的《你比从前快乐》《世界末日》等歌曲；同年，获得第19届十大劲歌金曲颁奖典礼最受欢迎唱作歌星金奖、叱咤乐坛流行榜颁奖典礼叱咤乐坛生力军男歌手金奖等奖项。
2002年参演个人首部电视剧《星情花园》；2月，在新加坡新达城国际会议展览中心举行演唱会；7月，发行专辑《八度空间》，除了包办专辑中所有歌曲的作曲外，他还担任专辑的制作人 [35] ；该专辑以R&B曲风的歌曲为主，并获得g-music风云榜白金音乐奖十大金碟奖、华语流行乐传媒大奖十大华语唱片奖、新加坡金曲奖大奖年度最畅销男歌手专辑等奖项 [36-38] ；9月28日，在台北体育场举行“TheOne演唱会” [39] ；12月12日至16日，在香港红磡体育馆举行5场“THE ONE”演唱会 [40] ；12月25日，在美国拉斯维加斯举办“THE ONE”演唱会；同年，获得第1届MTV日本音乐录影带大奖亚洲最杰出艺人奖、第2届全球华语歌曲排行榜最受欢迎创作歌手奖、第9届新加坡金曲奖亚太最受推崇男歌手奖等奖项 [41-42] 。
</p>
</div>
</body>
1 标签设定浮动之后 就会脱离标准流 向左或者向右移动
2 直到遇到父标签的边界或者其他浮动元素
3 连续浮动的元素在同一行
4 标签将失去之前的特性 ： 默认宽高取决于内容 可以通过width height调整大小 （和行内快差不多）
HTML 布局 两个时代：
1 table布局时代
2 div+css布局（浮动布局）
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {margin: 0;padding: 0;}
ul {list-style: none;}
a {text-decoration: none;}
.haha {background-color: aliceblue; height: 40px;line-height: 40px;}
.hehe { width: 1190px; margin: 0 auto; }
.xixi {float: left;}
.heihei {float: right;}
.hehe li {float: left;margin-right: 8px;}
</style>
</head>
<body>
<div>
1 浮动塌陷
当一个标签 只包含浮动元素 并且没有设定高度的时候 其高度塌陷为0
2 清除浮动
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div {background-color: red; overflow: hidden;}
span {float: left;}
</style>
</head>
<body>
<div>
<span>123</span>
<span>123</span>
<span>123</span>
</div>
</body>
1 为什么要定位？
其实浮动已经能解决很多问题了，但是浮动有一个局限性 只能左右 如果我想往左100
所以又有了一个操作 叫做 定位
1 默认定位 就是标签不设定的时候 就是默认定位 值 static 称之为 静态定位 其实就是不开启
2 基于浏览器窗口定位 --- 小广告
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div {
width: 100px;
padding: 10px;
border: 2px solid red;
position: fixed;
bottom: 100px;
top: 200px;
}
</style>
</head>
<body>
<div>
一刀999
<button>关闭</button>
</div>
<ul>
<li>你好 世界</li>
<li>你好 世界</li>
<li>你好 世界</li>
<li>你好 世界</li>
<li>你好 世界</li>
<li>你好 世界</li>
<li>你好 世界</li>
<li>你好 世界</li>
3 基于自己原先的位置 进行定位 并且会占据原先的位置
应用： 经常作为其他定位的父标签定位方式使用
4 基于第一个非static的父标签进行定位
如果所有的父标签 都是static默认值 此时以body作为定位坐标系
<head>
