1 标准流布局
1.1 什么是标准流
在没有给标签通过CSS布局的时候，标签在浏览器中有一套默认的布局规则，这个规则就是标准流布局
1.2 标准流布局规则
- 块级标签 : 一个占一行(不管标签本身的宽度)；设置宽高有效；默认宽度是父标签的宽度，默认高度是内容的高度 例如：p,h1-h6,hr,div....
- 行内标签 : 一行可以有多个；默认大小是内容的大小；设置宽度无效 例如：a,font,label,span
- 行内块标签 : 一行可以显示多个；默认大小是内容的大小；设置宽度有效 例如: input,button,img
1.3 display属性
- block - 块级标签
- inline - 行内标签
- inline-block - 行内块
- none - 隐藏
1.4 脱流/脱标
只要标签脱流,标准的流的规则全部失效；不管什么样的标签在脱离标准流的情况下都是按照以下规则进行布局：
- 一行可以显示多个；默认大小是内容的大小；设置宽度有效
- 浮动和定位都可以让标签脱流
<!--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>
2 浮动
float属性有left(左浮动) 和 right(右浮动)
<!--==============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>-->
<!--情况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>
3 内容环绕现象
- 浮动内容环绕现象:被环绕标签浮动，环绕的内容的容器标签不浮动
- 无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元素”。显然标准流已经无法满足需求，这就要用到浮动。
- 浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。
- 什么是浮动元素的脱离文档流?
- 首先要知道，div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的标准流（网页的正常排版顺序）。
- 脱离文档流: 就是脱离正常的网页排版顺序。成为浮动流（浮动后的元素就是浮动流）。
- 简单来说当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样, 这个就是脱离文档流。
<div id="" style="background-color: seagreen; width: 100px; height: 100px; float: left;">
<img src="img/luffy.jpg"/>
</div>
<div id="" style="width: 400px;">
<p>
2019年4月17日，一则亚马逊即将退出中国市场的消息迅速传开。18日，亚马逊中国称不会退出中国。
但不少媒体却眼尖地发现亚马逊虽然依旧保留部分业务，其主体业务电商却即将退出中国。
又一个国际品牌折戟中国，真的是因为本土对手都太强了吗？ 刘强东曾公开指出亚马逊对中国团队不信任，
其总经理一直由未曾在中国居住过的外国人担任。对中国市场变化、对中国电商环境缺乏了解，
这或许是亚马逊十五年后的今天不得不撤离中国的原因之一。
对任何一家企业而言，不了解市场变化、环境所造成的影响是巨大的，甚至能决定一家企业的生死。
因此不管规模大小，企业对数据分析的要求都不能降低，甚至随着当前大数据可视化工具快速发展，
企业对数据分析的要求也随之提高。
</p>
</div>
4 清除浮动
- 清除浮动：清除浮动是清除因为浮动而产生的高度塌陷的问题。
- 高度塌陷: 当父标签不浮动，并且不设置固定高度；子标签浮动就会产生高度塌陷的问题
- 清除浮动的方法
- 空盒子法: 在高度会塌陷的标签的最后添加一个空的div,并且设置这个空的div的样式的clear属性为both
- 设置高度会塌陷的标签的样式的overflow属性为hidden
- 万能清除法: 给高度会塌陷的标签的after状态添加样式{display:block;clear:both;content:"";visibility:hidden;height:0;} 再给高度会塌陷的标签添加样式属性zoom的值为1
<!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>
<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 定位
- position属性 - 选中定位的标签的参考对象
- initial/static - 不定位，默认值；但是body的不是它们
- absolute - 绝对定位, 相对第一个position属性不是initial/static的父标签进行定位
- relative - 相对定位,相对标准流定位(相对于原标签在标准流中的位置进行定位)
- fixed - 相对浏览器定位
- sticky - 定位保持网页中最后一个块在最后面（网页滚动的时候在浏览的最下面，网页不超过一屏在内容的最下面）
- left\right\top\bottom
- 设置当前标签的左、右、上、下到参考对象的左、右、上、下的距离
- 注意: 在不给position属性的时候直接设置left\right\top\bottom属性无效
<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组成
- content - 内容
- 设置宽和高其实是设置盒子内容的大小；添加子标签是添加在内容上
- 设置背景颜色和背景图都会作用于内容部分
- padding - 内容外面的可见部分(默认没有)
- 有四个方向; 设置padding会让标签变大
- 设置背景颜色和背景图都会作用于padding部分
- border - 边框，有四个方向，可以单独控制每个方向的大小、颜色、样式
- 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>
- 练习 盒子布局
<!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>
