实验室暑假第一次小测

1.选择器权重

权值

权重最大： ！important
1000： 行间样式
100： id选择器
10: class选择器 、属性选择器（a[href]） 、 伪类（:first-child ，:link、:vistited，:hover:，:active，:focus，:lang，:right，:left，:first）
1：标签选择器、伪元素（:after、:before）
0：通配符（*）

2.display常见的值，包括的标签

（1）none：不显示
（2）block:块元素
如：h1、p、div、ul、li、table、form
（3）inline：行内元素
如：a、span、em、strong、b
（4）inline-block：行级块元素
如：img

3.标准盒模型/IE盒模型的区别

宽度和高度算法不同
（1）标准盒模型：height只是content的高度，width只是content的宽度

（2）IE盒模型：height是border和padding和content的高度之和
width是border和padding和content的宽度之和

4.position: 的属性，relative与absolute的区别。

（1）position:relation;
相对定位,相对自己原本的位置，原本的定位元素所占据的空间仍然存在。
（2）position：absolute;
绝对定位，相对已定位的最近父元素，如果没有已定位的父元素，就相对于< html>,原来的位置会从正常文档流中删除。

5.水平居中/垂直居中/水平垂直居中的方法

（1）文本

• 文本水平居中：text-align:center;
• 文本垂直居中：
  line-height==父元素height;
  父元素设置text-align：center;
  子元素设置vertical-align:middle；（多行文字）
• 水平垂直居中：
  1.父元素设置：display：flex;
  文本设置：margin：auto；
  2.上面的文本居中和垂直居中一起使用

（2）盒子

• 盒子水平居中：margin:0 auto;
• 盒子垂直居中：
  position:absolute;
  left:50%;
  top:50%;
  margin-top:-XXpx; //根据具体情况而定
  margin-left:-XXpx; //根据具体情况而定

（3）水平垂直居中：水平居中和垂直居中同时使用

6.Margin塌陷/合并，解决方法

（1）margin塌陷：（父元素与子元素之间）如果两个元素直接连在一起，中间没有padding或border，那么margin在垂直方向会叠加现象，最终margin去较大的margin值。

• 解决方法：
  给父元素设置边框或padding
  触发bgc（块级格式化上下文）：
  1.position:absolute/fixed
  2.display:inline-block;
  3.float:left/right
  4.overflow:hidden

（2）margin合并：（兄弟元素之间）相连的兄弟元素在垂直方向之间没有border和padding，二者的margin会发生合并，取较大的margin值

• 解决方法：
  可以用border/padding替代margin
  可以给其中一个元素加一个div，在这个div上触发bgf

7.什么是浮动，清除浮动的方法。

浮动：盒子设置了float之后会从正常文档流之中删除，如果它的父元素没有设置height，那么它的父元素就不会被撑开，其盖度就是0.

清除浮动就是要解决浮动引起的父元素高度为0的问题

• 解决方法：
  （1）使用伪元素清除浮动
  element:after{
  content : " ";
  display:block;
  clear : both;
  }
  （2）给父元素添加overflow:hidden;
  （3）给父元素设置高度

8.引入外部字体的方法

@font-face{
font-family:自定义名称；
src:(‘链接’);
}

9.px，em，rem

px:像素，一个确定的值
em:相对长度单位，相对于当前元素字体大小,可以继承父元素的字体大小
rem:相对长度单位，相对于根元素< html>字体大小

10.display: none和visibility: hidden的区别

display:none;设置之后不占空间
visibility：hidden;设置之后仍占空间，二者都能使当前元素隐藏起来