html+css 面试题总结附答案

，

，，,)

语义化标签的作用

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

说一下标签的用法

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

<form>
  <label for="male">Malelabel>
  <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：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语义化；

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

根据CSS规范，当两个相邻的块级元素（块级元素是指在HTML中以块（block）的形式展现的元素，如

、

等）的垂直外边距（margin）相遇时，它们会发生 外边距重叠 。
在这种情况下，它们之间的外边距将折叠（也称为合并），最终的外边距值是两者中 较大 的那个值。

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

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

设置元素的 display 属性为 inline-block、table-cell、table-caption 等值。

设置元素的 position 属性为 absolute 或 fixed。

设置元素的 overflow 属性为非 visible 值。

创建 CSS3 的 flexbox 布局。

BFC主要的作用有：

清除浮动：当一个元素浮动之后，它会影响到周围的元素布局，这时可以创建一个BFC来避免影响。
避免外边距的重叠：在一个BFC中，两个相邻的块级盒子的外边距不会发生重叠，这可以避免在垂直方向上出现意料之外的间距。
自适应两栏布局：可以通过创建两个BFC来实现左侧固定宽度、右侧自适应宽度的布局。
防止文字环绕：创建一个BFC可以防止文字环绕浮动元素的情况。

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

html+css 面试题总结附答案

你可能感兴趣的:(面试题,html,css,css3,web,定位)