2019-05-15css布局
一、标准流
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>
二、
1、float属性
left（左浮动）
right（右浮动）
三、浮动内容环绕现象
浮动内容环绕现象:
被环绕标签浮动，环绕的内容的容器标签不浮动
四、清除浮动
1.清除浮动：
清除浮动是清除因为浮动而产生的高度塌陷的问题。
1）高度塌陷
当父标签不浮动，并且不设置固定高度；子标签浮动就会产生高度塌陷的问题
2)清除浮动的方法
a.空盒子法: 在高度会塌陷的标签的最后添加一个空的div,并且设置这个空的div的样式的clear属性为both
b.设置高度会塌陷的标签的样式的overflow属性为hidden
c.万能清除法: 给高度会塌陷的标签的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>
<!--
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>
五、定位
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>
六、盒子模型
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>
