HTML和CSS面试题

abukeai

于 2020-08-09 15:38:20 发布

阅读量170

点赞数

本文链接：https://blog.csdn.net/abukeai/article/details/107894834

版权

本文深入讲解HTML5新特性，如语义化标签、表单控件、音视频处理等；CSS3新增属性，包括边框、背景、文本、变换、过渡、动画；清除浮动的方法；浮动与绝对定位的区别；盒子模型的差异；块级与行内元素的对比；行内元素设置宽高的技巧；元素居中布局策略；隐藏元素的不同方式及其区别；以及link和@import的使用差异。

摘要由CSDN通过智能技术生成

1、HTML5 中的新特性
语义化标签：article、footer、header、nav、section
表单控件：date、time、email、url、search
音视频：video、audio
画布：canvas
本地离线存储：localStorage

2、css3新增属性
边框：border-radius、box-shadow
背景：background-size（背景图片的尺寸）
文本：text-shadow（文本阴影）
变换：transform
过渡：transition
动画：animation
设置动画关键帧：
@keyframes animate {
0% {
background-color: white;
margin-left:0px;
}
100% {
background-color: white;
margin-left:0px;
}
}
使用动画：
div {
width:100px;
animation:animate 5s infinite;
}
animation-name 动画名
animation-duration 动画时间。
animation-iteration-count 动画播放的次数
animation-direction 动画方向

3、清除浮动的方式
什么是浮动：
元素使用float:left/right;后，会脱离文档流，父级元素因此失去支撑（如果没有设置高度），下面的元素就会忽略父元素开始布局

常用方式：
    浮动元素的父级元素：overflow:hidden;
    浮动元素的父级元素： ::after{clear:both;content:'';display:block;}
    浮动元素的同级：添加一个空标签，并且设置clear:both;

4、浮动与绝对定位脱离文档流的区别(主要体现在元素内文本的位置)
float：其他盒子会无视当前元素，从浏览器左上角开始布局，而盒子内的文本依旧会为浮动的元素让出位置
绝对定位：其他盒子与盒子内的文本都会无视当前元素，从左上角开始布局

https://blog.csdn.net/qq_42720683/article/details/98513061

5、盒子模型的区别
盒子组成
内容width + padding + border + margin

通过box-sizing可以设置不同的盒子模型，所以盒模型分为：
box-sizing:content-box 【默认值】 – 气球，大小可以随内容的变化而变化
内容盒子(W3C标准盒子)
盒子总宽度 = margin + border + padding + width

box-sizing:border-box – 铁盒子，大小不能被内容改变
边框盒子(IE盒子)
盒子总宽 = margin + width

6、块级元素与行内元素的区别
块级元素
div、h1~h5、p、html、body、ul、li
1) 独占一行
2) 默认宽度为100%，默认高度由子元素或者内容决定
3) 可以为其指定宽高 style=“width:;height:;”

行内元素
span、a、img、strong、i
1) 与其他行内元素共享一行
2) 默认宽高由内容决定
3) 不能为其指定宽和高
4) 行内元素中不可以嵌套块元素，但块元素中可以嵌套行内元素

7、如何给行内元素设置宽高 – 将行内元素设置为块级元素、脱离文档流
1) 使用display
display:block/inline-block
2) 使用position
position:absolute/fixed
3) 使用float
float:left/right

8、块级元素如何在父元素中水平垂直居中
1) 父元素position
1. 父元素相对定位，子元素绝对定位，子元素margin:auto;top:0;left:0;bottom:0;right:0;
2. 父元素相对定位，子元素绝对定位，子元素left:50%,top:50%;margin-left:-子元素一半的宽度;margin-top: - 子元素一半的高度
2) 父元素display
3. 父元素display:flex; justify-content:center; align-items:center，子元素自动居中（伸缩盒布局）
4. 父元素display:table-cell; vertical-align:middle; 子元素display:inline-block

9、隐藏元素的方式及区别
display:none 浏览器不显示该元素, 也不占据页面空间
opcity:0 浏览器不显示该元素,但是会占据页面空间，交互事件正常
visibility:hidden 浏览器不显示该元素,但是会占据页面空间，交互事件失效
var div = document.getElementById(‘one’);
div.onclick = function(){
alert(1)
}
注意：当父元素使用opacity改变透明度的时候，子元素也会跟着改变，即使子元素使用opacity:1;也不行
解决方法：父元素使用rgba

==>
rgba和opacity的区别？
opacity作用于元素本身以及元素内的所有内容，
rgba只作用于元素本身，子元素不会继承透明效果。

10、css中link和@import的区别
1) 所属范围
@import是 CSS 的语法，只能导入样式
link是 HTML 的标签，不仅可以加载 CSS 文件，还可以定义 rel 属性
rel="stylesheet"表示调用外部样式表

加载顺序
页面加载时，link标签引入的 CSS 被同时加载
@import引入的 CSS 将在页面加载完毕后被加载
兼容性区别
@import需要IE5+
link标签，不存在兼容性问题

11、如何让元素使用margin:0 auto，水平居中
只对块级元素生效，所以margin:0 auto的用法分为三种，分别为
块级元素：div、h1~h3、ul
/对于块级元素，只需要设置width/
div{
width: 200px;
background-color: #ccc;
margin:0 auto;
}

行内元素：span、a
/对于行内元素，需要先设置为块级元素，再加宽度/
span{
display: block;
width: 100px;
background-color: red;
margin:0 auto;
}

行内块元素：button、img、input、textarea
/对于行内块级元素，需要设置为块级元素，可以不用设置宽度/
input{
display: block;
margin:0 auto;
}

12、overflow的三种取值，并说明具体含义
auto：自适应，内容如果溢出，会自动生成滚动条
scroll：将超出的内容进行裁剪（也就是不显示），并以滚动条的方式显示超出的内容（若不设置隐藏滚动条，滚动条一直存在）。
hidden：将超出内容进行裁剪，不会出现滚动条。