内联元素的盒模型、文档流、浮动和定位

一.内联元素的盒模型

内容区、内边距、边框、外边框；

1. width和height：内联元素不能设置；
2. 内边距：
   a.设置水平内边距，内联元素可以设置水平方向的内边距：padding-left和padding-right；
   b.垂直方向内边距，内联元素可以设置垂直方向页边距：padding-top和padding-bottom，但是不会影响页面的布局（会有显示效果，但是如果下面有div ，div并不会移动，也就是不影响页面的布局）。
3. 水平外边距：
   a.支持水平方向的外边距：margin-left、right
   b.不支持垂直外边距：margin-top和bottom
4. .两个元素水平方向的外边距不会重叠，而是求和。

https://www.bilibili.com/video/av34069180/?p=54

二、display和visibility

1. 内联元素不能设置height和width，可以通过display属性变成块级元素
2. display：规定元素应该生成框的类型
3. 可选值：
   1).inline：可以将元素作为内联元素显示；
   2).block：可以将一个元素设置为块；
   3).inline-block：将一个元素转换为行内块元素（它可以使一个元素既有行内元素的特点，又有块元素的特点，既可以设置宽高，又不会独占一行）
   4).none：此元素不会被显示，并且元素不会再页面中继续占有位置；
4. visibility：默认值：visible，还可以设置为hidden。
5. display和visibility的区别：
   1） display：none，使用该方式隐藏的元素，不会再页面中显示，并且不再占据页面的位置。
   2） visibility：可以用来设置元素的隐藏和显示的状态。可选值：visible：默认值，元素默认在页面中显示。hidden：元素会隐藏不显示。（隐藏的元素虽然不会在页面中显示，但是它的位置会依然保持）
   https://www.bilibili.com/video/av34069180/?p=55

三、overflow

1. 子元素默认是存在于父元素的内容区中，理论上讲子元素的最大可以等于父元素内容区的大小，如果子元素的大小超过了父元素的内容区，我们称之为溢出的内容。父元素默认将溢出内容，在父元素外边显示。通过overflow可以设置父元素如何处理溢出内容。
2. overflow可选值：
   visible，默认值，不会对溢出内容做处理；
   hidden：溢出的内容，会被修剪，不会显示；
   scoll，会为父元素添加滚动条，通过拖动滚动条来查看完整内容，该属性无论内容是否溢出，都会添加水平和垂直方向的滚动条；auto：会根据需求自动添加滚动条；
   https://www.bilibili.com/video/av34069180/?p=55

四…文档流

一个网页就是HTML文档，一个文档就是一个页面，每个页面都是文档。网页实际上是一个多层的结构，我们看到的是网页的最上面的一层。

		文档流
			文档流处在网页的最底层，它表示的是一个页面中的位置，
			 我们所创建的元素默认都处在文档流中
			 
		元素在文档流中的特点
			块元素
				1.块元素在文档流中会独占一行，块元素会自上向下排列。
				2.块元素在文档流中默认宽度是父元素的100%，（其实宽度值是auto）
				3.块元素在文档流中的高度默认被内容撑开
			内联元素
				1.内联元素在文档流中只占自身的大小，会默认从左向右排列，
					如果一行中不足以容纳所有的内联元素，则换到下一行，
					继续自左向右。
				2.在文档流中，内联元素的宽度和高度默认都被内容撑开	

	
		当元素的宽度的值为auto时，此时指定内边距不会影响可见框的大小，
			而是会自动修改宽度，以适应内边距

https://www.bilibili.com/video/av34069180/?p=57

五.浮动

			 * 块元素在文档流中默认垂直排列，所以这个三个div自上至下依次排开，
			 * 	如果希望块元素在页面中水平排列，可以使块元素脱离文档流
			 * 使用float来使元素浮动，从而脱离文档流

/*

				 * 	可选值：
				 * 		none，默认值，元素默认在文档流中排列
				 * 		left，元素会立即脱离文档流，向页面的左侧浮动
				 * 		right，元素会立即脱离文档流，向页面的右侧浮动
				 * 
				 * 当为一个元素设置浮动以后（float属性是一个非none的值），
				 * 	元素会立即脱离文档流，元素脱离文档流以后，它下边的元素会立即向上移动
				 * 	元素浮动以后，会尽量向页面的左上或这是右上漂浮，
				 * 	直到遇到父元素的边框或者其他的浮动元素
				 * 	如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素
				 * 	浮动的元素不会超过他上边的兄弟元素，最多最多一边齐
				 */

上图中，box1（红）设置为float：left，层级会变高，会盖住向上动的2（黄）和3（绿）。

浮动的元素不会超过他上边的兄弟元素，最多最多一边齐（红、黄为float：left，绿：float：right），上图所示

				  浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，
			    	所以我们可以通过浮动来设置文字环绕图片的效果(如下图所示)
			

			在文档流中，子元素的宽度默认占父元素的全部
			
				 * 当元素设置浮动以后，会完全脱离文档流.
				 
				 * 	块元素脱离文档流以后，高度和宽度都被内容撑开
				 * 	内联元素脱离文档流以后会变成块元素（宽高可以被设置）

https://www.bilibili.com/video/av34069180/?p=57
https://www.bilibili.com/video/av34069180/?p=58
https://www.bilibili.com/video/av34069180/?p=59

六、position

1. 定位：

• 定位指的就是将指定的元素摆放到页面的任意位置
  通过定位可以任意的摆放元素
• 通过position属性来设置元素的定位
• 可选值：
  static：默认值，元素没有开启定位
  relative：开启元素的相对定位
  absolute：开启元素的绝对定位
  fixed：开启元素的固定定位（也是绝对定位的一种）

2. relative

				/*
				 * 当元素的position属性设置为relative时，则开启了元素的相对定位
				 * 	1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化
				 *  2.相对定位是相对于元素在文档流中原来的位置进行定位
				 * 	3.相对定位的元素不会脱离文档流
				 * 	4.相对定位会使元素提升一个层级
				 * 	5.相对定位不会改变元素的性质，
				 * 块还是块(不设置宽度，则宽度默认为父元素的100%)，
				 * 内联还是内联（设置宽高没用）
				 * 因为仍然在文档流中

				 * 当开启了元素的定位（position属性值是一个非static的值）时，
				 * 	可以通过left right top bottom四个属性来设置元素的偏移量
				 * 	left：元素相对于其定位位置的左侧偏移量
				 * 	right：元素相对于其定位位置的右侧偏移量
				 * 	top：元素相对于其定位位置的上边的偏移量
				 * 	bottom：元素相对于其定位位置下边的偏移量
				 * 
				 * 通常偏移量只需要使用两个就可以对一个元素进行定位，
				 * 	一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位
				 */

3. absolute

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

上图中，当祖先元素都没有设置定位时，box（黄）就会相对浏览器窗口进行定位

4. fixed

/*
				 * 当元素的position属性设置fixed时，则开启了元素的固定定位
				 * 	固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样
				 * 不同的是：
				 * 		固定定位永远都会相对于浏览器窗口进行定位（不管你的父元素是否开启定位）
				 * 		固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动（absolute会随滚动条滚动）
				 * 
				 * IE6不支持固定定位
				 */

https://www.bilibili.com/video/av34069180/?p=69
https://www.bilibili.com/video/av34069180/?p=70
https://www.bilibili.com/video/av34069180/?p=71