HTML基础知识，番外篇

记录最近所学的HTML的前端的一些基础知识

几个概念：文档流，html内容在加载的时候会从上到下，从左到右加载到流量器

  脱离文档流，不再按照原来的方式进行，定位（position中的绝对定位）是完全脱离文档流，浮动（float）和相对定位是不完全脱离文档流，不完全脱离文档流的元素离开了原来的位置之后原来的区域会保留，完全脱离文档流则不会被保留

  普通文档流布局：浮动元素不会被父级元素计算高度，非浮动元素会覆盖浮动元素位置，margin属性会向上传递给父级元素

   BFC的布局规则：浮动元素会被父级元素计算高度，非浮动元素不会覆盖浮动元素位置（非浮动元素触发BFC），margin不会向父级元素传递，两个相邻的元素上下margin不会重叠（给其中一个元素添加一个单独的父级，然后让他的父级触发了BFC）

如何触发BFC：（以下任意一个）

1、float的值不为none
2、overflow的值不为visible
3、display的值为table-cell、table-caption和inline-block之一
4、position的值不为static或者releative中任何一个

当遇到这种情况，在定位时你用到了margin，然后因为margin属性向上传递，导致布局不理想，所以可以这么解决：在他的外部套一个div加上属性overflow:hidden

关于position的relative和absolute

relative：

根据自己原来的位置计算移动的位置（top，left，buttom，right）

元素移走后原来的位置保留

不影响元素本身的特征，提升层级

absolute：

完全脱离文档流

使行内元素支持所有样式（可以设置宽高）

提升层级

触发BFC

a标签span标签img标签是常用的行内元素标签具体的有【a,span,strong,em,mark,img,time】，剩下的都是块级元素，行内元素默认是没有宽高的其尺寸有内容决定，块级元素默认宽度是auto由其父级元素决定；

行内元素可以转为块级元素【display:block】此时的行内元素可以像块级元素一样使用，可以设置宽高

块级元素转行内元素【display:inline】

display:inline-block; 行内块元素
特征：
1、行内元素支持宽高
2、块元素可以在行中显示
3、不给宽高的话，宽度会由内容撑开
4、代码换行会被解析成一个空格

浮动 float
定义 使元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者相邻的浮动元素就会停下来
值 left、right、none
特征
1、块元素可以在一行显示
2、按照一个指定的方向移动，遇到父级的边界或者相邻的浮动元素就会停下来
3、行内元素支持宽高
4、脱离文档流
浮动后跟的元素（没有浮动）的位置是从前面浮动元素的位置开始的
注意：非浮动元素里的内容会留出前面浮动元素的位置(盒模型的位置)
5、块元素默认宽度会被改变（包裹性）
块元素不设置宽度，那宽度会自动变成内容所撑开的宽度
6、父级高度塌陷（破坏性）
子元素有浮云后，那父级元素的高度不会自动撑开了
7、换行不会被解析成空格
浮云后的元素就会脱离文档流了，那它就不属于文档流里的结构了，所以换行、空格都跟父级没关系了

after 伪类清除浮动

当一个块级元素进行浮动后它的父级元素的高度会塌陷（因为原来是由他撑起的父级的高度）所以需要在浮动后清除浮动（既保留了子块级元素的定位，又让父级元素高度恢复正常，使margin和padding生效）

在CSS中定义一个类样式：

.outer:after { clear:both;content:'';display:block;width:0;height:0;visibility:hidden; }

在进行了浮动的元素的父级元素上加上一个class【class="outer"】即可