html css面试题

说一说标签的分类，以及常用的标签

  标签的分类有块元素，行内块元素，行内元素

块元素的特点：独占一行，从上到下排列，可以设置宽度和高度，不设置宽度，宽度是父元素的100%，高度由内容撑开，里面可以放块元素，行内元素，行内块元素。

常见的块元素标签：div  h1-h6  ol  ul  li p等

行内块元素的特点：和相邻的行内块元素或者行内元素可以显示在一行上，宽度和高度可以设置，默认是被内容撑开

常见的行内块元素：img  input  td

行内元素的特点：从左到右显示，一行装满切换到下一行，不能设置宽度和高度，宽度和高度被内容撑开

常见的行内元素有：a  span em strong  del等

2.说一说BFC

页面元素中的隐含属性，即块格式化上下文，简称BFC，开启BFC的元素相当于一个独立的区域，不会影响到页面的布局，那么开启BFC属性可以解决哪些问题呢？

可以解决父元素和子元素外边距重叠的问题，可以解决页面中高度塌陷的问题。那么如何开启BFC呢？

有下列4种方法：

设置浮动

将元素转成行内块元素（display：inline-block）

设置overflow的属性值为非visible的值（副作用最小）

开启绝对定位

3.说一说样式优先级的规则是什么

样式优先级（权重）由大到小的顺序是 ！Important;>内联样式>id选择器>class选择器、属性选择器>元素选择器>通配符选择器>继承的权重

如果选择器的权重一样大，则采用靠下的选择器样式，因为浏览器是从上到下来运行代码的

如果使用的是交集选择器，那么将他们的权重相加，相加之后的结果才是他们的权重

但是选择器的无论怎么相加都不会超过它的上一级权重

如果使用的是并集选择器，则不相加，而是看并集选择器中谁的权重大就是多大

4.说一下浮动

  在我们的页面布局当中，我们会经常使用浮动，浮动是很重要的，因为在布局中我们经常使用块元素，而块元素的特点是独占一行 ，所以我们在水平布局上无法布局，那么浮动就可以解决无法在水平方向上的布局的困扰，设置浮动的元素会脱离文档流。

浮动的属性名是float

它的可选值有  

none  页面该怎么样就是怎么样，相当于不浮动

left   设置浮动的元素靠左浮动

right   设置浮动的元素靠右浮动                  

5说一下html语义化；

Html语义化就是从意思上来定义代码的结构，能够清晰的表示出代码的结构层次

例如：header 头部  Main 主体  footer 底部  nav 导航 title 标题 aside 侧边栏等

6.说一说css尺寸设置的单位

 CSS的尺寸单位有很多，常见的有px，em，%百分比，rem等；那他们的区别是什么呢？

 px：px是固定单位，1px就相当于1个物理像素。

 em：em是相对单位，他是相对于当前字体大小来定义的单位，如果当前字体大小是20px；那么1em=20px，2em=40px；如果不设置字体大小，那么就是1em就等于默认字体大小16px；

 %：百分比也是相对单位，他是相对于父元素的宽和高来定义的，如果父元素的width和height是200px和100px，那么我们给子元素的宽和高设置为50%，50%，那他 对应的width和height是100px和50px。

 rem：rem也是一个相对单位，他是相对于根标签（root）来定义的，取决与根标签的字体大小，跟标签的字体大小是多少，那么1rem就是多少。

7.说几个元素水平居中方法

水平居中要分为什么居中，如果块元素要在页面中居中的话，我们可以设置margin：0 auto；来进行页面布局中的居中；如果内容要在父盒子里面剧中的话我们有一个属性：text-align：center；这样就会实现内容水平居中；

绝对定位也是可以实现水平居中的，通过绝对定位，设置left：50%和margin-left：-（元素宽度的一半），这样也可以实现水平居中

弹性盒子中如果主轴是X轴，那么 justify-content：center也可以实现水平居中

绝对定位和transform也可以实现居中，元素开启绝对定位后，top：0；left：0；然后transform：translate（-50%，-50%）；

8.说一说盒子模型

  盒子模型在我们的布局当中是最常见的，盒子模型有四个部分组成，外边距（margin），边框（border），内边距（padding），内容区（content）；

外边距是调整盒子在页面中的位置的，它的属性有：margin-left，margin-top，margin-right，margin-bottom，分别对应的是左，上，右，下，例如margin-left：50px； 就是元素离左边的值增加了50px，如果后跟的是负值，就是想相反的方向移动。简写margin：后面可以跟4个值，3个值，2个值，1个值。

4个值，顺序对应的是上，右，下，左

3个值，对应的是上，左右，下

2个值，对应的是上下，左右

1个值就是4个方向都是这个值

边框就是给盒子加一个边框，它的属性有border-width，border-color；border-style；分别指的是边框的大小，颜色，样式 当然他也有简写border：后面跟的是大小，颜色，样式，没有固定顺序。

内边距指的是边框到内容区的距离，它的属性是padding，它的规则跟margin的规则一样

我们一般设置宽高都是给内容区设置的，所以边框，内边距，内容区的大小都会影响到盒子的大小，想要设置的宽和高是把内边距，边款，内容区包含在内的话，我们有一个属性叫：box-sizing：border-box；

9.说一说图片三像素问题

三像素问题是由于img是行内块元素，在页面中会留有空白，这就是三像素问题

解决图片三像素问题有下列解决办法：

将图片转成块元素

脱离文档流

设置父元素font-size为0  

设置vertical-align属性，设置一个非visible的样式值

10.如何优化解决高度塌陷问题

  我们一般不设置父元素的高度，由子元素撑开，但是设置子元素浮动，会导致父元素的高度丢失，称之为高度塌陷

解决高度塌陷有下列方法:

1. 给父元素设置固定高度

2.开启BFC

3.可以直接在高度塌陷的父元素的后面，添加一个空白的块元素，在对其清除浮动。

4.可以通过after伪类给元素的最后加上一个块级元素，然后对其清除浮动.