初学前端知识点

前端知识点

1、区分块级元素、行内元素、行内块元素

1). 块级元素：

包括：h1~h6,p,div,ol,ul,dl,li,table,form;
特点：块级元素可以设置宽高,自动换行,并且默认宽度为100%

2). 行内元素：

包括：span,a,strong(b),em(i),del(s),ins(u),sub,sup……;
特点：行内元素不可以设置宽高，margin值只有水平方向有效，在一行显示，宽高由内容决定

3). 行内块元素：

包括：input,img;
特点：在一行显示，可以设置宽高，默认内容高度，把两者综合了;

2、区别line-height与height

1）定义不一样，前者是行高，后者是元素的高度
2）对象不一样，前者一般适用于文字，而后者一般用于图片或者某个框架
3）当line-height等于height时，文字会居中
4）行高会继承
5）line-height:1.5;表示行高就是字体大小的1.5倍；
6）font:24px/1.5 “微软雅黑”;这里的字体大小是24px,行高是：24px * 1.5

3、盒子水平居中：

1)不脱离文档流（正常的带宽的块级元素）：margin:0 auto;
2)脱离文档流（定位或者浮动）：
position:relative;
top:50%;
margin-top:-盒子自身高度;或者是transform:translateX(-50%);

4、盒子垂直居中：

1)position：relative;
top:50px;
margin-top:-盒子自身高度;

2)transform:translateY(-50%)替换margin-top,其他与上面一样；

3)给父元素加上
display:flex;
align-items:center;垂直居中
justify-content:center;水平居中

5、盒子模型

1）margin（垂直方向外边距塌陷,垂直方向上一个盒子的bottom和下一个盒子的top中只采用最大的那个值，默认透明色）border、padding（会撑大带宽的盒子，默认是透明色）、content(显示内容以及图片背景，同时背景也会占据padding，因此padding可能会有颜色);

2）box-sizing:content-box； 标准盒子模型：盒子实际宽度=width+padding+border+margin;
border-box； ie盒子模型:width=border+padding+content

6、浮动（float）

1)float:left/right/none;
2)目的：浮动就是为了让块级元素能在一行内显示，方便布局；
浮动会影响后面的盒子，但是前面的不影响。例子：如果前面的盒子没有浮动，当前盒子浮动了，当前盒子也不会影响前面的盒子；如果后面的盒子不浮动就会自动占据当前盒子的位置，如果后面的盒子也浮动了，那么则会与当前盒子并排一起。
3)浮动的特点：
1、如果子盒子有一个有浮动，那么其他的子盒子也要浮动
2、浮动会默认把元素转换成行内块模式，高度默认自适应
3、浮动的元素是不会占据父元素的padding值的
4)清除浮动
目的：为了解决父元素因子元素浮动而引起高度为0的问题。（也就是说如果父元素不给高度，而子元素有浮动，那么父元素的高度是无法由子元素撑高决定的，只能清除浮动后才可以由子元素撑高;
方法：
1、额外标签法：在最后的一个浮动子元素后面添加一个div空标签，然后设置样式为clear：both;
2、给父元素添加overflow:hidden;（通过触发BFC）
3、使用伪元素after清除浮动：（推荐）正常浏览器都是这个
.clearfix:after{
content:“”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{
*zoom:1;//ie6清除浮动
}
最后给父级元素添加clearfix类

4、使用双伪元素清除浮动（小米官网） .clearfix:before,.clearfx:after{ content:""; display:table; } .clearfix:after{ clear:both; } .clearfix{ *zoom:1; } 最后也要把clearfix类添加到要清除浮动的父元素上去

7、什么是BFC

定义：BFC就是块级格式化上下文，是一个独立的块级渲染区域，该区域有一套规则约束块级盒子的布局，并且与区域以外的内容无关。

创建BFC的只要满足以下(任意一点)即是：
1)浮动了，
2)绝对定位了，
3）display是inline-block或者是flex
4)overflow的值不是visible

8、定位（position）

1）定位模式与偏移量（top,bottom,left,right)
position：static 主要是清除定位;
relative:相对定位,占位置，并且以自己左上角为准;
absolute：绝对定位，不占位置，完全脱离文档流，如果无父亲并且父亲无定位那么以屏幕为准，如果父亲有定位则以父亲为准;
fixed:固定定位，完全脱离文档流，不占位置，以屏幕为准;

2）绝对定位与固定定位都会使元素转换为行内块元素（float也会使元素转换为行内块元素）
3）只要有定位就可以使用叠放次序z-index，值是无单位的；
4)注意：osition:relative;会默认z-index：0;有提高级别的作用，如果前面使用过position:relative后，则可以使用z-index:1来提高级别