CSS、HTML面试笔记

CSS、HTML面试笔记

0、基本概念（新特性等）

html5新特性

css3新特性

1、选择器

总体来说css的优先级顺序为：内联样式>内部样式>外部样式，相同优先级权值的 后面会覆盖前面

从上到下优先级依次递减：

1. !important
2. 内联样式，权值为1000
3. id选择器，权值为0100
4. 类/伪类 选择器，权值为0010，（伪类选择器：:link, :visited, :hover, :active, :first-child）
5. 标签/伪元素 选择器，权值为0001，（伪元素选择器：::before, ::after, ::first-line, ::first-letter，::section）
6. 通配符（*），子选择器（>），相邻选择器（+），权值为0000
7. 继承样式，无权值。

2、实现 居中

1、使用flex布局

.father {
	display: flex;
  justify-content: center; // 主轴上居中	
  align-content: center; // 垂直轴上居中
}

2、使用css3的transition和transform

.father {
  position: relative;
  .son {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

3、使用表格布局

.father {
  display: table;
  .son-img {
  	display: table-cell;/*img设置成表格元素属性*/
  	vertical-align: middle;/*两个display设置后这个属性就起作用*/
  }
}

4、单行文本，设置行高等于高度（line-height == height），并且text-align: center

3、清除浮动

float布局会脱离文档流，对页面的布局造成影响，比如造成父级的高度坍塌等问题。清除浮动后，便不会影响文档流。

1、父级添加overflow: hidden

子元素浮动会造成父元素的高度坍塌，给父元素添加上述样式实际上是形成了一块BFC区域，因此其中浮动的元素的高度也会参与计算。

2、在浮动元素后加上一个块级元素并添加样式 clear: both

由于浮动元素脱离文档流，因此在后面加上一个有清除浮动样式的盒子实际上就可以占据需要计算的高度；

3、在浮动元素使用::after伪元素

.father {
  .son-img {
    content: '';
    clear: both;
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;  
  }
}

4、给浮动元素添加 .clearfix 类（兼容ie）

.clearfix:after {
	content: '';
	clear: both;
	height: 0;
	visibility: hidden;
	display: block;
}
.clearfix {
	zoom: 1;
}

5、实现多行文本省略

.father {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

6、BFC——块级格式化上下文

BFC (Block formatting context) 直译为"块级格式化上下文"。特征为：

1. 是一块独立的渲染区域，这意味着它内部的布局不会影响到外部；
2. BFC内部浮动的盒子也会参与高度计算；
3. 内部的盒子在垂直方向从上到下排好。

如何形成一块BFC区域：

• float的值不为none；
• position的值不是static或relative（脱离文档流）；
• display的值是 inline-block、table-cell、flex、table-caption、inline-flex（所有行内块元素及类行内块元素）；
• overflow的值不是visible。

BFC作用：

• 清除浮动，由于BFC内部的浮动的元素也会参与高度计算，因此可以用于清除浮动；
• 解决外边距折叠问题，同一个BFC内部的元素垂直方向margin会合并，因此只要将两个元素设为不同的BFC就可以解决此问题；
• 不被浮动元素覆盖（文字环绕）