网页布局(内附高度塌陷的解决方案)

盒子模型(框模型)


为元素设置边框
要为一个元素设置边框必须指定三个样式：
	border-width:边框的宽度 
	border-color:边框颜色 
	border-style:边框的样式
border-width
使用border-width可以分别指定四个边框的宽度如果在border-width指定了四个值,则四个值会分别设置给上右下左,按照顺时针的方向设置的
如果指定三个值，则三个值会分别设置给上  左右  下
如果指定两个值,则两个值会分别设置给上下  左右
如果指定一个值,则四边全都是该值
除了border-width, CSS中还提供了四个border-xxx-width
xxx的值可能是top right bottom left专门用来设置指定边的宽度

颜色设置
border-color:
和宽度一样, color也提供四个方向的样式

设置边框样式
border-style:
	可选值：
		none     默认值,没有 
		solid    实线 
		dotted   点状边框 
		dashed   虚线 
		double   双线

大部分的浏览器中,边框的宽度和颜色都是有默认值,而边框的样式默认值都是none

boder:
	作用：边框的简写样式,通过它可以同时设置四个边框的样式,宽度,颜色而且没有任何的顺序要求border一指定就是同时指定四个边不能分别指定

boder-xxx:
	作用：border-top border-right border-bottom border-left可以单独设置四个边的样式,规则和border一样,只不过它只对一个边生效



内边距
内边距，指的是盒子的内容区和盒子边框之间的距离
一共有四个方向的内边距,可以通过:
	padding-top:
	padding-right:
	padding-bottom:
	padding-left:
来设置四个方向的内边距
内边距会影响盒子的可见框的大小,元素的背景会延伸到内边距

padding:
使用padding可以同时设置四个边框的样式,规则和border-width一致



外边距
边距指的是当前盒子与其他盒子之间的距离，他不会影响可见框的大小,而是会影响到盒子的位置。
盒子有四个方向的外边距:
	margin-top:
	margin-right: 
	margin-bottom: 
	margin-left:
外边距也可以指定为一个负值,如果外边距设置的是负值,则元素会向反方向移动

margin还可以设置为auto, auto一般只设置给水平方向的margin
如果只指定,左外边距或右外边距的margin为auto则会将外边距设置为最大值
垂直方向外边距如果设置为auto,则外边距默认就是0
如果将left和right同时设置为auto,则会将两侧的外边距设置为相同的值,就可以使元素自动在父元素中居中,所以我们经常将左右外边距设置为auto以使子元素在父元素中水平居中

margin:
外边距同样可以使用简写属性margin,可以同时设置四个方向的外边距



垂直外边距重叠
	在网页中(垂直方向)的(相邻)外边距会发生外边距的重叠
	所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和
	如果父子元素的垂直外边距相邻了,则子元素的外边距会设置给父元素

浏览器为了在页面中没有样式时,也可以有一个比较好的显示效果,所以为很多的元素都设置了一些默认的margin和padding,而它的这些默认样式,正常情况下我们是不需要使用的。所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的掉


内联元素不能设置width和height
内联元素可以设置水平方向内边距
内联元素可以设置垂直方向内边距，但是不会影响页面布局
内联元素可以设置边框，但是垂直的边框不会影响页面的布局
内联元素可以设置水平外边距，水平方向的相邻的外边距不会重叠，而是求和


display:
	作用：将一个内联元素变成块元素,通过display样式可以修改元素的类型
	可选值:
		inline:可以将一个元素作为内联元素显示 
		block:可以将一个元素设置块元素显示 
		inline-block:将一个元素转换为行内块元素-可以使一个元素既有行内元素的特点又有块元素的特点既可以设置宽高,又不会独占一行 
		none:不显示元素,并且元素不会在页面中继续占有位置


visibility:
	作用：可以用来设置元素的显示和隐藏的状态
	可选值：
		visible  默认值，元素默认会在页面显示
		hidden   元素会隐藏不显示，但他的位置依然保持



子元素默认是存在于父元素的内容区中，理论上子元素最大可以等于父元素大小的内容
如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示，超出父元素的内容我们称为溢出的内容
父元素默认是将溢出的内容在父元素外边显示

overflow:
	作用：可以设置父元素如何处理溢出的内容
	可选值：
		visible   默认值，不会对溢出的内容处理，溢出的内容在父元素外显示
		hidden    溢出的内容会被修剪，不会显示
		scroll    会为父元素添加滚动条，通过拖动滚动条查看完成内容，该属性不论内容是否溢出，都会添加水平和垂直双向的滚动条
		auto      会根据需求自动添加滚动条




文档流
文档流处在网页的最底层,它表示的是一个页面中的位置我们所创建的元素默认都处在文档流中

元素在文档流中的特点：
块元素
	1.块元素在文档流中会独占一行,块元素会自上向下排列。
	2.块元素在文档流中默认宽度是父元素的100%
	3.块元素在文档流中的高度默认被内容撑开
内联元素
	1.内联元素在文档流中只占自身的大小,会默认从左向右排列,如果一行中不足以容纳所有的内联元素,则换到下一行,继续自左向右。
	2.在文档流中,内联元素的宽度和高度默认都被内容撑开




浮动
float:
	作用：使用float来使元素浮动,从而脱离文档流
	可选值:
	none,默认值,元素默认在文档流中排列 
	left,元素会立即脱离文档流,向页面的左侧浮动 
	right,元素会立即脱离文档流,向页面的右侧浮动

当为一个元素设置浮动以后(float属性是一个非none的值)
元素会立即脱离文档流,元素脱离文档流以后,它下边的元素会立即向上移动
元素浮动以后,会尽量向页面的左上或这是右上漂浮,直到遇到父元素的边框或者其他的浮动元素
如果浮动元素上边是一个没有浮动的块元素,则浮动元素不会超过块元素
浮动的元素不会超过他上边的兄弟元素,最多最多一边齐


浮动的元素不会盖住文字,文字会自动环绕在浮动元素的周围,所以我们可以通过浮动来设置文字环绕图片的效果
当元素设置浮动以后,会完全脱离文档流。块元素脱离文档流以后,高度和宽度都被内容撑开
内联元素脱离文档流之后会变成块元素



高度塌陷
在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷。由于父元素的高度塌陷了,则父元素下的所有元素会向上移动,这样将会导致页面布局混乱


解决方法1:

所以在开发中一定要避免出现高度塌陷的问题,,我们可以将父元素的高度写死,以避免塌陷的问题出现,但是一旦高度写死,父元素的高度将不能自动适应子元素的高度,所以这种方案是不推荐使用的。


根据W3C的标准,在页面中元素都一个隐含的属性叫做Block Formatting Context简称BFC,该属性可以设置打开或者关闭,默认是关闭的。当开启元素的BFC以后,元素将会具有如下的特性:
	1.父元素的垂直外边距不会和子元素重叠
	2开启BFC的元素不会被浮动元素所覆盖
	3开启BFC的元素可以包含浮动的子元素

如何开启元素的BFC
	1.设置元素浮动使用这种方式开启,虽然可以撑开父元素,但是会导致父元素的宽度丢失而且使用这种方式也会导致下边的元素上移,不能解决问题
	2.设置元素绝对定位
	3设置元素为inline-block可以解决问题,但是会导致宽度丢失,不推荐使用这种方式
	4.将元素的overflow设置为一个非visiblef
·推荐方式:将overflow设置为hidden是副作用最小的开启BFC的方式。

	在IE6中虽然没有BFC,但是具有另一个隐含的属性叫做hasLayout,该属性的作用和BFC类似,所在IE6浏览器可以通过开hasLayout来解决该问题。开启方式很多,我们直接使用一种副作用最小的:直接将元素的zoom设置为1即可


解决方法2：
	我们有时希望清除掉其他元素浮动对当前元素产生的影响,这时可以使用clear来完成功能 clear可以用来清除其他浮动元素对当前元素的影响
	可选值:none,默认值,不清除浮动
	left,清除左侧浮动元素对当前元素的影响 
	right, 清除右侧浮动元素对当前元素的影响 
	both,清除两侧浮动元素对当前元素的影响清除对他影响最大的那个元素的浮动

解决方法3:
	可以通过after伪类向元素的最后添加一个空白的块元素,然后对其清除浮动, 这样做和添加一个div的原理一样,可以达到一个相同的效果,而且不会在页面中添加多余的div,这是我们最推荐使用的方式,几乎没有副作用
例：
	.clearfix:after{
		content: "";
		display:block;
		clear:both;
	}




定位

	-定位指的就是将指定的元素摆放到页面的任意位置通过定位可以任意的摆放元素

通过position属性来设置元素的定位
	-可选值:
	static:默认值,元素没有开启定位
	relative:开启元素的相对定位
	absolute:开启元素的绝对定位
	fixed:开启元素的固定定位(也是绝对定位的一种)


当元素的position属性设置为relative时,则开启了元素的相对定位 
	1,当开启了元素的相对定位以后,而不设置偏移量时,元素不会发生任何变化 
	2.相对定位是相对于元素在文档流中原来的位置进行定位 
	3.相对定位的元素不会脱离文档流
	4.相对定位会使元素提升一个层级
	5.相对定位不会改变元素的性质,块还是块,内联还是内联


当position属性值设置为absolute时,则开启了元素的绝对定位
	绝对定位:
		1,开启绝对定位,会使元素脱离文档流
		2.开启绝对定位以后,如果不设置偏移量,则元素的位置不会发生变化
		3.绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的(一般情况,开启了子元素的绝对定位都会同时开启父元素的相对定位);如果所有的祖先元素都没有开启定位,则会相对于浏览器窗口进行定位
		4.绝对定位会使元素提升一个层级
		5.绝对定位会改变元素的性质,内联元素变成块元素，块元素的宽度和高度默认都被内容撑开

当元素的position属性设置fixed时,则开启了元素的固定定位
固定定位也是一种绝对定位,它的大部分特点都和绝对定位一样 ,不同的是:
	固定定位永远都会相对于浏览器窗口进行定位固定定位会固定在浏览器窗口某个位置,不会随滚动条滚动


当开启了元素的定位(position属性值是一个非static的值)时,可以通过left right top bottom四个属性来设置元素的偏移量 
	left:元素相对于其定位位置的左侧偏移量 
	right:元素相对于其定位位置的右侧偏移量 
	top:元素相对于其定位位置的上边的偏移量 
	bottom:元素相对于其定位位置下边的偏移量



层级

如果定位元素的层级是一样,则下边的元素会盖住上边的
通过z-index属性可以用来设置元素的层级,可以为z-index指定一个正整数作为值,该值将会作为当前元素的层级层级越高，越优先显示对于没有开启定位的元素不能使用z-index
父元素的层级再高,也不会盖住子元素



透明
设置元素的透明背景opacity可以用来设置元素背景的透明,它需要一个0-1之间的值
	0表示完全透明
	1表示完全不透明
	0.5表示半透明

opacity属性在IE8及以下的浏览器中不支持持 IE8及以下的浏览器需要使用如下属性代替 	alpha(opacity=透明度)
	透明度,需要一个0-100之间的值 
	0表示完全透明 
	100表示完全不透明 
	50半透明



背景
使用background-image来设置背景图片

	语法: background-image:url(相对路径);
	如果背景图片大于元素,默认会显示图片的左上角
	如果背景图片和元素一样大,则会将背景图片全部显示
	如果背景图片小于元素大小,则会默认将背景图片平铺以充满元素
	可以同时为一个元素指定背景颜色和背景图片,这样背景颜色将会作为背景图片的底色
	一般情况下设置背景图片时都会同时指定一个背景颜色


background-repeat用于设置背景图片的重复方式
	可选值:repeat,默认值,背景图片会双方向重复(平铺) 
	no-repeat ,背景图片不会重复,有多大就显示多大 
	repeat-x,背景图片沿水平方向重复 
	repeat-y,背景图片沿垂直方向重复

参阅(https://www.bilibili.com/video/av34069180/?p=1)