• 前端基础知识

    HTML

    1、对语义化的理解

    • 对开发者友好，让人更容易读懂，利于代码可读性
    • 对机器友好，让搜索引擎更容易读懂，利于seo
      、

    2、html5新增的元素

    ,
    ,
    ,
    ， 和 ，
    3、html5新增的功能

    • 新增localstorage，sessionstorage。localstorage存在本地，sessionstorage关闭页面时会被清除，大小为5MB
    • 更好的多媒体支持， 和 ，
    • 拖放；提供ondragstart，ondragover，ondrop等方法

    CSS

    css题目
    1、盒子模型
    所有HTML元素可以看作盒子，CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
    盒子的宽度和高度的计算方式由box-sizing属性控制
    标准盒子模型：content-box（默认值）盒子的宽度 = width + padding + border + margin
    IE盒子模型：border-box，宽高包括content和padding还有border，内容的宽度由width - (padding + border ) 才可以得到
    2、BFC
    BFC块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。计算BFC的高度时，浮动元素也参与计算
    触发条件：

    • 浮动元素 (元素的 float 不是 none)
    • 绝对定位元素 (元素具有 position 为 absolute 或 fixed)
    • 内联块 (元素具有 display: inline-block)
    • 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
    • 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
    • 具有overflow 且值不是 visible 的块元素
      BFC布局规则:
    • 浮动的元素会被父级计算高度(父级元素触发了BFC)
    • 非浮动元素不会覆盖浮动元素的位置(非浮动元素触发了BFC)
    • margin不会传递给父级(父级触发BFC)
    • 属于同一个BFC的两个相邻元素上下margin会重叠
      可以解决的问题
    • 清除浮动
    • 垂直外边距重叠问题
    • 自适用两列布局
      什么是BFC？看这一篇就够了
      3、两栏、三栏布局
      两栏布局：左侧固定，右侧自适应
      flex:
    .container{
  display: flex;
}
.left{
  width: 150px;
  height: 600px;
  background-color: black;
}
 
.right{
  flex: 1;         
  background-color: brown;
  height: 600px;

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    三栏布局：

    .container{
 display: flex;
}

.left{
 width: 150px;
 height: 600px;
 background-color: black;
}

.main{
 flex:1;
 background-color: brown;
 height: 600px;
}
.right{
 width: 150px;
 height: 600px;
 background-color: black;

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    4、css实现三角形、扇形
    三角形：

    .box{
	width:0px;
	height:0px;
	border: 50px solid transparent;
	border-left:50px solid #ef4848;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    扇形：
    原理其实和三角形一模一样，只是盒子为圆形

    .box{
	width:0px;
	height:0px;
	border: 50px solid transparent;
	border-left:50px solid #ef4848;
	border-radius: 50%;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    5、css选择器权重

    • !important
    • 行内样式
    • id选择器(#myid)
    • 类选择器(.myclassname)
    • 标签选择器(div,h1,p)
    • 子选择器(ul < li)
    • 后代选择器(li a)
    • 伪类选择(a:hover,li:nth-child)
      优先级相同时，则采用就近原则，选择最后出现的样式;
      继承得来的属性，其优先级最低。
      6、css响应式
      1）rem
    function refreshRem() {
    var docEl = doc.documentElement;
    var width = docEl.getBoundingClientRect().width;
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}
win.addEventListener('resize', refreshRem);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    2）使用第三方插件pxtorem、px2rem等结合rem，将px转化为rem

    7、css布局有哪些
    flex布局：
    Flex 意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。
    flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content
    Grid 布局：
    网格是最强大的 CSS 布局方案，它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。可以说是flex布局的升级版。
    Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。
    Table 布局：
    table布局在如今已经很少使用，原因是：table布局比其它html标记占更多的字节，会阻挡浏览器渲染引擎的渲染顺序，会影响其内部的某些布局属性的生效。
    标签与js的对应:

    table    { display: table }
tr       { display: table-row }
thead    { display: table-header-group }
tbody    { display: table-row-group }
tfoot    { display: table-footer-group }
col      { display: table-column }
colgroup { display: table-column-group }
td, th   { display: table-cell }
caption  { display: table-caption }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    8、css哪些属性可以继承

    不可继承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi
所有元素可继承：visibility和cursor
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction
块状元素可继承：text-indent和text-align
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image
表格元素可继承：border-collapse

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    9、伪类、伪元素
    伪类的分类：状态伪类和结构性伪类
    常见的状态伪类主要包括：

    • :link 应用于未被访问过的链接；
    • :hover 应用于鼠标悬停到的元素；
    • :active 应用于被激活的元素；
    • :visited 应用于被访问过的链接，与:link互斥。
    • :focus 应用于拥有键盘输入焦点的元素。

    常见的结构性伪类包括：

    • :first-child 选择某个元素的第一个子元素；
    • :last-child 选择某个元素的最后一个子元素；
    • :nth-child() 选择某个元素的一个或多个特定的子元素；
    • :nth-last-child() 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
    • :nth-of-type() 选择指定的元素；
    • :nth-last-of-type() 选择指定的元素，从元素的最后一个开始计算；
    • :first-of-type 选择一个上级元素下的第一个同类子元素；
    • :last-of-type 选择一个上级元素的最后一个同类子元素；
    • :only-child 选择的元素是它的父元素的唯一一个子元素；
    • :only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素；
    • :empty 选择的元素里面没有任何内容。可以用于空值提醒等
      常见的伪元素选择器（伪类一个: 伪元素两个::）
    • ::first-letter 选择元素文本的第一个字（母）。
    • ::first-line 选择元素文本的第一行。
    • ::before 在元素内容的最前面添加新内容。
    • ::after 在元素内容的最后面添加新内容。
    • ::selection匹配用户被用户选中或者处于高亮状态的部分
    • ::placeholder匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效10、css3新特性

    10、CSS3的新特性大致分为以下六大类

    • CSS3选择器
    • CSS3边框与圆角
    • CSS3背景与渐变；background:lineargradient()
    • CSS3过渡；transition
    • CSS3变换；rotate()旋转，translate()平移，scale( )缩放
    • CSS3动画；animation属性
      11、移动端1px实现
      为什么css的1px不等于设备的1px?
      当前移动设备屏幕的像素密度越来越高，手机屏幕尺寸没有发生变化，但屏幕的分辨率却提高了一倍，即同样大小的屏幕上，像素多了一倍。那么我们获取到的 CSS 像素就不是真实的物理像素点了，于是便有了设备像素比dpr（设备像素/css像素）的概念。由于前端代码中的使用的是 CSS 像素，手机会根据 dpr 换算成实际的物理像素大小来渲染页面。比如 iPhone6 的设备像素比 dpr = 2 ，相当于一个 CSS 像素等于两个物理像素，即 1px 由 2个物理像素点组成。
      主要有两个比较适合的方案：
    • 使用伪元素 + CSS3``缩放的方式
    .line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 1px;
    background: #b3b4b8;
    transform: scale(0.5);
    transform-origin: 0 0; // 该属性允许改变被转换元素的位置, 默认值为50% 50% 0
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    该方案的优点在于，针对老项目使用缩放的形式可以快速实现 1px 的效果。

    • 使用 动态 viewport + rem 布局 的方式（即 Flexible 实现方案）
      建议先理解viewport的概念会更清晰
      viewport 深入理解
    
    
    
  

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    老项目修改代价过大，只适用于新项目。（还是有点不理解，需要回过头再复习一次）
    最后一次探究1px

    12、px、em、rem的区别
    px（像素，相对于显示器屏幕分辨率而言）
    em（相对当前元素内文本的字体尺寸，会继承父元素大小）
    rem （相对HTML根元素，最常用的单位）

    13、清除浮动
    清除浮动主要是为了解决子元素浮动父元素高度会塌陷为零的问题。
    1）、给父元素content添加一个伪类

    .content::after {
    content: " ";
    display: block;
    clear: both;
}

    • 1
    • 2
    • 3
    • 4
    • 5

    这个方法比较清晰，也提高了易读性。推荐这个。
    2）、
    给父元素添加一个夯余元素

    

    • 1

    缺点：添加了一个无关元素，代码阅读受影响，不符合语义化
    3）、父元素也添加浮动

    .content {
         background-color: black;
         width: 100%;
         float: left;
       }

    • 1
    • 2
    • 3
    • 4
    • 5

    缺点：虽然可以解决问题，但是后面要添加有不需要浮动的子元素，则影响其显示。
    4）、给父元素添加overflow: hidden;

    .content {
        background-color: black;
        border: 2px solid red;
        overflow: hidden;
}

    • 1
    • 2
    • 3
    • 4
    • 5

    缺点：一旦包含非浮动的子元素，则会影响其显示。

    14、link和@import的区别

    • link属于html标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等；而@import是css提供的。
    • 页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载的。
    • 兼容性问题：@import只在IE5以上才能识别，而link是html标签，无兼容性问题。
    • 权重问题:@import的权重要高于link。
    • DOM操作:DOM可以操作link中的样式，而不可以操作@import中的样式

    15、重绘、重排，以及如何减少重排
    重排：元素的规模尺寸，布局，隐藏等改变而需要重新构建，这就称为重排
    1）添加、删除可见的dom
    2）元素的位置改变
    3）元素的尺寸改变（外边距、内边距、边框厚度、宽高等几何属性）
    4）页面渲染初始化
    5）浏览器窗口尺寸改变

    重绘：只是影响元素的外观，风格，而不会影响布局的，比如background-color、opacity。则就叫称为重绘。

    减少重排：

    • 将需要多次重排的元素，比如动画，可以让它脱离文档流，设为absoulte或fixed，这样不会影响其他元素的布局
    • 合并多次对DOM和样式的修改
    • 使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘 。
    • 避免使用table布局

    虚拟DOM可以将多次修改的DOM一次性渲染到页面上，减少页面的重排重绘，提高渲染性能。 在代码渲染到页面之前，vue会把代码转换成一个对象（虚拟 DOM）。在每次数据发生变化前，虚拟DOM都会缓存一份，变化之时，现在的虚拟DOM会与缓存的虚拟DOM进行比较。在vue内部封装了diff算法，通过这个算法来进行比较，渲染时修改改变的变化，原先没有发生改变的通过原先的数据进行渲染。

  • 相关阅读:
    学生HTML个人网页作业作品----(画家企业8页)
    C/C++数据结构——树的同构（二叉树）
    数据库备份与恢复简介
    Unity中的旋转和矩阵操作
    Windows11怎样投屏到电视上？
    初学者记录一下mysql学习中遇到的两个问题
    lv8 嵌入式开发-网络编程开发 17 套接字属性设置
    Windows超级管理器
    vue3中使用vue3-pdf-app和使用浏览器内置的PDF插件浏览器PDF文件
    跟着官方帮助文档学ICEM网格划分（附视频教程）
  • 原文地址：https://blog.csdn.net/weixin_38984030/article/details/126348429