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不支持。

@import 是同步的，<link> 标签引入样式表是异步的，即不会阻塞页面的渲染

CSS 当中以 @ 开头的属性有哪些？

• @media =》媒体查询实现响应式布局
• @keyframes
• @import，串行加载 CSS

列举一下 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设置元素水平垂直居中的方法

1. 使用flexbox布局

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

2. 使用绝对定位
使用绝对定位来实现元素的居中，首先需要将元素的左、右、上、下值都设置为0，然后使用margin属性来将元素居中，例如：

.container {
  position: relative;
}

.item {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

3. 使用transform属性
利用transform属性进行旋转和位移达到元素居中效果，例如：

.item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

4. 使用position 和 margin 属性实现水平垂直居中（已知当前 div 的宽度）

确定了当前 div 的宽度，margin 值为当前 div 宽度一半的负值。

.container {
  position: relative;
}
.item {
  width: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px; /* 减去元素高度的一半 */
  margin-left: -50px; /* 减去元素宽度的一半 */
}

移动端推荐使用flex。

画一个三角形？

这属于简单的css考查，平时在用组件库的同时，也别忘了原生的css。
使用border绘制三角形

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

使用transform: rotate 配合 overflow: hidden 绘制三角形
设置图形的旋转中心在左下角 left bottom，进行旋转，配合 overflow: hidden。

.a {
  width: 150px;
  height: 100px;
  position: relative;
  overflow: hidden;
}
.a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform-origin: left bottom;
  transform: rotate(30deg);
  background: #bc9edf;
}

画一条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();

有哪些常用的布局方式

• 流动布局（Flow Layout）：元素按照文档流从上到下、从左到右进行排列，自动换行。常见的网页布局默认即为流动布局。
• 弹性盒子布局（Flexbox Layout）：使用 display: flex 将元素的父容器设置为弹性容器，通过使用弹性盒子属性来实现灵活排列和对齐。弹性盒子布局适用于一维排列的情况，可以轻松实现常见的水平居中、垂直居中以及等分布局等。
• 网格布局（Grid Layout）：使用 display: grid 将元素的父容器设置为网格容器，通过使用网格的行（row）和列（column）的定义来实现多维排列和对齐。网格布局适用于复杂的二维布局需求，可以实现灵活的行列组合和元素位置控制。
• 定位布局（Positioning Layout）：使用 position 属性和相关的定位值（如 top、left、right、bottom）来实现元素的绝对或相对定位。通过设置元素的定位属性和数值，可以将元素放置在指定的位置，并可通过 z-index 调整元素的层叠顺序。
• 响应式布局（Responsive Layout）：通过使用媒体查询和百分比/弹性单位等技术，根据设备屏幕的尺寸和方向调整页面布局，以适应不同的设备和屏幕大小。

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

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

响应式布局的几种思路：

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语义化；

为什么一个元素 margin-bottom: 20px; 另个元素 margin-top: 10px;，最后的margin等于20px？

margin值最后是20px。

根据CSS规范，当两个相邻的块级元素（块级元素是指在HTML中以块（block）的形式展现的元素，如<div>、<p>等）的垂直外边距（margin）相遇时，它们会发生 外边距重叠 。
在这种情况下，它们之间的外边距将折叠（也称为合并），最终的外边距值是两者中 较大 的那个值。

需要注意的是，重叠外边距只会发生在相邻的块级元素之间，行内元素（如）之间的外边距不会发生重叠。此外，设置padding或border值可以避免外边距重叠的发生。

解决方法：创建BFC
如何创建BFC ? 常用的几种方法：

1. float的值不是none。
2. position的值不是static或者relative。
3. display 属性为 inline-block、flex、table-cell、table-caption 等值。
4. 设置元素的 overflow 属性为非 visible 值。

BFC主要的作用有：

• 清除浮动：当一个元素浮动之后，它会影响到周围的元素布局，这时可以创建一个BFC来避免影响。

• 避免外边距的重叠：在一个BFC中，两个相邻的块级盒子的外边距不会发生重叠，这可以避免在垂直方向上出现意料之外的间距。

• 自适应两栏布局：可以通过创建两个BFC来实现左侧固定宽度、右侧自适应宽度的布局。

• 防止文字环绕：创建一个BFC可以防止文字环绕浮动元素的情况。

如何进行移动端适配

开始适配之前都要编写 <meta> 标签设置 viewport 的内容 width=device-width，让网页宽度等于视窗宽度。

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

• rem布局搭配 postcss-pxtorem 插件：rem 它是个相对单位，它相对的是根元素（html）的font-size大小。
• vw/vh布局 ：vw/vh 方案与 rem 方案类似，都是将页面分成一份一份的，只不过 vw/vh 是将页面分为 100 份，1vw = device-width/100
• 百分比布局（相对于父元素百分比）
• 响应式布局（媒体查询）

移动端适配的5种方案

使用 CSS 给一个列表的前三个赋予单独的样式

nth-child(-n+3)

nth-child(-n)、first-child、last-child用法

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