HTML常见问题整理1
CSS选择器权重
一、选择器类型
1、ID #id
2、class .class
3、标签 p
4、通用 *
5、属性 [type=“text”]
6、伪类 ：hover
7、伪元素 ::first-line
8、子选择器、相邻选择器
二、各选择器的权重
1、第一等：内联样式如: style=””，权值为1000。
2、第二等：ID选择器，如：#content，权值为0100。
3、第三等：类，伪类和属性选择器，如.content，权值为0010。
4、第四等：元素选择器和伪元素选择器，如div p，权值为0001。
5、 第五等：通配符、子选择器、相邻选择器。如*、>、+,权值为0000。
display常见的值，包括的标签
-inline:span、a、strng、em
-block:div、ul、li、p、form
-inline-block:img
-none
注：display:none和visibility: hidden的区别：
1、display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素。
2、display:none切换显示时页面会产生回流，而visibility切换显示时则不会引起回流。
position: 的属性以及relative与absolute的区别。
position的属性：
1、static：默认值。没有定位，
2、relative ：生成相对定位的标签，相对于自己位置进行变换。
3、absolute：相对于标签本身第一个position为非 static父元素进行定位，标签通过 “left”, “top”, “right” 以及 “bottom” 样式属性进行定位。如果该标签所在的父标签均没有设置position为非 static，则相对于浏览器窗口进行定位，但是此时元素会随着滚动调的滑动而滑动。
4、fixed生成绝对定位的标签，相对于浏览器窗口进行定位，此时元素不会随着滚动调的滑动而滑动。元素通过 “left”, “top”, “right” 以及 “bottom” 属性进行定位。
5、inherit规定应该从父元素继承 position 属性的值。
relative与absolute的区别：
absolute不受父元素里的其他元素影响，而relative会受到父元素里的其他元素影响。
px，em，rem：
1、px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
2、em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。
3、em是相对于其父元素来设置字体大小的，一般都是以的“font-size”为基准。这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而Rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考值。
em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。
标准盒模型/IE盒模型的区别：
content的不同，IE盒模型的content包括border、padding
而标准盒模型的content则不包括；
引入外部字体的方法:
@font-face {
font-family: SketchRockwell; /* 说明调用来的字体名字 /
src: url(‘SketchRockwell.ttf’); / 表明字体文件路径 */
}
什么是浮动：
浮动是指使元素脱离文档普通流，漂浮在普通流之上。
清除浮动的方法：
使用after伪元素清除浮动：
.clearfix:after{
content: “”; /* 空 * /
display: block;/* 伪元素是行内元素 换为块级元素 * /
height: 0;
clear:both; /* 清除浮动*/
visibility: hidden;
}
Margin塌陷或合并
Margin塌陷的具体表现是：当两个元素嵌套到一起时，外层盒模型的margin-top取两个元素中margin-top较大的值。
margin合并的具体表现是：当两个元素并列时，两者相隔的外边距取的是两者所设置margin的最大值。
解决方法：
1、塌陷问题
方法一：在父类标签设置overflow：hidden；属性
方法二：给父类标签重新设置border属性。
2、合并问题
方法一：使用绝对定位消除合并。
方法二：使用inline-block消除合并
水平居中：
1、行内元素水平居中：这里行内元素是指文本text、图像img、按钮超链接等，只需给父元素设置text-align:center
2、块级元素水平居中：定宽块级元素水平居中，只需给需要居中的块级元素加margin:0 auto。
垂直居中：
1、提前知道被居中块级元素的尺寸：使用绝对定位和负外边距对块级元素进行垂直居中。
2、提前不知道被居中的元素的尺寸：使用绝对定位和transform。
3、元素可以通过设置display:flex;将其指定为flex布局的容器，指定好了容器之后再为其添加align-items属性，该属性定义项目在交叉轴（这里是纵向周）上的对齐方式，可能的取值有五种，分别如下：
flex-start:交叉轴的起点对齐；flex-end:交叉轴的终点对齐；
center：交叉轴的中点对齐；baseline项目第一行文字的基线对齐；
strech(该值是默认值)：如果项目没有设置高度或者设置为auto，那么将占满整个容器的高度。
4、给父元素设置display:flex,设置好之后改变主轴的flex-direction:column,该属性可能的取值有四个，分别如下：
row(该值为默认值)：主轴为水平方向，起点在左端；
row-reverse，主轴是水平方向，起点在有端；
column主轴为垂直方向，起点在上沿；
column-reverse：主轴为垂直方向，起点在下沿。
5、使用 display：table-cell 和 vertical-align 对容器里的文字进行垂直居中。
水平垂直居中
1、相对定位加绝对定位，父元素加相对定位，子元素加绝对定位。
2、先给父级元素设置水平居中，再给当前垂直的元素转换成行内块元素和垂直居中，在元素的后面不加回车，加上同级元素span，并设置此参照物的高度等于父级元素100%