1.标准流布局
<!--
1.什么是标准流布局
标签在没有添加布局的样式的时候默认的布局方式就是标准流布局：
块级标签：一个占一行；默认宽度是父标签的宽度，默认高度是内容的高度；设置宽高有效。（例如：p、h1~h6、ul、ol、dl、li、div等）
行内标签：一行可以显示多个; 默认大小是内容大小；设置宽高无效。(例如：a、span、font)
行内块标签：一行可以显示多个;默认大小是内容大小；设置宽高有效。（例如：img、input输入框）
2.display属性
修改标签样式的display属性，可以修改标签的类型
block - 块
inline - 行内
inline-block - 行内块
none - 隐藏标签
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- ====================标签类型======================= -->
<!-- 1.块级标签 -->
<h1>1.块级标签</h1>
<p style="background-color: indianred; width: 200px; height: 50px;">我是段落1</p>
<p style="background-color: skyblue; width: 120px;">我是段落2</p>
<div id="">
我是div1
</div>
<div id="" style="background-color: lemonchiffon;">
我是div2
</div>
<!-- 2.行内标签 -->
<h1>2.行内标签</h1>
<a href="https://www.baidu.com" style="background-color: mistyrose; width: 100px; height: 100px;">百度</a>
<a href="https://www.jd.com" style="background-color: aquamarine;">京东</a>
<span style="width: 200px; height: 400;">佛挡杀佛</span>
<!-- 3.行内块 -->
<h1>3.行内块</h1>
<img src="img/luffy.jpg" style="width:150px; height: 150px;">
<img src="img/luffy.jpg" >
<!-- ====================display属性======================= -->
<!-- 1.block -->
<h1>4.block</h1>
<a style="display: block; background-color: sandybrown; width: 120px;" href="#">百度</a>
<a href="#">爱奇艺</a>
<!-- 2.inline和inline-block -->
<h1>5.inline和inline-block</h1>
<div style="background-color: silver; display: inline; width: 100px;">
div3
</div>
<div style="background-color: yellow; display: inline-block; width: 100px;">
div4
</div>
</body>
</html>
2.网页布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 行内块的问题：
多个行内块在显示的时候中间有间隙
-->
<div style="height: 120px; background-color: lavender;">阿萨德</div>
<div style="background-color: sandybrown; display: inline-block;width: 30%; height: 800px;"></div>
<div style="background-color: khaki; display: inline-block; width: 50%; height: 800px;"></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: khaki; height: 100px; width: 30%; float: left;"></div>
<div style="background-color: seagreen; height: 100px; width: 70%; float: left;"></div>
<div style="background-color: moccasin; height: 100px; width: 100px; float: left;"></div>
<div style="background-color: magenta; height: 100px; width: 100px; float: right;"></div> -->
<!-- 2.浮动的原理 -->
<!-- <div style="background-color: hotpink; height: 200px; width: 600px;float: left;"></div>
<div style="background-color: green; height: 250px; width: 300px;"></div>
<div style="background-color: skyblue; height: 250px; width: 300px; float: right;"></div> -->
<!-- 3. 示例 -->
<div style="background-color: red; height: 100px; width: 200px;"></div>
<div style="background-color: green; height: 100px; width: 120px; float: left;"></div>
<div style="background-color: blue; height: 100px; width: 120px; float: right;"></div>
<div style="background-color: yellow; height: 200px; width: 120px; float: left;"></div>
<div style="background-color: deeppink; height: 300px; width: 100%;"></div>
</body>
</html>
4.浮动的应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 1.浮动可以让竖着显示的标签横着显示 -->
<!-- 2.做文字环绕的效果 -->
<div style=" background-color: aqua; float: left;">
<img src="img/luffy4.jpg" >
</div>
<div id="">
<p>=======记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。
初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。
记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。
初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。
记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。
初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。
记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。
初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。
记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。
初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。
记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。
初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。
记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。
初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。
记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。
初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。
记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。
记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。
记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。
记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。
初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。
记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。
初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。
记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。
初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。
记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。
初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。</p>
</div>
<hr >
<div style="width: 200px; height: 300px;">
<div style="float: right; width: 120px; height: 120px; background-color: palevioletred;"></div>
<div id="">
<a href="">超链接1</a>
<a href="">超链接1</a>
<a href="">超链接1</a>
<a href="">超链接1</a>
<a href="">超链接1</a>
<a href="">超链接1</a>
<a href="">超链接1</a>
<a href="">超链接1</a>
<a href="">超链接1</a>
<a href="">超链接1</a>
<a href="">超链接1</a>
<a href="">超链接1</a>
<a href="">超链接1</a>
<a href="">超链接1</a>
<a href="">超链接1</a>
<a href="">超链接1</a>
<a href="">超链接1</a>
<a href="">超链接1</a>
</div>
</div>
</body>
</html>
5.清楚浮动
<!--
清除浮动指的是清除因为浮动而产生的高度塌陷的问题
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
1. 高度塌陷：如果父标签没有设置高度，子标签有浮动，那么这个父标签的高度就会塌陷（相对后面的标签
2. 清除浮动
1）空盒子法 - 在高度会塌陷那个标签中的最后添加一个空的div，并且设置空的div的clear样式属性的值为both
2）设置overflow属性 - 设置高度会塌陷的标签的overflow样式属性为hidden
3) 万能清除法 -
-->
<!--====== 1.高度塌陷 ======-->
<div style="background-color: red; height: 120px;"></div>
<div style="background-color: blue;">
<div style="background-color: slateblue; height: 120px; width: 300px; float: left;"></div>
<div style="background-color: green; height: 200px; width: 400px; float: right;"></div>
</div>
<div style="background-color: thistle; height: 120px;"></div>
<!-- ====2.空盒子法清除浮动 =====-->
<!-- <div style="background-color: salmon; height: 120px;"></div>
<div style="background-color: blue;">
<div style="background-color: slateblue; height: 1020px; width: 300px; float: left;"></div>
<div style="background-color: green; height: 200px; width: 400px; float: right;"></div>
<div style="clear: both;"></div>
</div>
<div style="background-color: thistle; height: 120px;"></div> -->
<!-- ======3.设置overflow清除浮动!!!!最常用！！！======= -->
<!-- <style type="text/css">
.clear-float{
overflow: hidden;
}
</style>
<div style="background-color: salmon; height: 120px;"></div>
<div class="clear-float" style="background-color: blue;">
<div style="background-color: slateblue; height: 120px; width: 300px; float: left;"></div>
<div style="background-color: green; height: 200px; width: 400px; float: right;"></div>
</div>
<div style="background-color: thistle; height: 120px;"></div> -->
<!--====== 4.万能清除法，不常用！！！ ======-->
<!-- <style type="text/css">
#div2:after{
display: block;
clear: both;
content: '';
visibility: hidden;
height: 0;
}
#div2{
zoom: 1;
}
</style>
<div style="background-color: salmon; height: 120px;"></div>
<div id="div2" style="background-color: blue;">
<div style="background-color: slateblue; height: 120px; width: 300px; float: left;"></div>
<div style="background-color: green; height: 200px; width: 400px; float: right;"></div>
</div>
<div style="background-color: thistle; height: 120px;"></div> -->
</body>
</html>
6.定位
<!--
1.定位属性：top、bottom、left、right
top - 当前标签的顶部到另外一个标签顶部的距离
bottom - 当前标签的底部到另外一个标签底部的距离
left - 当前标签的左边到另外一个标签左边的距离
right - 当前标签的右边到另外一个标签右边的距离
2.设置定位的参考对象：position
initial/static - 默认值，不定位(body标签的position属性不是initial/static)
absolute - 绝对定位；相对第一个非initial/static的父标签进行定位
relative - 相对定位；相对当前标签在标准流中的位置进行定位。
（注意：relative一般用在父标签中，让它的子标签能够将这个标签作为absolute的参考对象）
fixed - 相对浏览器定位
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- =====1.不定位=========== -->
<h1>1.不定位</h1>
<style type="text/css">
#div1{
left: 200px;
}
</style>
<div id="div1" style="width: 100px; height: 100px; background-color: bisque;"></div>
<!-- =====2.绝对定位=========== -->
<h1>2.绝对定位</h1>
<style type="text/css">
#div2{
right: 0px;
bottom: 10px;
position: absolute;
}
</style>
<div style="background-color: red; width: 500px; height: 500px;">
<div style="background-color: yellow; width: 350px; height: 350px; position: relative;">
<div style="background-color: yellowgreen; width: 200px; height: 200px; ">
<div id="div2" style="background-color: hotpink; width: 100px; height: 100px;">
</div>
</div>
</div>
</div>
<!-- =====3.相对定位=========== -->
<h1>3.相对定位(相对标准流，一般不用)</h1>
<style type="text/css">
#div3{
top: 20px;
left: 50px;
position: relative;
}
</style>
<div id="div3" style="width: 100px; height: 100px; background-color: cornflowerblue;"></div>
<!-- =====4.相对浏览器定位=========== -->
<h1>4.相对浏览器定位</h1>
<style type="text/css">
#div4{
right: 10px;
bottom: 50px;
position: fixed;
}
#div5{
top: 0;
position: fixed;
}
</style>
<div id="div4" style="width: 100px; height: 45px; background-color: antiquewhite;">
回到顶部
</div>
<div id="div5" style="width: 100%; height: 100px; background-color: rgba(20, 120, 130, 0.3);">
</div>
</body>
</html>
7.盒子模型
<!--
1.盒子模型
每一个可见标签其实都是一个盒子模型，由4个部分组成：内容、padding、border、margin
1）内容 - 设置标签的width和height，其实就是在设置内容部分的大小; 子标签和标签内容都是显示在内容部分上的；背景也会作用于内容上
2）padding - 内边距；有4个方向;背景也会作用于内边距上(可见)
3）border - 边框; 有4个方向；背景不会作用于内边距上， 可见
4）margin - 外边距;有4个方向; 不可见
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style type="text/css">
#div1{
/* ======1.控制内容====== */
width: 100px;
height: 100px;
/* =====2.内边距=======*/
/* 一起设置 */
/* padding: 40px; */
padding-left: 20px;
padding-top: 40px;
/* =====3.边框====== */
/* 一起设置
border:类型 宽度 颜色
类型 - solid(实现) dotted(点划线) dashed(虚线) double(双线)
*/
/* border:solid 2px red; */
border-left: solid 5px red;
border-top: dotted 5px yellow;
/* =====4.外边距====== */
/* margin: 20px; */
margin-bottom: 60px;
margin-right: 20px;
/* float: left; */
}
</style>
<div style="width: 100px;height: 100px;background-color: #FF0000;"></div>
<div id="div1" style="background-color: yellowgreen;">
我是div1
</div>
<input type="text" name="" style="padding-left: 20px;"/>
<h1>自动布局</h1>
<hr>
<style type="text/css">
.c1{
width: 120px;
height: 120px;
background-color: seagreen;
float: left;
margin-left: 20px;
margin-top: 20px;
}
</style>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
</body>
</html>
8.居中布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 1.水平方向居中
1)设置需要居中的标签的margin-left和margin-right为auto(一个标签居中有效)。或者标签不设置
宽度，左右外边距为一个固定值，
2)设置父标签或者自己的标签的text-algin属性为center(针对文字和文字标签有效)
-->
<h1>示例1</h1>
<style type="text/css">
#div2{
margin-left: auto;
margin-right: auto;
}
#div4{
margin-left: 140px;
margin-right: 140px;
}
</style>
<div id="div1" style="background-color: yellow; width: 100%; height: 200px;">
<div id="div2" style="background-color: red; width: 100px; height: 100px;"></div>
<div id="div4" style="background-color: aqua; height: 60px;"></div>
</div>
<h1>示例2</h1>
<style type="text/css">
#p1{
text-align: center;
}
#div3{
text-align: center;
}
</style>
<p id="p1" style="background-color: sandybrown;">我是段落1</p>
<div id="div3" style="background-color: skyblue;">
<a href="">超链接1</a>
<a href="">超链接2</a>
<a href="">超链接3</a>
<a href="">超链接4</a>
<a href="">超链接5</a>
</div>
<!-- 2.垂直方向居中
1)
-->
<style type="text/css">
#div5{
width: 80px;
height: 80px;
background-color: red;
/* 垂直居中 设置top为50%，margin-top为本标签高度的一半*/
position: absolute;
top: 50%;
margin-top: -40px;
}
</style>
<div style="background-color: steelblue;height: 200px; position: relative;">
<div id="div5"></div>
</div>
</body>
</html>
