前端三件套几种元素的区别（一）

已于 2022-03-21 19:10:00 修改
阅读量220 收藏
点赞数
分类专栏： 前端 文章标签： 前端 html css3
于 2022-03-17 16:21:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59068750/article/details/123538041
版权

目录

1、HTML的块级元素，行内元素，行内块元素分别有哪些，区别又是什么

2、textContent、innerText、innnerHTML的区别

3、watch，computed和methods的关系

4、==与===的区别 

5、 style标签写在body后与body前有什么区别？

6、display: none与visibility: hidden 的区别

visibility具有继承性 

visibility: hidden不会影响序号计数

7、call、apply、bind使用与区别

1、HTML的块级元素，行内元素，行内块元素分别有哪些，区别又是什么

块级元素：div,h1~h6,p,ul,ol,dl,li,hr,dt,dd,form,table

块元素独占一行

宽高生效，默认宽和父元素一样，内容撑开高度

margin,padding全部生效

行内元素：em,i,del,samll,strong,ins,span,a

宽高不生效，左右margin生效上下不生效，在一行排列，大小靠内容撑开，padding生效

 行内块元素：img,input(表单元素，除去form)

在一行排列，宽高生效，margin,padding生效

Position几个定位

relavtive： 相对定位，不脱离文档流，相对自身原本位置进行偏离，不影响元素本身属性，z-index提升层级

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .one{
      margin-left: 200px;
      width: 300px;
      height: 300px;
      background-color: red;
    }
    .two{
      width: 100px;
      height: 100px;
      position: relative;
      left: 50px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="one">
    <div class="two">

    </div>
  </div>
</body>
</html>

absolute：绝对定位，脱离文档流，相对已有定位的父元素进行偏离，如果没有就相当于body进行偏离

一个是父亲没定位，直接相当body进行偏离 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .one{
      margin-left: 200px;
      width: 300px;
      height: 300px;
      background-color: red;
      /* position: relative; */
    }
    .two{
      width: 100px;
      height: 100px;
      position: absolute;
      top: 20px;
      left: 50px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="one">
    <div>
      哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
      哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
    </div>
    <div class="two">

    </div>
  </div>
</body>
</html>

 给父盒子添加定位

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .one{
      margin-left: 200px;
      width: 300px;
      height: 300px;
      background-color: red;
      position: relative;
    }
    .two{
      width: 100px;
      height: 100px;
      position: absolute;
      top: 20px;
      left: 50px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="one">
    <div>
      哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
      哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
    </div>
    <div class="two">

    </div>
  </div>
</body>
</html>

 

filex：固定定位，脱离文档流，相对于视窗进行偏离

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .one{
      margin-left: 200px;
      width: 300px;
      height: 300px;
      background-color: red;
      position: fixed;
      top: 100px;
    }
  </style>
</head>
<body>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <div class="one">
  </div>
</body>
</html>

2、textContent、innerText、innnerHTML的区别

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    button {
      border: 1px solid red;
    }
    .mei{
      display: none;
    }
  </style>
</head>

<body>

  <div class="contain">
    <span>啊啊啊啊</span>
    <span class="mei">有么妹妹</span>
  </div>
  <button onclick="myFunction()">我是按钮</button>
  <script>
    function myFunction() {
      console.log(event.type);
    }
    let container = document.querySelector("body");
    console.log("textContent的内容是:", container.textContent);
    console.log("innerText的内容是:", container.innerText);
    console.log("innerHTML的内容是:", container.innerHTML);
  </script>
</body>

</html>

 textContent属性：可以获取指定节点的文本及其后代节点中文本内容，也包括<script>和<style>元素中的内容；会获取display:none的节点的文本

innerText属性：也是获取指定节点的文本及其后代节点中文本内容，但不能获取<script>和<style>元素中的内容。不会获取display:none的节点的文本

innerHTML属性：是获取HTML文本结构内容

3、watch，computed和methods的关系

watch和computed各自处理的数据关系场景不同

1.watch擅长处理的场景：一个数据影响多个数据

2.computed擅长处理的场景：一个数据受多个数据影响

4、==与===的区别 

  • 对于string,number等基础类型，== 和=== 是有区别的，不同类型间比较，== 之比较“转化成同一类型后的值”看“值”是否相等，=== 如果类型不同，其结果就是不等
  • 同类型比较，直接进行“值”比较，两者结果一样
  • 对于Array,Object等高级类型，== 和 ===是没有区别的
  • 基础类型与高级类型， == 和 ===是有区别的
  • 对于 ==，将高级转化为基础类型，进行“值”比较，因为类型不同， === 结果为false

简而言之就是 " == " 只要求值相等; " === " 要求值和类型都相等

5、 style标签写在body后与body前有什么区别？

  • 写在body标签前利于浏览器逐步渲染：
  •       resources downloading->CSSOM+DOM->RenderTree(composite)->Layout->paint
  • 写在body标签后：
  •       由于浏览器以逐行方式对html文档进行解析；
  •       当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲            染，等待加载且解析样式表完成之后重新渲染；
  •       在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）；

6、display: none与visibility: hidden 的区别

很多前端的同学认为visibility: hidden和display: none的区别仅仅在于display: none隐藏后的元素不占据任何空间，而visibility: hidden隐藏后的元素空间依旧保留 ，实际上没那么简单，visibility是一个非常有故事性的属性

visibility具有继承性 

给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .big{
     visibility: hidden;
     width: 300px;
     height: 300px;
     background-color: red;
    }
    .small{
      width: 100px;
      height: 100px;
      visibility: visible;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="main">
    <div class="big">
        <div class="small"></div>
    </div>
  </div>
</body>
</html>

visibility: hidden不会影响序号计数

visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .big{
     visibility: hidden;
     display: none;
     width: 300px;
     height: 300px;
     background-color: red;
    }
    .small{
      width: 100px;
      height: 100px;
      visibility: visible;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div>
      <strong>给元素设置visibility:hidden样式</strong>
      <ol>
          <li>元素1</li>
          <li style="visibility:hidden;">元素2</li>
          <li>元素3</li>
          <li>元素4</li>
      </ol>
  </div>
  <div>
      <strong>给元素设置display:none样式</strong>
      <ol>
          <li>元素1</li>
          <li style="display:none;">元素2</li>
          <li>元素3</li>
          <li>元素4</li>
      </ol>
  </div>
</body>

</html>

7、call、apply、bind使用与区别

三者都是可以改变this的指向

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    let fn = function (a, b) {
      console.log(this, a, b);
    }
    let obj = { name: "obj" };
    console.log("call-----------");

    fn(2, 9)
    fn.call(obj, 1, 2);    // this:obj    a:1         b:2
    fn.call(1, 2);        // this:1      a:2         b:undefined
    fn.call();           // this:window a:undefined b:undefined
    fn.call(null);       // this=window a=undefined b=undefined
    fn.call(undefined);  // this=window a=undefined b=undefined
    console.log("apply-----------");
    // 第二个参数与call不同只能传数组
    fn.apply(obj, [1, 2])
    console.log("bind-----------");
    // bind与call参数一致，但是call和apply是立即执行，bind必须绑定个事件来触发
    document.onclick = fn.bind(obj,29,2);

  </script>
</body>

</html>

江河地笑
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
全面了解行内元素与块级元素的区别
01-21
首先，CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，分别为块级（block）、行内（inline）。 块级元素：（以下列举比较常用的块级元素，详情可在w3cschool查询） XML/HTML Code复制内容到剪贴板 <div>定义文档中的分区或节       <h1>定义最大的标题       <h2>定义副标题       <h3>定义标题       <h4>定义标题       <h5>定义标题       <h6>定义最小的
前端“三件套“——HTML,CSS,Javascript（一）
qq_50692350的博客
09-21 5046
HTML
前端三件套
m0_71212413的博客
12-28 2266
前端三件套
全栈1——前端三件套
老猫的博客
12-29 5170
前端三件套简单笔记 B/S 软件的结构 前端的开发流程 网页的组成部分 页面由三部分内容组成 分别是内容（结构）、表现、 行为。 内容（ 结构） ， 是我们在页面中可以看到的数据。 我们称之为内容。 一般内容 我们使用 html 技术来展示。 表现， 指的是这些内容在页面上的展示形式。 比如说。 布局， 颜色， 大小等等。 一般使用 CSS 技术实现 行为， 指的是页面中元素与输入设备交互的响应。 一般使用 javascript 技术实现。 HTML 然后就是由各种标签的语法 比如标题、超链接、列
简单聊聊前端三件套
akdjhgwehw的博客
09-11 807
这篇文章是博主学习前端的第一篇文章，具体会介绍一下Web是什么意思，还会包括HTML的内容，大家可以按需求直接跳转到对应的部分。在现代Web开发中，HTML（超文本标记语言）、CSS（层叠样式表）和JavaScript是不可或缺的关键技术。它们各自负责不同的任务，协同工作以创建交互性、美观和高性能的网页应用程序。3博主还会持续更新相关文章，如果有什么意见或者建议可以给博主私信，欢迎大家多多评论交流。
前端三件套之一：css学习总结思维导图
最新发布
04-02
个人总结，希望能有所帮助
WEB前端CSS居中的几种方法共4页.pdf.zip
10-30
WEB前端CSS居中的几种方法共4页.pdf.zip
JavaWeb前端三件套
09-14
前端三件套HTML , CS , JS基础操作，底层原理，案例教学。炸裂全网的保姆教学。特别适合新手小白和刚接触前端的小伙伴们。如果大家喜欢，可以点个关注，谢谢啦。
一种数码相机成像和视频处理前端的设计
12-10
摘要：针对数码相机的成像和视频处理前端，给出一种基于TI DSP技术的设计方案。详细介绍单芯片数字视频解码器TVP5040和单芯片影像处理器TMS320DSC系列DSP的图像功能单元CCD控制器的功能和特点，并给出二者的硬件连接...
前端三件套html，css，JavaScript.zip
12-29
前端三件套html，css，JavaScript.zip
块级元素、行内元素、行内块元素的区别
m0_59717262的博客
06-25 3850
不管块级元素还是行内元素，区别:一是排列方式，二是宽高边距设置，三是默认宽度。块级元素会独占一行，而行内元素和行内块元素则会在一行内显示；块级元素和行内块元素可设置 width、height 属性，而行内元素设置无效；块级元素的 width 默认为 100%，而行内元素则是根据其自身的内容或子元素来决定其宽度；而行内块级元素又同时拥有块级元素和行内元素的特点。
前端三件套知识点
二氧化硅.的博客
01-11 2138
前端三件套知识点
Javaweb-前端三件套入门
m0_71119554的博客
01-04 1070
ECMAScript6新增了let关键字来定义变量，他的用法类似于var，但是所声明的变量，只在let关键字所在的代码块有效，且不允许重复声明。1. string: 按照字符串的字面值，转为数字.如果字面值不是数字，则转为NaN。->超文本：超越了文本限制，比普通文本更加强大，除了文字信息，还可以定义图片，音频，视频等内容。该标准是在核心 DOM 基础上，对 HTML 中的每个标签都封装成了不同的对象。JavaScript是一门跨平台，面向对象的脚本语言，来控制网页的行为，它能使网页可交互。
OpenShare | 前端三件套初识
因为健忘，所以记点有的没的〒▽〒
12-02 1091
OpenShare
style标签放在body前和body后的区别
喜欢前端的后端 MelodyJerry
11-15 3538
转载自：https://blog.csdn.net/qq_44721831/article/details/102528073 style标签写在body后与body前有什么区别？ 从有html标准以来到目前为止（2017年5月），标准一直是规定style元素不应出现在body元素中。（除非style处于template元素中，因为template中的内容是不直接在dom树中的。另外曾经 如果style元素出现在body元素，最终效果和style元素出现在head里是一样的。但是可能引起FOUC、重绘或.
css中元素的隐藏方法及样式不生效的原因
weixin_59017683的博客
02-02 1345
css样式不生效的原因
细谈HTTP，唯我独尊
weixin_44621617的博客
05-06 219
细谈正则，唯我独尊 1. 正则是什么？ 正则表达式（Regular Expression、regex或regexp，缩写为RE），也译为正规表示法、常规表示法，是一种字符模式，用于在查找过程中匹配指定的字符。 许多程序设计语言都支持利用正则表达式进行字符串操作。例如，在Perl中就内建了一个功能强大的正则表达式引擎。 正则表达式这个概念最初是由Unix中的工具软件（例如sed和grep）普及开的。 支持正则表达式的程序如：locate |find| vim| grep| sed |awk 2. 正则能干什么
【HTML】行内元素与块级元素
weixin_34068198的博客
08-11 813
一、行内元素与块级元素的三个区别 1.行内元素与块级元素直观上的区别 行内元素会在一条直线上排列，都是同一行的，水平方向排列 块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。 2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。 3.行内元素与块级元素属性的不同，主要是盒模型属性上 行内元素设置width无效，height无效(可以设...
行内元素与块级元素
Peter-H
08-11 3315
一、行内元素与块级元素的三个区别 1.行内元素与块级元素直观上的区别     行内元素会在一条直线上排列，都是同一行的，水平方向排列     块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。 2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。 3.行内元素与块级元素属性的不同，主要是盒模型属性上 行内元素设置width无效，height无效
BIM+前端有哪几种格式
05-27
BIM+ 前端主要涉及到的数据格式主要有以下几种： 1. IFC（Industry Foundation Classes）：IFC 是一种开放的 BIM 数据交换格式，由国际标准化组织（ISO）制定，用于在不同的 BIM 软件之间进行数据交换和共享。IFC 文件包含了建筑物的几何、构造、属性等信息。 2. glTF（GL Transmission Format）：glTF 是一种基于 JSON 的 3D 模型格式，主要应用于 Web 和移动端应用领域。glTF 文件包含了 3D 模型的几何、材质、动画等信息，可以在浏览器中快速加载和渲染。 3. OBJ（Object）：OBJ 是一种常用的 3D 模型格式，主要应用于建筑设计、游戏开发等领域。OBJ 文件包含了 3D 模型的几何信息和材质信息，可以在多种 3D 软件之间进行转换和共享。 4. FBX（Filmbox）：FBX 是一种通用的 3D 模型格式，主要应用于游戏开发、建筑设计、动画制作等领域。FBX 文件可以包含多种 3D 模型信息，如网格数据、材质信息、动画数据等，可以在不同的 3D 软件之间进行转换和共享。 5. DWG（Drawing）：DWG 是一种由 Autodesk 开发的 2D 和 3D 图形格式，主要应用于建筑设计、制造业等领域。DWG 文件可以包含多种图形信息，如线条、文本、图案等。 需要根据具体的需求和场景选择合适的数据格式，并进行适当的处理和优化，以便在前端进行快速加载和展示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

江河地笑

实践是检验真理的唯一标准

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值