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%