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>)

语义化标签的作用

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

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

　　ffsetWidth与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：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个属性

　　rotate：围绕中心点旋转 deg 单位
　　translate（x,y）:向 x y 轴移动位置 px
　　scale：整体缩放 倍数、scaleX scaleY 沿 轴方向缩放
　　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);

清除浮动的方法

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

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

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

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

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

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

1. 使用绝对定位　　

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

2. 使用flex布局　　

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

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

　　额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）
　　父元素添加overflow:hidden，通过触发BFC方式，实现清除浮动（不推荐）
　　使用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();

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

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

响应式布局的几种思路：

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

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