html+css 面试题总结附答案

程序员文章站 2022-03-04 09:47:26

行内元素有哪些? 块级元素有哪些?块级元素：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...

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

块级元素：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

盒子模型的宽度如何计算？
html+css 面试题总结附答案
offsetWidth与offsetHeight有个特点，就是这两个属性的值只与该元素有关，与周围元素（父级和子级元素无关）。
offsetWidth = (内容宽度 + 内边距 + 边框)，无外边距
因此，答案是122px

补充：如果让offsetWidth等于100px,该如何做？
html+css 面试题总结附答案
加了此属性，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在浏览器和服务器间来回传递，其他两个不会。
html+css 面试题总结附答案

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

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

响应式布局的几种思路：

最简单的方案（固定内容区宽度）
给网页的内容区，设置一个宽度。比如 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的分支）

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

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

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

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

本文地址：https://blog.csdn.net/weixin_45811256/article/details/110164533

相关标签：面试题 html css css3 web 定位

上一篇： Canvas实现放大镜效果完整案例分析(附代码)

下一篇： HTML5 纯CSS3实现正方体旋转3D效果

html+css 面试题总结附答案

2019最新整理PHP面试题附答案

一道sql面试题附答案

java集合面试题总结及答案（java集合框架详解）

java集合面试题总结及答案（java集合框架详解）

python面试题37道（附答案）看完面试不愁了

挑战10个最难回答的Java面试题（附答案）

据说是雅虎的一份PHP面试题附答案

2019年PHP面试题附答案（实战经验）

阿里巴巴前端面试总结附(题目+答案)

python面试题小结附答案实例代码