html学习笔记（img+body+盒子模型+块级元素居中+margi塌陷+float+文字围绕、打点）

1、使用img产生间隔问题

img属于行级块级元素（标签）其属性display的值为inline-block,因有inline元素，故有文字属性，如果换行使用多个img标签来显示图片的时候，因换行带来的空格（空格是文本的空格符）使得每个图片产生间隔，要消除间隔，则应该使得img标签之间没有换行或者空格

2.body产生的margin

body标签本身具备有8px 的margin，故一般编写css的时候使用*{margin：0；}初始化

3盒子模型的要点

盒子模型分为：标准盒子模型（宽高计算不包含border），IE盒子模型（宽高计算包含border）
盒子的三大部分：盒子壁（border）+内边距（padding）+盒子内容（content）
盒子模型：三大部分+边界（margin）
盒子计算其高度（height）一般不包含margin

padding的取值个数问题：
四个值：上，右，下，左
三个值：上，左右，下
两个值：上下，左右
一个值：四个方向的值一样

4、块级元素居中

利用 position：absolute
left：50%
top：50%
再加上margin（一般根据块的大小进行）

z-index即代表z轴，靠近人的视角，一般是解决元素之间的层叠

5.margin塌陷

垂直父子元素的margin-top的值一般取父子两者大的值（margin塌陷）
解决方法：将父级变成bfc( block format context)
要触发盒子的bfc可以使用：position：absolute
display :inline-block
float :left/right
overflow:hidden

6.float产生的浮动流

1、产生浮动流：http://www.w3school.com.cn/css/css_positioning_floating.asp
那个元素设置了float的属性不为none就会产生浮动流，就会脱离正常的文档流（不在同一层）会影响其后的元素布局，但是不影响该元素上面元素布局；
产生浮动流的元素因脱离正常文档流固支撑不起父级的框架，该元素不再影响父级的框架大小

具有父级的元素，因使用float使得父级的框架不起作用（支撑不起父级的框架）即产生了浮动流，使得块级元素不可见，仅有bfc、文本、或带有文本属性的元素可见
解决方案：1、在产生浮动流后加p标签并且使用clear:both
2、使用伪元素：：before、：：after等使用clear

clear要起作用则必须为块级元素：display：block

注意凡是设置了position:absolute,float:right/left这些元素会变成display:inline-block(行级块级元素）
2、清除浮动：
1、使用clear属性实现
1.1、对于同一级的元素div1和div2中，div1设置了float,要想阻止div2框围绕浮动框div1，需要对该框div2应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。(div2的clear值为left和both有效？)
1、2对于父级wrapper包含两个浮动float元素div1和div2,要实现div1和div2在视觉效果上包含在wrapper中,因为浮动流是对向下影响的，固可以在div2后面添加一个新的并且是空的元素使用或者使用伪元素clear：both；
1.4使用伪元素::after，给父元素添加一个。wrapper::after{content:’’;
clear:both;}
1.3当然最直接的方法是给.wrapper添加float,但是会产生新的浮动流，对wrapper后面同级的元素产生影响
2、将包含全部为浮动元素的父级框架wrapper支撑起来可以将其设置成BFC
触发BFC的方法(在wrapper上设置)：
2.1posttion：absolute;
2.2display:inline-block;(块级元素变成inline-block会产生换行间隙?)
display:table;
disaply:table-cell;
disaply:table-caption
display:flex;
display:inline-flex;(块级元素变成inline-block会产生换行间隙?)
2.3 overflow:除了visible以外的值

7.文字围绕图片

使用float标签可使得文字围绕图片

8、文字居中

容器高等于文字高则文字居中显示如 height:30px,
line-height:30px

9、文字溢出容器要打点展示

1、单行文本: 文本失去换行 white-space：nowrap
溢出部分隐藏 overflow：hidden
溢出部分用点点 text-overflow：ellipsis
2、多行文本：截断处理overflow：hidden

10、当网速不够刷不出图如何用文字描述

当网速不好的时候,浏览器会屏蔽掉css这时候一些图片就不会显示，这时候就要用文字表达
方法1、text-indent:首行缩进
white-space：nowrap文本失去换行
overflow：hidden
方法2、width设置为0但是height不为0
padding-top：
overflow：hidden

11、嵌套问题

行级元素可以嵌套行级，块级元素可以嵌套任何元素，但是p元素列外
p元素不可以嵌套块级元素
a元素不可以再嵌套a元素

12、要使得页面的边框随着屏幕的大小改变 ，而内容不变

只要设置margin:0 auto;

13、BFC
BFC=块级格式上下文=（Block Formatting Context）
作用：
1、包裹浮动元素
2、阻挡外边距叠加