前端面试题1（html/css）

一、常见的浏览器及其内核

浏览器：IE，Chrome，FireFox，Safari，Opera。
内核：Trident，Gecko，Blink，Webkit。
1，使用Trident的是internet explorer，国产的绝大部分浏览器。
2，使用Gecko的是Mozilla Firefox
3，使用Blink的是Chrome和Opera
4，使用WebKit的有苹果的safari，谷歌的chrome，还有国产的大部分双核浏览器其中一核就是WebKit

二、b和strong (i和em)标签的区别?
b标签是一个实体标签，它所包围的字符被设为bold（粗体)，而strong标签是一个语义标签，作用是加强字符的语义
em标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。i标签仅仅将文字规定为斜体，并无特殊语义。

三、引入CSS的方式有几种?
（1）内嵌式
通过来书写CSS代码。
只能应用于当前网页，不能被其它网页共享。
注意：

四、单行文本水平垂直居中如何实现?
（1）水平居中
text-align:center:控制单行文字水平居中
（2）垂直居中
设置行高，line-height：元素的高度，如果元素的高度是50px，则line-height:50px

五、选择器优先级如何计算?

• 选择器优先级与权值相关
  • 基础选择器的权值：通配符选择器（0）、标签选择器（1）、class选择器（10）、id选择器（100）
    复合选择器的权值是所有的单一选择器权值的累加
  • 权值越大，优先级越高；权值相同，后写的会覆盖先写的
  • 继承样式的优先级为0，子元素设置样式会覆盖继承样式
  • 行间样式权值为1000，优于id选择器
  • !important优于行间样式

六、哪些CSS属性是可继承的?
1）、字体系列属性
　　font-family：字体系列
　　font-weight：字体的粗细
　　font-size：字体的大小
font-style：字体的风格
line-height：行高
2）、文本系列属性
　　text-indent：文本缩进
　　text-align：文本水平对齐
color：文本颜色
3） list-style属性

七、margin外边距塌陷问题及处理方法?
父子元素margin合并问题
在父元素里面有子元素时，若父元素在没有设置overflow:hidden或者是border属性，则父元素的margin-top的值为父元素和子元素中的margin-top的最大值。
父子元素margin合并问题解决办法
方法一：设置父元素的overflow属性为hidden。
方法二：设置父元素的border属性，如：border:1px solid red;
兄弟元素margin合并问题
当元素是兄弟元素时，在不设置float和position:absolute时，margin-bottom和margin-top会合并为两者中的最大值。
兄弟元素margin合并问题解决方法
使兄弟元素不在同一个BFC区域下，具体做法如：将兄弟元素分别触发BFC或将兄弟元素包在不同的div下，这些不同的div再分别触发BFC。

八、浮动产生的问题?清除浮动的方案?
浮动元素引起的问题：
浮动元素脱离文档流之后在文档流中不占位，父元素的高度无法被撑开，影响与父元素同级的元素
清楚浮动的方法：
（1）给父级元素加高度（不推荐使用，它只适合高度固定的布局，一般父盒子都是为由内容撑起来）
（2）在结尾处添加空div标签clear:both。具体做法：添加一个div标签并定义一个cl的类名，给cl类名添加样式clear:both，将该div标签放到父元素内容结束前的位置（缺点：会多加CSS和HTML标签）。
（3）给父级元素定义 overflow:hidden（推荐使用，缺点：不能和position配合使用，因为超出的尺寸的会被隐藏）
（4）给父级div定义伪类：after和zoom（推荐使用）
/清除浮动代码/ .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} .clearfloat{zoom:1}
然后父级元素添加clearfloat类名即可
（5）给父级元素添加浮动（缺点：会产生新的浮动问题）

九、简述HTML中Doctype的作用?

决定浏览器渲染方式 ：告知 浏览器当前的 HTML 或 XML 文档是哪一个版本. Doctype 是一条 声明, 而不是一个标签; 也可以把它叫做 "文档类型声明", 或 简称为 "DTD". ：用HTML5的doctype声明文件包含HTML5标记

十、简述三类标签的特点以及标签分类?
块标签：独占浏览器一整行，可以设置盒模型所有属性。
块级标签有：div p ul li ol dl dt dd h1-h6
行内标签：内容多大就占多大的位置，默认不支持宽高，不能设置垂直方向的内外间距
行内标签有：span i em b strong sub sup a
行内块标签：内容多大就占多大的位置，可以支持宽高，能设置盒模型的所有属性
行内块标签有：input img