一些简单的HTML+CSS面试题

最新推荐文章于 2024-08-09 20:45:54 发布

万物之恋

最新推荐文章于 2024-08-09 20:45:54 发布

阅读量343

点赞数

分类专栏：前端面试题文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_47340917/article/details/122590528

版权

前端面试题专栏收录该内容

24 篇文章 9 订阅

订阅专栏

HTML+CSS 面试题

网络中使用最多的图片格式有哪些

JPEG，GIF，PNG。最流行的是jpeg格式，可以把文件压缩到最小，在ps以jpeg格式存储图片时，提供11级压缩级别。

请简述css盒子模型

内容分布图：

一个css盒子从外到内可以分成四个部分：margin（外边距），border（边框），padding（内边距），content（内容）；

默认情况下，盒子的width和height属性只是设置content（内容）的宽和高
怪异盒子模型的 content（内容）还受 padding 的影响
盒子真正的宽应该是：内容宽度+左右填充+左右边距+左右边框
盒子真正的高应该是：内容高度+上下填充+上下边距+上下边框

视频/音频标签的使用

视频：
- 视频标签属性：
  - src 播放视频的地址
  - width/height 设置播放视频的宽高，和img标签的宽高属性一样
  - autoplay 是否自动播放
  - controls 是否显示控制条
  - poster 没有播放之前显示的占位图片
  - loop 是否循环播放
  - perload 预加载视频（缓存）与autoplay相冲突，设置了autoplay属性，perload属性会失效
  - muted 设置播放时默认静音
音频:
- 音频的相关属性：音频标签的相关属性和视频相似，但是无法使用 width/height宽高，和 poster预加载

HTML5新增的内容有哪些

新增语义化标签
新增表单输入控件类型
新增表单元素
新增表单属性
新增表单事件
新增多媒体标签

HTML5 新增的语义化标签有哪些

header设置页面头部 main设置页面主要内容 footer设置页面底部
nav导航栏 aside侧边栏 article加载页面一块独立内容
section：相当于div figure加载独立内容（上图下字） figcaption 设置figure的标题
hgroup 标题组合标签 mark 高亮显示 dialog 加载对话框标签（必须配合open属性）
embed加载插件的标签 video加载视频 audio加载音频（支持格式ogg，mp3，wav

如何理解HTML语义化标签

方便机器解析代码
首先，语义化标签的出现，其主要目的是为了方便我们的机器，即计算机或者浏览器去阅读我们的代码。前端界面在没有样式的前提下，语义化标签同样会呈现一个清晰的结构，方便机器进行阅读。
方便爬虫搜索（SEO优化）
搜索引擎的爬虫，是靠语义化标签内部的关键字来确定其上下文的权重。在开发者编写代码时，适当的使用语义化标签，可以有效加大整个页面的权重。能让网站页面的排名在搜索引擎上名次更靠前。
开发者优势
语义化标签极大的提高了我们代码的可读性。在独自开发中，能够清晰的解析页面的结构，方便定位问题的所在；在协同开发的过程中，恰当的使用语义化标签，能够让不同的开发人员清晰的看懂互相的结构，提高各自的开发效率；在大型应用程序开发中，语义化标签能够更好的遵循模块化开发的标准，大大减少页面间的依赖。

CSS3 新增的特性

边框：
- border-radius 设置边框圆角
- border-shadow 添加边框阴影（水平位移，垂直位移，模糊半径，阴影尺寸，阴影颜色，insetr（内/外部阴影））
- border-image：设置图片边框
- border-image-source 设置图片边框的路径
- border-image-slice 设置图片边框向内偏移
- border-image-width 设置图片边框的宽度
- border-image-outset 设置边框图像区域超出边框的量
- border-image-repeat 设置边框的图片是否平铺（repeat平铺 round铺满 stretch 拉伸）
背景：
- background-size 设置背景图片尺寸
- background-origin 规定 background-position属性相对于什么位置定位
- background-clip 规定背景的绘制区域（padding-box，border-box，content-box）
设置渐变效果：
- linear-gradient（）线性渐变
- radial-gradient（）径向渐变
设置文本效果：
- word-break：定义换行模式
- word-wrap：设置文本自动换行
- text-overflow：设置文本溢出执行的动作，例如：显示省略号
- text-shadow：设置文字阴影（水平位移，垂直位移，模糊半径，阴影颜色）
元素转换：transform
- transform 应用于2D，3D转换，可以将元素旋转，缩放，移动，倾斜
- transform-origin 可以更改元素变换的基础点（改变xyz轴）
- transform-style 指定嵌套元素怎么样在三位空间中呈现
2D 转换效果：
- rotate(xxxdeg) 旋转 translate（x，y）指定元素在二维空间的位移 scale（n）定义缩放转换
3D 转换效果：
- perspective（n）为3D转换 translate rotate scale
过渡效果：transition
- transition-property 设置过渡属性名
- transition-duration 完成过渡效果需要花费的时间
- transition-timing-function 指定过渡效果的速度
- Transition-delay 设置过渡开始前的延迟事件
动画效果： animation
- animation-name 设置绑定动画的名称，为@keyframes动画名称
- animation-duration 动画需要花费的时间
- animation-timing-function 动画完成一个周期的方式
- animation-delay 动画启动前的延迟间隔
- animation-iteration-count 动画播放次数
- animation-direction 是否轮流反向播放动画

清除浮动的方式有哪些？请说出各自的优点

出现清除浮动的情况：
- 高度塌陷：当所有的子元素浮动的时候，且父元素没有设置高度，这时候父元素就会产生高度塌陷。
清除浮动的方式：
- 给父元素单独定义固定高度
  - 优点：快速简单，代码少
  - 缺点：无法进行响应式布局
- 父级定义overflow：hidden；zoom：1（针对ie6的兼容）
  - 优点：简单快速、代码少，兼容性较高
  - 缺点：超出部分被隐藏，影响布局
- 在浮动元素后面加一个空标签，并为他设置属性：clear：both；height：0；overflow：hidden
  - 优点：简单快速、代码少，兼容性较高
  - 缺点：增加空标签，不利于页面优化
- 父级设置属性 overflow：auto
  - 优点：简单，代码少，兼容性好
  - 缺点：内部宽高超过父级div时，会出现滚动条
- 高效清除法：给塌陷的元素设置伪类和兼容性
  - ```
  .father：after{
           content：""；
           clear：both；
           display：block；
           height：0；
           overflow：hidden；
           visibility：hidden
  }
  .father {
      zoom:1;
  }
```
- 优点：写法固定，兼容性高
- 缺点：代码多
各种定位属性的区别

position 有四个定位属性：
1. relative 相对定位，不脱离文档流，相对于自身定位
2. absolute 绝对定位，脱离文档流相对于父级定位
3. fixed 固定定位，脱离文档流，相对于浏览器窗口定位
4. static 默认值，元素出现在正常的流中
水平垂直居中的方式

首先设置好需要用到的标签：
1. 绝对定位配合外边距
相对父级上边和左边，或者下边和右边各移动50%，同时通过外边距减去自身的宽高各一半的大小。有着所有放法中最好的兼容性，但是必须知晓盒子的具体大小。
```
.container{
      position: absolute;
       top: 50%;
      left: 50%;
      margin-top: -150px;
      margin-left: -150px;
 }
```
1. 绝对定位配合外边距二
将盒子的上下左右定位全部设置为0，同时设置外边距自适应
```
.container{
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   margin: auto;
 }
```
1. 绝对定位配合偏移
第一种方法的升级版，放弃外边距的写法，使用CSS3中的新属性transform: translate(-50%,-50%); 来直接减去盒子自身的50%大小，不需要知道盒子的具体大小。
```
.container{
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%,-50%);
  }
```
1. 弹性布局
css3引入的新布局模式，可以设置各种属性来有效排列容器内的元素。需要设置在父级上，但是父级必须设置固定有效的高度，不然无法垂直居中无法实现。
```
body{
     display: flex;
     justify-content: center;
     align-items: center;
 }
```
1. 网格布局
与弹性布局相似，但是网格布局的优势在于网格布局分布元素是逐行分布，保留块元素特性；而弹性布局设置居中后，所有块级子元素会获得行内元素的特性。
```
 body{
  	display: grid;
    align-items: center;
    justify-content: center;
 }
```
1. 使用类似表格的布局特性
给容器赋予类似
标签的布局特性，，同时配合文字居中属性。前提是容器父级拥有确定有效的宽高，即不能设置为百分比，使用vw，vh等单位也同样不行。
```
 .container{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
```
1. 外边距左右自适应配合弹性盒子
父级使用弹性布局，使元素垂直居中，同时子元素设置外边距自适应来达到水平居中的效果。
```
 body{
      display: flex;
      align-items: center;
}

 .container{
     margin: 0 auto;
 }
```
1. 使用display：box 并设置相应属性
使用display的属性之一，写法上和第三种方法相似，但是目前主流浏览器都不支持，虽然可以通过兼容性写法来使用，但是不推荐（作者在使用时仅成功实现了垂直居中，慎用！）
```
body{
    display: box;
    box-pack: center;
    box-orient: vertical;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-orient: vertical;
 }
```
1. 使用内边距撑开容器
在不对容器设置宽高，但是里面存在内容的情况下，设置上下左右相等的内边距，可以将容器撑开，并且内容会水平垂直居中。但由于块级标签的特性，水平方向上会受到父级容器宽度的影响。
```
.container{
    padding: 50px;
 }
```
1. 文字居中与同等行高
在知晓父级容器高度的情况下，给块级子元素设置文字居中属性，以及和父级高度相等的行高，可以使内容水平垂直居中，使用在单行文本内容的情况下效果最佳。
```
p{
  text-align: center;
  line-height: 300px;
}
```

点击查看详细解释

标准盒子模型和怪异盒子模型

一、概念
标准盒模型采用的W3C标准，盒子的content内容部分由width宽度和height高度决定，添加padding内边距或border外边框后，宽高都会进行相应增长；
②怪异盒模型也称为IE盒模型，是IE浏览器设计元素时遵循的规则。怪异盒模型的宽高在div盒子初次设置时就已经规定，添加padding或者border，会从中减少content内容的占据区域，来为padding和border制造空间，宽高不会相对应的进行增长。
二、计算方法
标准盒子模型的内容计算：content=width*height，
盒子的总宽度=width+padding（左右）+margin（左右）+border（左右）
总宽度等于所有附加值，偏移值的总和；

怪异盒子模型的内容计算：content=width*height+padding+border
盒子的总宽度=width+margin（左右）此时的width宽度已经包含了padding和border的值；

三、默认盒模型
在编辑html文档时，只要在顶部声明了DOCTYPE，默认都会使用标准盒子模型。如果没有进行声明，则会根据浏览器类型自行调整；

四、盒模型转换
在CSS中对相应的div盒子进行box-sizing属性的设置，就可以让盒模型在标准和怪异中进行转换。
box-sizing:content-box; 盒模型设置为w3c标准盒子模型
box-sizing:border-box; 盒模型设置为怪异（IE）盒子模型
点击查看详细解释

如何让chrome浏览器显示小于12px的文字?

添加谷歌私有属性： -webkit-text-size-adjust：none
使用transform缩放：-webkit-transform：scale();

CSS选择器有哪些，优先级如何计算？

CSS 基础选择器：元素选择器，id选择器，群组选择器，类选择器，*通配符选择器，后代选择器
CSS 伪类选择器： :link/visited/hover/active
CSS3选择器：空格 > +相邻兄弟选择器 ~通用选择器（查找后面所有）
结构伪类选择器：
- 查找第几个nth-child（n）
- 查找同一类型第几个nth-of-type
- 查找唯一类型 only-of-type
- 属性选择器：根据标签属性查找 [attr=value]
- : root 查找根元素html标签
- : empty 查赵空标签
目标伪类选择器：（表单）
- ：enabled 查找可以使用的标签
- ：disabled 查找禁止使用的标签
- ：checked 查找被选中的标签
伪元素选择器：
- ：selection设置选中文本内容的高亮显示（只能用于背景色和文本颜色）
- 否定伪类选择器 not（）
- 语言伪类选择器 lang（）
优先级（权重）：
- 元素选择器 1
- 伪元素选择器 1
- class选择器 10
- 伪类选择器 10
- 属性选择器 10
- Id选择器 100
- 内联样式 1000
- 继承样式 0
- !important 绝对优先属性
- 包含选择器权重为权重之和

哪些CSS属性可以继承

CSS继承特性主要是文本方面
所有元素可继承：visibility（元素显示）和 cursor（鼠标指针）
块级元素可继承：text-indent（段落首行缩进）和 text-align（文本居中方式）
列表元素可继承：list-style（设置列表标识符样式），list-style-type（设置列表标识符样式），list-style-position（设置列表标识符位置），list-style-image（自定义标识符样式）
内联元素可继承：letter-spacing（字符间距），word-spacing（段落间距），line-height（行高），color（文字颜色），font（字体种类），font-family（字体类型），font-size（字体大小），font-style（设置字体风格），font-variant（字母大写转换），font-weight（字体粗细），text-decoration（文字下划线），text-transform，direction。

这里是万物之恋，我们下次再见了！