devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

前端三件套学习笔记（持更）

作者：羊村懒王 | 2024-04-15 11:27:39

赞

踩

前端三件套学习笔记（持更）

目录

1、HTML,CSS,JS区别

2、HTML结构

1、HTML,CSS,JS区别

结构写到 HTML 文件中， 表现写到 CSS 文件中， 行为写到 JavaScript文件中。

2、HTML结构
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>我的第一个页面</title>
  5.     </head>
  6.     <body>
  7.         很高兴，开始了我的web前端之旅！
  8.     </body>
  9. </html>
3、<div>和<span>
  • <div> 标签用来布局，但是现在一行只能放一个<div>。 大盒子
  • <span> 标签用来布局，一行上可以多个 <span>。小盒子
4、相对路径

4d7c0d572f69430a8c603e37e0fadbdb.png

5、符号
24d5fa407e90441c81d8a37c6820f4f3.png6、表格
  • th（table header cell）：标头单元格
  • tr（table row）：一行
  • td（table data cell）：一个单元格
7、表格合并

跨行合并：rowspan="合并单元格的个数"

跨列合并：colspan="合并单元格的个数"

8、标签
48d4bebb8ad6442481f3a6873a18d534.png9、表单域

<form action=“url地址” method=“提交方式” name=“表单域名称">
     各种表单元素控件
</form>

10、<input type="属性值">
8495949cafff4474892c6102835e4310.png11、选择器

1）基础选择器

id 选择器和类选择器最大的不同在于使用次数上。id 选择器是唯一的。

110c227acd704bab98557fb8e5060b9a.png

2）复合选择器

包括：后代选择器、子选择器、并集选择器、伪类选择器

  1. //后代选择器
  2. ol li a {
  3.       color: red;
  4.    }
  5.  
  6. //亲儿子选择器
  7.  div>a {
  8.        color: red;
  9.    }
  10.  
  11. //并集选择器
  12. div,
  13.    p,
  14.    .pig li {
  15.        color: pink;
  16.    }
  17.  
  18. //伪类选择器
  19.         /* 1. a:link  默认，未访问过，把没有点击过的(访问过的)链接选出来 */
  20.         a:link {
  21.             color: #333;
  22.             text-decoration: none;
  23.         }
  24.         
  25.         /* 2. a:visited 已访问过，选择点击过的(访问过的)链接 */
  26.         a:visited {
  27.             color: orange;
  28.         }
  29.         
  30.         /* 3. a:hover 悬停，选择鼠标经过的那个链接 */
  31.         a:hover {
  32.             color: pink;
  33.         }
  34.         
  35.         /* 4. a:active 点击，选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
  36.         a:active {
  37.             color: green;
  38.         }
  39.  
  40.         /* 5. ：focus 选取获得焦点的表单元素
  41.         input:focus {
  42.             background-color: red;
  43.             color: blue;
  44.         }
12、字体复合属性 

font: font-style font-weight font-size/line-height font-family;

13、em

是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元素的 1 个文字大小

14、CSS引入方式/样式表

行内，内部，外部

15、元素显示模式

658e88467a264641a48bc1227cc1e228.png

块元素：<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>

行内元素：<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>

行内块元素：<img />,<input />,<td>

转换

  • 转换为块元素： display: block;
  • 转换为行内元素：display: inline;
  • 转换为行内块元素：display: inline-block;
16、单行文字垂直居中

CSS 没有给我们提供文字垂直居中的代码

解决方案: 让文字的行高=盒子的高度

17、背景复合写法

 background: pink url(logo.png) no-repeat center left;

18、CSS三大特性

1、层叠性：相同的选择器设置相同的样式，此时一个样式会被覆盖(层叠)掉另一个冲突的样式，层叠性主要解决的是冲突的问题。

2、继承性：子标签会继承父标签的某些样式，比如说文本的颜色和字号。高度、宽度、盒子模型的内外边距是【不可以】被继承的

        行高的继承：

  • 行高可以跟单位，也可以不跟单位
  • 如果子元素没有设置行高，就会继承父亲元素的行高的1.5倍
  • 此时子元素的行高是：当前子元素的文字大小的1.5倍

3、优先级

19、选择器优先级/权重

7f2dfb21fe1743268a33f34f99a1ae23.png

  •  权重不会有进位
  • !important > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 继承或者通配符选择器
  • 继承的权重为0，如果该元素没有被直接选中，不管父元素权重多高，子元素得到的权重都是0
20、CSS盒子

包括：边框、外边距、内边距和实际内容

21、内边距

padding 影响盒子实际大小，如果盒子已经有了宽度和高度，此时再指定内边距，会撑大盒子；

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小

22、外边距合并
  • 相邻块元素垂直外边距的合并

        当上下相邻的两个块元素(兄弟元素)相遇时，如果上面的元素有下外边距 margin-bottom , 下面的元素有上外边距 margin-top , 则它们之间的垂直间距不是 margin-bottom 与 margin-top 之和。而是：【取两个值中的较大者】

解决方案：尽量只给一个盒子添加 margin 值。

  • 嵌套块元素垂直外边距的塌陷

    对于两个嵌套关系(父子关系)的块元素，父元素有上外边距，同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方案：

  • 为父元素定义 上边框
  • 为父元素定义 上内边距
  • 为父元素添加 overflow: hidden
  • 其他方法：浮动，固定定位，绝对定位

以上都是标准流，下面是浮动

多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

23、浮动

1）含义：float 属性用于创建浮动框，将其移动到一边，直到左边缘或者右边缘触及包含块或另一个浮动块的边缘

2）作用：

  • 实现多个块级元素没有空白缝隙的一行展示
  • 实现两个盒子左右对齐

3）加了浮动之后的元素，会具有很多特性：

  • 浮动元素会脱离标准流（脱标，漂浮在普通流的上面，不占原有的位置）
  • 浮动的元素会一行内显示并且元素顶部对齐
  • 浮动的元素会具有行内块元素的特性
    • 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动之后，它的大小根据内容来决定
    • 浮动的盒子中间是没有缝隙的，是紧挨着一起的
  • 浮动的盒子【不再保留原先的位置】

4）如果行内元素有了浮动，则不需要转换块级/行内块元素，可直接给高度和宽度

浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

5）网页布局一般采取的策略是：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则

6）为什么需要清除浮动？
        父级盒子很多情况下，不方便给高度，但是内部的子盒子浮动之后又不占据位置（脱标），最后父级盒子的高度就是0，那么就会影响下面的标准流盒子

  • 如果父元素本身有设置高度，则不需要清除浮动
  • 没有高度，内容需要浮动，则需要清除浮动
  • 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准文档流了
  • 清除浮动不是清楚浮动本身，而是清楚浮动对其他元素的影响

清除浮动的策略是：闭合浮动（只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。）

d0a9de51453f4fc5ac3744f071ef0b24.png

24、定位

标准流在最底层 (海底) ------- 浮动 的盒子 在 中间层 (海面) ------- 定位的盒子-空）

1）相对定位
position: relative;

特点
    1. 它是相对于自己原来的位置来移动的。(移动位置的时候参照点是原来自己的位置，和父元素、浏览器无关)
    2. 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来的位置）
    3. 相对定位，并没有脱离标准文档流，最典型的应用是给绝对定位当爹的

2）绝对定位

元素在移动位置的时候，是相对于它 祖先元素  来说的。
position: absolute;

特点
    1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准进行定位。(Document文档)
    2. 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置
    3. 绝对定位不再占有原有的位置。（脱标）

3）子绝父相

因为父级需要占据位置，因此是相对定位（不脱标），子盒子不需要占据位置，则是绝对定位（完全脱标——不会占据原有位置）

5fbacd5416514d39a068ef6217c98665.png

25、闭包，冒泡，委托

闭包（Closure）：
闭包是由函数及其相关的引用环境（包括函数创建时所处的作用域）组合而成的包裹，从内部函数访问外部函数的作用域

事件冒泡（Event Bubbling）：
当一个元素上发生了某个事件（例如点击事件），这个事件会按照从内向外（从目标元素向祖先元素）的顺序进行传播，直至传播到最外层的祖先元素或到达文档的根节点

事件委托（Event Delegation）：
适用于处理大量相似元素上。它利用事件冒泡的机制，将事件处理程序绑定到它们的共同祖先，而不是绑定到每个单独的元素上。这样一来，只需一个事件处理程序即可管理一组元素上的事件。

26、边框算进高度里面

box-sizing: border-box; /* 让边框算进高度里面 */

27、float，flexbox，position：relative区别
  • float实现一些简单的布局效果，如图片环绕等。
  • flexbox是一种更加现代和灵活的布局方式，适用于各种布局需求。
  • position：relative可以相对于原始位置微调元素的位置，但通常用于局部微调，而不是整个布局的设计

持续更新中...

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/427607
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号