html+css基础面试题

vousmevoyez0613

已于 2022-03-02 22:54:34 修改

阅读量276

点赞数 1

分类专栏：前端文章标签： css html html5

于 2021-07-23 22:25:28 首次发布

本文链接：https://blog.csdn.net/acm_cn1234567890/article/details/119045545

版权

前端专栏收录该内容

48 篇文章 2 订阅

订阅专栏

✨对HTML语义化标签理解
html5的新特性
DOMcontentLoaded
script标签中defer和async的区别
src和href的区别
src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。
src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和 frame 等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js 脚本放在底部而不是头部。
href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载 css，而不是使用@import 方式。
```
//	例如：
<link rel="stylesheet" type="text/css" href="theme.css" />
```
css引入的方式有哪些? link和@import的区别是?
两者都是外部引用CSS的方式
1. link和页面一同加载,import在页面加载完之后再加载
2. link兼容性比import好,因为link本身就是html标签
3. link可以使用js对其修改,import不可以
4. link还可以定义 RSS、rel 连接属性等,import只能导入样式
iframe有哪些优点和缺点
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
优点：
●用来加载速度较慢的内容（如广告）
●可以使脚本可以并行下载
●可以实现跨子域通信
缺点：
●iframe 会阻塞主页面的 onload 事件
●无法被一些搜索引擎索识别
●会产生很多页面，不容易管理
li和li之间有看不见的空白间隙是什么原因引起的？如何解决?
浏览器会把inline内联元素间的空白字符（空格、换行、Tab等）渲染成一个空格。为了美观，通常是一个<li>放在一行，这导致<li>换行后产生换行字符，它变成一个空格，占用了一个字符的宽度。
解决办法：
（1）为<li>设置float:left。不足：有些容器是不能设置浮动，如左右切换的焦点图等。
（2）消除<ul>的字符间隔letter-spacing:-8px（这也设置了<li>内的字符间隔）并将<li>内的字符间隔设为默认letter-spacing:normal。
HTML行内元素、块状元素、行内块状元素
css选择器有哪些
✨标准盒模型和怪异盒模型
✨css定位
✨css布局

✨✨重点：flex布局

需要熟记的属性：
*
flex-direction 属性决定主轴的方向
flex-wrap 属性决定如果一条轴线排不下，如何换行
justify-content 属性定义了项目在主轴上的对齐方式。
align-items 属性定义项目在交叉轴上的对齐方式。
*
align-self 属性允许单个项目有与其他项目不一样的对齐方式
✨让一个元素水平垂直居中的方法

字节跳动布局面试题----div垂直居中，左右10px，高度始终为宽度一半
✨使用css让一个div消失
✨浮动导致的父元素高度塌陷解决方法（清楚浮动的方式）
css3中的伪元素 :before和 :after常见用法
实现响应式布局
css实现各种形状
BFC
1. BFC定义：
  BFC就是"块级格式化上下文"。它是一个独立的渲染区域，只有 Block-level box 参与，它规定了内部的 Block-level Box 如何布局，其中元素的布局不受外界的影响，也不会影响到外面的元素。
2. 如何创建BFC:
  1. 根元素，即 HTML 元素，是最大的一个 BFC
  2. float的值不是none。
  3. position的值不是static或者relative。
  4. overflow 的值不为visible
  5. display为inline-block, table-cell, table-caption, flex, inline-flex
3. BFC的作用：
  1. 利用BFC避免margin重叠。同一个BFC中两个相邻的块元素垂直方向上会发生marigin重叠。将第二个块元素激活BFC，让他们不属于同一个BFC。
  2. 清除浮动，计算BFC的高度时，浮动元素也参与计算，所以给父元素激活BFC，可以解决子元素浮动导致的高度塌陷问题。
4. BFC 布局规则：
  1. 内部的 Box 会在垂直方向，一个接一个地放置。
  2. 同一个BFC中两个相邻的块元素垂直方向上会发生marigin重叠。
  3. BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
  4. BFC 的区域不会与 float box 重叠。
  5. 计算 BFC 的高度，浮动元素也参与计算。
外边距重叠问题
同一个BFC中多个相邻的块元素垂直方向上marigin会重叠

折叠的结果为：
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。

CSS3动画属性

* animation

// 参数分别表示动画(与@keyframes对应)、动画持续时间、动画执行速度、动画延迟时间、动画循环规律
animation: animation-name animation-duration animation-timing-function  animation-delay animation-iteration-count；

* transform

 1) rotate旋转
 transform-origin：50% 50% //定义旋转基点
 transform：rotate(20deg) //旋转角度
 2) translate移动
 translate:translate(20px,10px)
 translate:translateX(20px)
 translate:translateY(30px)
 3) scale 缩放
 transform-origin：50% 50% //定义缩放基点
 translate:scale(20px,10px)
 translate:scaleX(20px)
 translate:scaleY(30px)

css 常用的函数

vousmevoyez0613

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html+css基础面试题

✨对HTML语义化标签理解html5的新特性script标签中defer和async的区别ss引入的方式有哪些? link和@import的区别是?两者都是外部引用CSS的方式link和页面一同加载,import在页面加载完之后再加载link兼容性比import好,因为link本身就是html标签link可以使用js对其修改,import不可以link还可以定义 RSS、rel 连接属性等,import只能导入样式HTML行内元素、块状元素、行内块状元素c..
复制链接

扫一扫