前端面试必备八股文——HTMLCSS

HTML

src和href的区别

srchref都是用来加载外部资源,区别如下

src当浏览器解析到该元素时,会暂停其他资源的加载和处理,直到该资源加载完成。 它会将资源内容嵌入到当前标签所在的位置,将其指向的资源下载应用到文档内,如js脚本等。常用在imgscriptiframe等标签。

href指向外部资源所在的位置,和当前元素位置建立链接,当浏览器解识别到它指向的位置,将其下载的时候不会阻止其他资源的加载解析。常用在alink标签。

HTML5新增特性

  • 新增语义化标签,headfooternavmainsection
  • 新增表单类型属性,emailnumber时间控件color颜色拾取器placeholderautofocus自动获取焦点...
  • 新增音视频标签,videoaudio
  • 新增canvas画布、websocket通信、拖拽等
  • 新增本地存储localStoragesessionStorage

对HTML语义化理解

根据内容来选择合适的标签

  • 方便浏览器爬虫更好的识别内容。
  • 有利于代码可读性,开发者能清晰的看出网页的结构,便于团队的开发与维护。

DOCTYPE(⽂档类型) 的作⽤

DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明,是用来告诉浏览器的解析器,该用什么样的方式去加载识别文档。

iframe 有那些优点和缺点?

iframe通常用来加载外部链接,不会影响网页内容的加载。

优点

  • 可以将网页原封不动的加载进来
  • 增加代码的可用性
  • 用来加载显示较慢的内容,如广告、视频等

缺点

  • 加载的内容无法被浏览器引擎识别,对SEO不友好
  • 会阻塞onload事件加载
  • 会产生很多页面,不利于管理

Canvas和SVG的区别

  • canvas画布,是通过javascript来绘制2d图,是逐像素进行渲染。
  • SVG矢量图,是基于XML描述的2D图形语言,每个元素都是可用的,可以为其添加事件。

script标签中defer和async的区别

他俩都是表示异步加载外部JS脚本,不会阻碍页面的加载解析。 区别

  • 执行顺序:有多个async标签不能保证先后加载顺序,而多个defer标签可以按先后顺序加载。
  • 是否立即执行:async加载完脚本后会立即执行defer是要等文档解析完成后才执行

行内元素、块级元素、空(void)

  • 行内abspaninputimgselectstrong
  • pdivh1ulollidldtdd
  • <hr><br><img><input><link><meta>

怎样添加、移除、移动、复制、创建和查找节点

  • 添加节点document.appendChild(dom)
  • 移除节点document.removeChild(dom)
  • 移动节点document.appendChild(targetDom)
  • 复制节点dom.cloneNode(true),参数true表示是否复制子节点
  • 创建节点document.createElement(dom)
  • 查找节点:
    • document.getElementById("elementId")
    • document.getElementsByClassName("className")
    • document.getElementsByTagName("tagName")
    • document.querySelector("selector")
    • document.querySelectorAll("selector")

CSS

CSS3新增特性

  • 新增CSS选择器、伪类
  • 特效:text-shadowbox-shadow
  • 线性渐变: gradient
  • 旋转过渡:transformtranstion
  • 动画: animation
  • 圆角: border-radius

盒模型

img

img

盒模型都是由四个部分组成的,分别是marginborderpaddingcontent

标准盒模型和IE盒模型的区别在于设置widthheight时,对应的范围不同。

  • 标准盒模型widthheight只包含了content
  • IE盒模型的widthheight除了content本身,还包含了borderpadding

通过修改元素的box-sizing属性来改变元素的盒模型

  • box-sizeing: content-box表示标准盒模型(默认值)
  • box-sizeing: border-box表示IE盒模型(IE盒模型)

CSS选择器和优先级

选择器

选择器权重
id选择器 #id100
类选择器 .classname10
属性选择器 div[class="foo"]10
伪类选择器 div::last-child10
标签选择器 div1
伪元素选择器 div:after1
兄弟选择器 div+span0
子选择器 ui>li0
后代选择器 div span0
通配符选择器0

优先级

  • !important
  • 内联样式
  • ID选择器
  • 类选择器/伪类选择器/属性选择器
  • 标签选择器/伪元素选择器
  • 关系选择器/通配符选择器

CSS可继承属性和不可继承属性

可继承

  • font-weight
  • color
  • font-size
  • line-height
  • cursor

不可继承

  • marginpaddingborder
  • display
  • background
  • overflow
  • widthheight
  • position

dislpay的属性和作用

属性作用
block块类型。默认宽度为父元素宽度,可设置宽高,换行显示。
inline行内元素类型。默认宽度为内容宽度,不可设置宽高,同行显示。
inline-block行内块级元素,默认宽度为内容宽度,可以设置宽高,同行显示
table块级表格
flexflex容器布局
none隐藏元素
inherit从父类继承display属性

隐藏元素的方式

  • display:none:元素在文档中不存在,不会占据位置。
  • visibility: hidden:元素在文档中的位置还保留,仍然占据空间。
  • opacity:0:将透明度设置为0。
  • z-index:负值:直接将元素放置在最下层,利用其他元素来遮盖。
  • position:absolute:将元素定位到可视区域以外。

单行、多行文本溢出

单行

css复制代码overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
whtie-space: nowrap; //规定段落中的文本不进行换行

多行

CSS复制代码overflow:hidden
text-overflow: ellipsis;     // 溢出用省略号显示
display:-webkit-box;         // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式:从上到下垂直排列
-webkit-line-clamp:3;        // 显示的行数

有了使用过Sass、Less 吗?他们的区别是什么?

他们都是 CSS 预处理器,是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。 增加了 CSS代码的复用性,层级,mixin, 变量,循环, 函数等对编写以及开发UI组件都极为方便。 区别

  1. 编译环境不一样
    • Sass是在服务端处理的,以前是Ruby,现在是Dart-SassNode-Sass
    • Less是需要引入less.js来处理Less代码输出CSS到浏览器,也可以在开发服务器将Less语法编译成css文件,输出CSS文件到生产包目录
  2. 变量符不一样,Less是@,而Scss是$
  3. Sass支持条件语句,可以使用if{}else{},for{}循环等等。而Less不支持

link和@import的区别

  • link是HTML提供的标签,不仅可以加载CSS文件,还可以定义RSS、rel连接属性等
  • @import是CSS提供等语法规则,只有导入样式表带作用。
  • link标签引入的CSS被同时加载,而@import引入的CSS将在页面加载完毕后被加载
  • @import是CSS2.1才有的语法,存在兼容性,而link作为HTML标签不存在兼容性问题

常见的CSS单位

  • px像素
    • CSS像素
    • 物理像素
  • 百分比%,作用于父元素, 当浏览器的宽度或者高度发生变化时,当前元素依据比例发生变化。
  • em和rem,相对长度单位,它们之间的区别:em相对于父元素,rem相对于根元素。
  • vw/vh是与视图窗口有关的单位,代表视图窗口的宽高。

px、em、rem的区别

  • px 固定像素单位,不能随其它元素的变化而变化
  • em是相对于父元素的单位,会随着父元素变化而变化
  • rem是相对于根元素html,它会随着html元素变化而变化

两栏布局

  • 利用浮动,将左边元素宽度设置为200px,并且设置向左浮动。将右边元素的margin-left设置为200px,宽度设置为auto(默认为auto,撑满整个父元素)。
CSS复制代码.outer {
  height: 100px;
}
.left {
  float: left;
  width: 200px;
  background: tomato;
}
.right {
  margin-left: 200px;
  width: auto;
  background: gold;
}
  • 利用浮动,左侧元素设置固定大小,并左浮动,右侧元素设置overflow: hidden; 这样右边就触发了BFC,BFC的区域不会与浮动元素发生重叠,所以两侧就不会发生重叠。
CSS复制代码.left{
     width: 100px;
     height: 200px;
     background: red;
     float: left;
 }
 .right{
     height: 300px;
     background: blue;
     overflow: hidden;
 }
  • 利用flex布局,将左边元素设置为固定宽度200px,将右边的元素设置为flex:1。
CSS复制代码.outer {
  display: flex;
  height: 100px;
}
.left {
  width: 200px;
  background: tomato;
}
.right {
  flex: 1;
  background: gold;
}
  • 利用绝对定位,将父级元素设置为相对定位。左边元素设置为absolute定位,并且宽度设置为200px。将右边元素的margin-left的值设置为200px。
CSS复制代码.outer {
  position: relative;
  height: 100px;
}
.left {
  position: absolute;
  width: 200px;
  height: 100px;
  background: tomato;
}
.right {
  margin-left: 200px;
  background: gold;
}

三栏布局

  • 利用绝对定位,左右两栏设置为绝对定位,中间设置对应方向大小的margin的值。
  • 利用flex布局,左右两栏设置固定大小,中间一栏设置为flex:1
  • 利用浮动,左右两栏设置固定大小,并设置对应方向的浮动。中间一栏设置左右两个方向的margin值,注意这种方式,中间一栏必须放到最后:
  • 圣杯布局,利用浮动和负边距来实现。父级元素设置左右的 padding,三列均设置向左浮动,中间一列放在最前面,宽度设置为父级元素的宽度,因此后面两列都被挤到了下一行,通过设置 margin 负值将其移动到上一行,再利用相对定位,定位到两边。
  • 双飞翼布局,双飞翼布局相对于圣杯布局来说,左右位置的保留是通过中间列的 margin 值来实现的,而不是通过父元素的 padding 来实现的。本质上来说,也是通过浮动和外边距负值来实现的。

水平垂直居中

  • 利用绝对定位,先将元素的左上角通过top:50%left:50%定位到页面的中心,然后再通过translate来调整元素的中心点到页面的中心。该方法需要考虑浏览器兼容问题。
CSS复制代码.parent {
    position: relative;
}
 
.child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
  • 利用绝对定位,设置四个方向的值都为0,并将margin设置为auto,由于宽高固定,因此对应方向实现平分,可以实现水平和垂直方向上的居中。该方法适用于盒子有宽高的情况:
CSS复制代码.parent {
    position: relative;
}
 
.child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
  • 利用绝对定位,先将元素的左上角通过top:50%left:50%定位到页面的中心,然后再通过margin负值来调整元素的中心点到页面的中心。该方法适用于盒子宽高已知的情况。
CSS复制代码.parent {
    position: relative;
}
 
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;     /* 自身 height 的一半 */
    margin-left: -50px;    /* 自身 width 的一半 */
}
  • 使用flex布局,通过align-items:centerjustify-content:center设置容器的垂直和水平方向上为居中对齐,然后它的子元素也可以实现垂直和水平的居中。该方法要考虑兼容的问题,该方法在移动端用的较多:
CSS复制代码.parent {
    display: flex;
    justify-content:center;
    align-items:center;
}

flex布局理解

flex布局是CSS3新增的一种布局方式,能够根据不同屏幕尺寸的变化来自适应大小。

常用的属性:

  • flex-direction属性决定主轴的方向(即项目的排列方向)。
  • flex-wrap属性定义,如果一条轴线排不下,如何换行。
  • flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
  • justify-content属性定义了项目在主轴上的对齐方式。
  • align-items属性定义项目在交叉轴上如何对齐。
  • align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

flex: 1表示什么

flex: 1flex-growflex-shrinkflex-basis的缩写,默认值是0 1 autoflex:1也表示flex: 1 1 auto

  1. flex-grow定义项目发大比例,默认为0,即存在剩余空间,也不放大。
  2. flex-shrink定义项目收缩比例,默认为1,即空间不足,也会进行缩小。
  3. flex-basis定义项目给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小。

对BFC的理解,如何创建BFC

BFC是块级格式上下文(Block Formatting Context,BFC),是CSS布局的一个概念,在BFC布局里面的元素不受外面元素影响。

创建BFC条件

  • 设置浮动:float有值并不为空
  • 设置绝对定位: position(absolute、fixed)
  • overfilow值为:hiddenauto、`scroll
  • display值为:inline-blocktable-celltable-captionflex

BFC作用

  • 解决margin重叠问题:由于BFC是一个独立的区域,内部元素和外部元素互不影响,将两个元素变为BFC,就解决了margin重叠问题
  • 创建自适应两栏布局:可以用来创建自适应两栏布局,左边宽高固定,右边宽度自适应。
  • 解决高度塌陷问题:在子元素设置浮动后,父元素会发生高度的塌陷,也就是父元素的高度为0解决这个问题,只需要将父元素变成一个BFC。

什么是margin重叠,如何解决

两个块级元素分别设置上下margin时可能会导致边距合并为一个边距,合并到边距取最大的那个值。需要注意的是,浮动的元素和绝对定位这种脱离文档流的元素的外边距不会折叠。重叠只会出现在垂直方向。

计算规则

  • 都是正数,取最大的。20px 40px ---> 40px
  • 一正一负,用正数减去负数后。20px -50px ---> -30px
  • 都是负数,用0减去两个中绝对值大的那个。-30px -10px ---> -20px

解决方案 对于重叠的情况,主要有两种:兄弟之间重叠(margin合并)父子之间重叠(margin塌陷)

  • 兄弟之间重叠
    • 底部元素变为行内盒子:display: inline-block
    • 底部元素设置浮动:float
    • 底部元素的position的值为absolute/fixed
  • 父子之间重叠
    • 父元素加入:overflow: hidden
    • 父元素添加透明边框:border:1px solid transparent
    • 子元素变为行内盒子:display: inline-block
    • 子元素加入浮动属性或定位

position 常用属性 默认值是什么

  • static 默认值,没有定位,元素正常在文档流中显示
  • relative 相对定位,相对于原来的位置进行定位
  • absolute 绝对定位,相对于static定位意外以外的一个父元素进行定位。
  • fixed 绝对定位,相对于浏览器窗口
  • sticky 粘性定位,基于用户滚动位置

实现一个三角形

通过设置不同方向边框来实现

CSS复制代码div {
    width: 0;
    height: 0;
    border-top: 50px solid red;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
}

img

画一条0.5px的线

  • 使用transform: scale()的方式,该方法用来定义元素的2D 缩放转换:
CSS
复制代码transform: scale(0.5,0.5);
  • 采用meta viewport的方式,这样就能缩放到原来的0.5倍,如果是1px那么就会变成0.5px。viewport只针对于移动端,只在移动端上才能看到效果。

如何解决1px

1px 问题指的是:在一些 Retina屏幕 的机型上,移动端页面的 1px 会变得很粗,呈现出不止 1px 的效果。原因很简单——CSS 中的 1px 并不能和移动设备上的 1px 划等号。

  • 直接写0.5px
  • 利用伪元素,先放大再缩小
  • 使用viewport缩放来解决

作者:wakaka378
链接:https://juejin.cn/post/7269794410573512758
来源:稀土掘金
1795864)]

画一条0.5px的线

  • 使用transform: scale()的方式,该方法用来定义元素的2D 缩放转换:
CSS
复制代码transform: scale(0.5,0.5);
  • 采用meta viewport的方式,这样就能缩放到原来的0.5倍,如果是1px那么就会变成0.5px。viewport只针对于移动端,只在移动端上才能看到效果。

如何解决1px

1px 问题指的是:在一些 Retina屏幕 的机型上,移动端页面的 1px 会变得很粗,呈现出不止 1px 的效果。原因很简单——CSS 中的 1px 并不能和移动设备上的 1px 划等号。

  • 直接写0.5px
  • 利用伪元素,先放大再缩小
  • 使用viewport缩放来解决

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/392664.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

普中51单片机学习(六)

点亮第一个LED LED相关知识 LED,即发光二极管&#xff0c;是一种半导体固体发光器件。工作原理为&#xff1a;LED的工作是有方向性的&#xff0c;只有当正级接到LED阳极&#xff0c;负极接到LED的阴极的时候才能工作&#xff0c;如果反接LED是不能正常工作的。其原理图如下 …

[嵌入式系统-27]:RT-Thread -14- 操作系统配置:rtconfig.h文件与menuconfig命令

目录 一、rtconfig.h 1.1 概述 1.2 软硬件资源配置 1.3 功能模块选择 1.4 内核配置详解 1.5 调度器配置 1.6 硬件设备驱动配置 1.7 网络配置 1.8 调试配置 二、menuconfig 2.1 概述 2.2 主要功能 三、RT Thread配置 VS Linux配置 一、rtconfig.h 1.1 概述 rtco…

关于虚拟化的一切

茶还是咖啡&#xff1f; Xbox 还是 PlayStation&#xff1f; Chrome 还是 Firefox&#xff1f; 我们习惯于做出棘手的选择。在云计算中&#xff0c;选择 Linux 还是 Windows 也不例外&#xff0c;通常涉及成本、灵活性和项目特定要求。虽然 Linux 具有开源和经济高效的优势&…

半理想架构的Doherty功率放大器理论与仿真-基于GAN器件CGH40010F

半理想架构的Doherty功率放大器理论与仿真-基于GAN器件CGH40010F 理想架构的Doherty功率放大器理论与仿真中已经介绍了如何在ADS中使用理想电流源来对DPA的架构进行仿真。但是理想的电流源太理想了&#xff0c;电压、电流的许多行为都是需要自己使用数学公式去严格定义&#x…

集团企业大数据应用:突破痛点,释放数据价值

在数字经济日益崛起的背景下&#xff0c;集团企业以其管理范围广泛、业务领域多元化和分支机构复杂化的特性&#xff0c;在市场竞争中扮演着重要角色。为了维持和提升这种竞争力&#xff0c;大数据应用成为了集团企业不可或缺的战略工具。然而&#xff0c;在实际应用中&#xf…

武汉灰京文化浅谈手游崛起的新游戏时代

随着智能手机性能的不断提升&#xff0c;手游正逐渐迈向与主机和PC游戏相媲美的领域。高性能处理器、强大的图形处理能力以及智能化技术的融合&#xff0c;使得手游可以实现更高画质和更流畅的操作体验。而虚拟现实&#xff08;VR&#xff09;和增强现实&#xff08;AR&#xf…

模型可视化

模型标题可视化 可视化工具&#xff1a;Graphiz、Netron、ZetaneEngine 7.2.2Graphiz可视化工具 Graphiz是一个由AT&T实验室启动的开源工具包&#xff0c;用于绘制DOT语言脚本描述的图形&#xff0c;使用它可以非常方便地对任何图形进行可视化。 Graphiz的使用步骤包括创…

Oracle 基础入门指南

一、什么是Oracle&#xff1f; Oracle是一款由美国Oracle公司开发的关系型数据库管理系统。它支持SQL查询语言&#xff0c;并提供了丰富的功能和工具&#xff0c;用于管理大规模数据存储、处理和访问。Oracle被广泛应用于企业级应用中&#xff0c;包括金融、电信、零售等各行各…

阿里云服务器部署配置选择全攻略

阿里云服务器配置怎么选择&#xff1f;根据实际使用场景选择&#xff0c;个人搭建网站可选2核2G配置&#xff0c;访问量大的话可以选择2核4G配置&#xff0c;企业部署Java、Python等开发环境可以选择2核8G配置&#xff0c;企业数据库、Web应用或APP可以选择4核8G配置或4核16G配…

测试用例执行计划 - 华为OD统一考试(C卷)

OD统一考试&#xff08;C卷&#xff09; 分值&#xff1a; 100分 题解&#xff1a; Java / Python / C 题目描述 某个产品当前迭代周期内有N个特性&#xff08;F1, F2, ..., FN&#xff09;需要进行覆盖测试&#xff0c;每个特性都被评估了对应的优先级&#xff0c;特性使用其…

Python六级考试笔记

Python六级考试笔记【源源老师】 六级标准 一、 掌握文件操作及数据格式化。 二、 掌握数据可视化操作。 三、 理解类与对象的概念&#xff0c;初步掌握类与对象的使用。 四、 掌握SQLite数据库基础编程。 五、 掌握简单的使用tkinter的GUI设计。 ​ 1. 文件操作 &#xff0…

海外网红营销指南:打造情感共鸣的6大策略解析

随着全球互联网的发展&#xff0c;海外网红营销已经成为品牌推广的一种重要方式。然而&#xff0c;在竞争激烈的市场中&#xff0c;要让品牌在海外市场脱颖而出&#xff0c;仅仅依靠产品本身的特点和广告的宣传已经不再足够。情感共鸣&#xff0c;作为一种更为深刻、更为有力的…

春节专题|产业7问:区块链厂商的现在和未来——数字资产厂商

2023转瞬即逝&#xff0c;不同于加密领域沉寂一整年后在年末集中爆发&#xff0c;对于我国的区块链厂商而言&#xff0c;稳中求胜才是关键词&#xff0c;在平稳发展的基调下&#xff0c;产业洗牌也悄无声息的到来。 从产业总体而言&#xff0c;在经过了接近3年的快速发展后&…

『运维备忘录』之 CMD 命令详解

运维人员不仅要熟悉操作系统、服务器、网络等只是&#xff0c;甚至对于开发相关的也要有所了解。很多运维工作者可能一时半会记不住那么多命令、代码、方法、原理或者用法等等。这里我将结合自身工作&#xff0c;持续给大家更新运维工作所需要接触到的知识点&#xff0c;希望大…

C高级D5作业

1.#!/bin/bash read -p "请输入一个字符>>" -n 1 c echo case $c in [[:lower:]]) echo "小写" ;; [[:upper:]]) echo "大写" ;; [1-9]) echo "数字" ;; …

使用Python生成二维码的完整指南

无边落木萧萧下&#xff0c;不如跟着可莉一起游~ 可莉将这篇博客收录在了&#xff1a;《Python》 可莉推荐的优质博主首页&#xff1a;Kevin ’ s blog 本文将介绍如何使用Python中的qrcode库来生成二维码。通过简单的代码示例和详细解释&#xff0c;读者将学习如何在Python中轻…

第五次作业:LMDeploy 的量化和部署

参考文档&#xff1a;https://github.com/InternLM/tutorial/blob/main/lmdeploy/lmdeploy.md 基础作业&#xff1a; 使用 LMDeploy 以本地对话、网页Gradio、API服务中的一种方式部署 InternLM-Chat-7B 模型&#xff0c;生成 300 字的小故事&#xff08;需截图&#xff09; …

Leetcode-589. N 叉树的前序遍历

题目&#xff1a; 给定一个 n 叉树的根节点 root &#xff0c;返回 其节点值的 前序遍历 。 n 叉树 在输入中按层序遍历进行序列化表示&#xff0c;每组子节点由空值 null 分隔&#xff08;请参见示例&#xff09;。 示例 1&#xff1a; 输入&#xff1a;root [1,null,3,2,4,…

【机器学习】机器学习常见算法详解第4篇:KNN算法计算过程(已分享,附代码)

本系列文章md笔记&#xff08;已分享&#xff09;主要讨论机器学习算法相关知识。机器学习算法文章笔记以算法、案例为驱动的学习&#xff0c;伴随浅显易懂的数学知识&#xff0c;让大家掌握机器学习常见算法原理&#xff0c;应用Scikit-learn实现机器学习算法的应用&#xff0…

Checklist系列:JVM自检四十问,万字整理,推荐收藏

基础 请简单的介绍一下jvm&#xff1f; JVM 全称&#xff1a;Java Virtual Machine&#xff08;Java虚拟机&#xff09;简介&#xff1a;JVM是一种虚拟机&#xff0c;它使计算机能够运行Java程序以及用其他语言编写并编译为Java字节码的程序。Java的设计理念之一是"一次编…