html+css 面试题总结附答案

行内元素有哪些? 块级元素有哪些?

块级元素：div p h1 ul li form table
行内元素: a b br i span input select laber strong em img

举５个以上的 HTML5 input 元素 type 属性值

text password button submit reset checkout radio

我们经常用到的语义化标签以及HTML5新增的语义化标签有哪些？

h1-h6 标题内容
p 段落
ul 无序
ol 有序
dl 定义列表
thead 表格中的表头内容
tbody 表格中的主体内容

HTML5:语义化更好的内容标签(<header>, <nav>, <aside>, <article>, <section>，<footer> ，<video>，<audio>,<canvas>)

语义化标签的作用

1. 代码结构清晰，方便阅读，有利于团队合作开发。
2. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方 式来渲染网页。
3. 有利于搜索引擎优化（SEO）。

说一下<label>标签的用法

label标签主要是方便鼠标点击使用，扩大可点击的范围，增强用户操作体验
标签的 for 属性应当与相关元素的 id 属性相同。

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
</form>

说一下盒模型？

盒模型的组成，由里向外内容(content)、填充(padding)、边框(border)、边界(margin)
在IE盒子模型中，width表示content+padding+border这三个部分的宽度

在标准的盒子模型中，width指content部分的宽度

box-sizing的使用

  box-sizing: content-box 是W3C盒子模型
  box-sizing: border-box 是IE盒子模型

box-sizing的默认属性是content-box

盒子模型的宽度如何计算？

offsetWidth与offsetHeight有个特点，就是这两个属性的值只与该元素有关，与周围元素（父级和子级元素无关）。
offsetWidth = (内容宽度 + 内边距 + 边框)，无外边距
因此，答案是122px

补充：如果让offsetWidth等于100px,该如何做？

加了此属性，width:100px就会包括 内容宽度+内边距+边框，这个整体是100px;所以加了此属性，内容宽度会相应的缩小。

URL 的组成部分

http://www.aspxfans.com:8080/news/index.asp?boardID=5&ID=24618&page=1#r_70732423

一个完整的URL包括：协议部分 域名部分 端口部分 虚拟目录部分 文件名部分 参数部分 锚部分

参考： URL的各个组成部分详解

锚点作用：打开用户页面时滚动到该锚点位置。如：一个html页面中有一段代码，该url的hash为r_70732423

<div name='r_70732423'>...</div>

打开上面url，用户页面时滚动到name=’r_70732423’

CSS引入的方式有哪些? link和@import的区别是?

1. 内联方式
2. 嵌入式
3. 外部链接
4. 导入样式
   
   区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
   区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
   区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
   区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。

列举一下 css3 的长度单位。

vw、vh、vmin、vmax（都是基于视口）
rem与em

1.em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。(em属于css2）
对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。

2.vh和vv：1vh等于1/100的视口高度①，1vw等于1/100的视口宽度。

3.还有两个单位： vmax, vmin，分别是vh, vw中的最大值和最小值。

详细案例可参考：https://www.cnblogs.com/nannan1221/p/10772977.html

列举 display 属性的常用值（５个以上）

display: none 此元素不会被显示，并且不占据页面空间
display: block 块级元素
display: inline 行内元素
display: inline-block 行内块级元素
display: flex 伸缩容器
display: table 会作为块级表格来显示

简述 transform，transition, animation 的作用

transform是变化
transition是过渡
animation是动画

transform4个属性

1. rotate：围绕中心点旋转 deg 单位
2. translate（x,y）:向 x y 轴移动位置 px
3. scale：整体缩放 倍数、scaleX scaleY 沿 轴方向缩放
4. skew(x,y) 切变、scaleX scaleY 沿轴切变

css水平、垂直居中的写法，请至少写出4种？

水平居中

行内元素: text-align: center
块级元素: margin: 0 auto
position: absolute +left:50%+ transform:translateX(-50%)
display: flex + justify-content: center

垂直居中

设置line-height 等于height
position：absolute +top:50%+ transform:translateY(-50%)
display: flex + align-items: center
display: table+display:table-cell + vertical-align: middle;

图片居中对齐（图片和旁边的文字垂直居中对齐）

vertical-align:middle

画一个三角形？

这属于简单的css考查，平时在用组件库的同时，也别忘了原生的css

.a{
            width: 0;
            height: 0;
            border-width: 100px;
            border-style: solid;
            border-color: transparent #0099CC transparent transparent;
            transform: rotate(90deg); /*顺时针旋转90°*/
 }

<div class="a"></div>

画一条0.5px的直线？？

考查的是css3的transform

height: 1px;
transform: scale(0.5);

清除浮动的方法

1. 额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）
2. 创建父级 BFC(overflow:hidden)
3. 父级使用::after伪元素清除浮动 clear: both（推荐）

相对定位，绝对定位和固定定位的区别。

相对定位：相对定位的元素不会脱离文档流

绝对定位：会使得元素脱离文档流；绝对定位是相对于离他最近的开启了定位的元素进行定位的,如果都没有,则相对于body进行定位(所以通常给父元素也加一个定位)；绝对定位会改变元素的性质.行内元素会变成块状元素

固定定位: 他是相对于浏览器窗口的位置进行定位.比如漂浮的客服,回到顶部.这类的按钮都是使用的固定定位

制作一个布局，上中下结构的网页，顶部和底部固定，高度都为 100px 中间自适应高度，占满整个浏览器可视区域，(不使用 js,仅用 html5 元素标签和 css)。 。

1. 使用绝对定位
对这三栏都实现绝对定位，其中中间绝对定位的位置是上下两栏的高度，内容超出则中间部分出现流动条overflow:auto；

2. 使用flex布局
还可以使用flex布局实现这一布局，将flex-direction设置为column，定义排列方向为竖排，还需注意的是要定义页面的整体高度为100%

详细案例可参考：上下固定中间自适应布局

1. 额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）
2. 父元素添加overflow:hidden，通过触发BFC方式，实现清除浮动（不推荐）
3. 使用after伪元素清除浮动（推荐使用）

html三栏布局有几种(就是左右固定，中间自适应)

浮动布局float、定位布局、flex布局、表格布局、css3栅栏布局

<style media="screen">    //浮动布局float
      .layout.float .left{
     
     
        float:left;
        width:300px;
        background: red;
      }
      .layout.float .center{
     
     
        background: yellow;
      }
      .layout.float .right{
     
     
        float:right;
        width:300px;
        background: blue;
      }
 </style>

<style>
        .layout.absolute .left-center-right>div{
     
        //定位布局
          position: absolute;
        }
        .layout.absolute .left{
     
     
          left:0;
          width: 300px;
          background: red;
        }
        .layout.absolute .center{
     
     
          left: 300px;
          right: 300px;
          background: yellow;
        }
        .layout.absolute .right{
     
     
          right:0;
          width: 300px;
          background: blue;
        }
</style>

<style>
        .layout.flexbox{
     
         //flex布局
          margin-top: 110px;
        }
        .layout.flexbox .left-center-right{
     
     
          display: flex;
        }
        .layout.flexbox .left{
     
     
          width: 300px;
          background: red;
        }
        .layout.flexbox .center{
     
     
          flex:1;
          background: yellow;
        }
        .layout.flexbox .right{
     
     
          width: 300px;
          background: blue;
        }
</style>

<style>
        .layout.table .left-center-right{
     
         //表格布局
          width:100%;
          height: 100px;
          display: table;
        }
        .layout.table .left-center-right>div{
     
     
          display: table-cell;
        }
        .layout.table .left{
     
     
          width: 300px;
          background: red;
        }
        .layout.table .center{
     
     
          background: yellow;
        }
        .layout.table .right{
     
     
          width: 300px;
          background: blue;
        }
</style>

sessionStorage、localStorage和cookie的区别

共同点：都是保存在浏览器端、且同源的

cookie就是客户端保存用户信息的一种机制，用来记录用户的一些信息，它的主要用于保存登陆信息；cookie在浏览器和服务器间来回传递，其他两个不会。
应用场景：判断用户是否登陆过网站，以便下次自动登录

localStorage是html5的一种新的本地缓存方案，目前用的比较多，一般用来存储ajax返回的数据，加快下次页面打开时的渲染速度。

设置localstorage:

 window.localstorage:
          localstorage.name="李皮";
          localstorage["name"] = "李皮"；
          localstorage.setItem(key,val);

获取localStorage:

localStorage.属性
          localStorage["属性"];
          localStorage.getItem(属性)

删除localStorage：

  localStorage.clear();
         localStorage.removeItem();

什么是响应式布局？？如何实现？？

使不同尺寸、分辨率的屏幕，都能呈现出较好的效果，就是响应式布局。

响应式布局的几种思路：

1. 最简单的方案（固定内容区宽度）
   给网页的内容区，设置一个宽度。比如 900px，然后内容区居中、两边留白。因为大部分电脑显示器的宽度都超过 900px，所以，不同的显示器的差异，仅仅在于两边“留白”的大小。
   等比例缩放（rem）
2. 等比例缩放（rem）
   整体思路
   给根节点设置一个字体大小
   然后，其他尺寸单位全部用 rem
   然后，监听屏幕的大小
   然后，根据屏幕的大小按比例改变根节点字体的大小
   可参考：根据屏幕的大小按比例改变根节点字体的大小
3. 最精准的方案（媒体查询，@media）
   整体思路
   @media起到的作用是，你可以给不同尺寸的设备，设置单独、互不影响的 css 属性。
   比如：屏幕宽度小于 500px 时（手机屏幕），怎样怎样
   宽度在 500px ～ 1000px 时（平板屏幕），怎样怎样
   宽度在 1000px ～ 1500px 时（电脑小屏幕），怎样怎样
   宽度在 1500px ～ 2000px 时（普通电脑屏幕），怎样怎样
   宽度在 ……
   可参考：@media媒体查询案例
4. 栅格系统 Bootstrap框架（主流方案）

常见的浏览器内核有哪些？

IE：Trident内核 FireFox：gecko内核 Opera ：原是用Presto，现改用Blink

Safari ：webkit内核 Chrome：Blink（WebKit的分支）

常见浏览器兼容性问题解决方案？

1.问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。

解决方案：CSS里 *{margin:0;padding:0;}

2.问题症状:常见症状是IE6中后面的一块被顶到下一行

解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性

备注：我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。

3.问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。

解决方案：使用float属性为img布局

备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。（使用负margin，虽然能解决，但负margin本身就是容易引起浏览器兼容问题的用法，所以一般不用）

4.CSS透明

IE：filter:alpha(opacity=60)。
FF：opacity:0.6。

5.万能清除浮动

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

如何提升网站性能？SEO优化？

减少http请求；图片、样式、js压缩再使用；使用cdn；样式、脚本尽量使用外链；减少dom操作；html语义化；

网站头部title,keywords,description正确描述；html语义化；

答案有不全或有偏颇之处，欢迎各位在评论区补充及指正。