day18-HTMLcss布局

一 标准流布局

1.1.标准流布局

标签在没有添加布局相关属性的时候，默认的布局方式就是标准流布局。
① 块级标签：一个占一行；默认宽度是父标签的宽度，默认高度是内容的内容的高度；设置宽高有效
h1~h6，p，div

<h1 style="background-color: black;color: red;">我是标题一</h1>
		<h2>我是标题二</h2>
		
		<p style="background-color: aqua;">段落一</p>
		<p>段落二</p>
		
		<div style="background-color: burlywood;">
			div1
		</div>

② 行内标签：一行可以显示多个；默认大小是内容的大小；设置宽高无效。
a、span、label、font…

<h1>2.行内标签</h1>
		<div id="" style="height: 200px;background-color: aqua;font-size: 20px;">
		<a href="" style="background-color: beige;height: 100px;">超链接1</a>	
		</div>
		<a href="" style="background-color: beige;height: 100px;">超链接1</a>
		<a href="" style="background-color: brown;">超链接2</a>

③ 行内块标签：一行可以显示多个；默认大小是内容的大小；设置宽高有效。
image、输入框

1.2.display属性（css）

block - 将标签修改成块级标签
inline - 将标签修改成行内标签
inline-block - 将标签修改成行内块
none - 影藏标签

<div id="" style="display: block;background-color: red;width: 6.25rem;height: 200px;">
			div1
</div>

二 浮动

2.1.脱流

让标签脱离标准流，不按照标准流的方式进行布局。浮动和定位都可以让标签脱流。
所有的标签，只要脱离了标准流布局的方式就只有一种：一行显示多个；默认大小是内容大小；设置宽高有效。

2.2.浮动 - float

left - 左浮动(先看上面的空白地方放得下该标签与否)
right - 右浮动

<div style="background-color: violet;height: 120px;width: 100%;float: left;"></div>
<div style="background-color: gold;width: 40%;height: 500px;float: left;"></div>
<div style="background-color: lightcoral;width: 60%;height: 500px;float: left;"></div>

三 浮动清除

清除浮动：清除因为浮动产生的高度塌陷问题

3.1.高度塌陷：父标签不浮动，并且没有设置高度，子标签浮动就可能产生高度塌陷（没有设置高度的父标签会塌陷）

3.2.清除浮动：

① 空盒子法：在高度会塌陷的标签的最后添加一个空的div，并且设置它的属性clear为both

<div id="" style="clear: both;">
</div>	

② 设置overflow：设置高度会塌陷的标签的overflow属性为hidden。

<style type="text/css">
				.suside{
					overflow: hidden;
				}
</style>

四 定位

4.1.定位

定位的属性有四个：left、right、top、bottom
left：设置标签的左边到另外一个标签的左边的距离
right：设置标签的右边到另外一个标签的右边的距离
top：设置标签的顶部到另外一个标签的顶部的距离
bottom：设置标签的底部到另外一个标签的底部的距离

4.2.选择定位的参考对象：position

①static/initial（默认值，body例外）：不选参考对象，不定位（设置距离无效）

<style type="text/css">
			#div1{
				left: 18.75rem;
				position: initial;
			}
		</style>
		<div id="div1" style="background-color: red;height: 100px;">
		</div>

②absolute（绝对定位）：选择第一个非static/initial的父标签作为参考对象

<style type="text/css">
			#div4{
				/* 设置position是为了让自己能够相对于别人去定位（选定位的参考对象 */
				position: absolute;
				left: 300px;
			}
		</style>
		<div id="div2" style="background-color: darkcyan;height: 500px;width: 500px;">
			<div id="div3" style="background-color: aqua;height: 400px;width: 400px;">
				<div id="div4" style="background-color: blueviolet;height: 300px;width: 300px;">
				</div>
			</div>
		</div>

③relative（相对定位）：相对当前标签在标准流中的位置定位（一般用于让自己成为子标签的参考对象时使用）

<style type="text/css">
			#div5{
				bottom: 50px;
				/* 如果设置position设置为relative是把自己原来的位置作为参考对象，很少用；
				 一般设置positi为relative是为了让自己成为别人的参考对象*/
				position: relative;
			}
		</style>
		<div id="div5" style="background-color: red;height: 300px;width: 300px;">
		</div>

④fixed（相对浏览器定位）

<style type="text/css">
			#div6{
				bottom: 30px;
				position: fixed;
			}
		</style>
		<div id="" style="background-color: goldenrod;height: 1000px;">
			<div id="div6" style="background-color: aqua;height: 300px;width: 300px;">
				
			</div>
		</div>
		<p>我是底部</p>

⑤sticky

<style type="text/css">
			.div7{
				position: sticky;
				bottom: 30px;
			}
		</style>
		<div style="height: 2000px; background-color: blue;"></div>
		
		<div class="div7" style="height: 100px;background-color: blueviolet;"></div>

五 盒子模型

5.1.盒子模型：

html中每一个可见的标签不管在任何情况下都由4个部分组成：content、padding、border和margin
① content：可见的；设置背景会作用于content设置标签的宽度和高度其实就是在设置content的宽度和高度，标签内容和子标签都是添加到content上的。
② padding：可见的；设置背景会作用于padding和content；padding有4个方向，每个方向可以单独控制
③ border：可见的；设置背景会作用于padding和content；border有四个方向，每个方向也可以单独控制。
④ margin：不可见；有四个方向，每个方向都可以单独控制。