【前端妙不可言】零散的学习笔记

最新推荐文章于 2024-09-09 11:49:47 发布

williamdsy

最新推荐文章于 2024-09-09 11:49:47 发布

阅读量182

点赞数

本文链接：https://blog.csdn.net/weixin_41899098/article/details/117673453

版权

transition: 设置元素的过渡效果,简写属性

transition-property
transition-duration 也就是说触发条件导致元素的状态发生改变,这种改变不会立即完成,但会在规定的时间内完成
transition-timing-function
transition-delay

调试工具很重要

遇到很奇怪的地方,不要自己瞎想老半天,尽快用调试工具找原因
chrome>sources>Snippet: 打断点,+F9

js代码的位置很重要

在<head></head>中的或者在<head></head>中链入的JavaScript代码先于<body></body>中的html代码执行

background-repeat: no-repeat 背景图片不重复

默认情况下,如果背景图片比元素小,其将重复自己来铺满整个背景

移除默认的列表样式

#myUL {
    /* 移除默认的列表样式 */
    list-style-type: none;
    padding: 0;
    margin: 0;
}

text-decoration

none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本(但浏览器不会显示)。
inherit 规定应该从父元素继承 text-decoration 属性的值。

JavaScript 字符串比较大小

会逐位比较字符,猜测应该是比较其ASCII码,一旦能比较出大小就停止
比如 “1111111” < “9” 为true

margin-left:50%

是指父元素的50%

CSS 画出三角形图标

content: ""; /* 内容为空 */
border-width: 5px; /* 设置border宽度为5px */
border-style: solid; /* 实线 */
border-color: #555 transparent transparent transparent; /* 上 右 下 左, 后面三个为透明,只留下上面的边框,如下图 */

看起来是这个样子
在这里插入图片描述

classList

classList 属性返回元素的类名,作为 DOMTokenList 对象
用于在元素添加、移除和切换CSS样式
classList 属性是只读的,但可以用add和remove方法来修改
语法:

element.classList

属性: length, 只读
方法:
add(class1, class2, …) 添加一个或多个类名
contains(class) 判断指定的类名是否存在
item(index) 返回元素中索引值对应的类名
remove(class1, class2, …) 移除一个或多个类名
toggle(class, true|false) 切换类名,第一个参数为要移除的类名,并返回false;如果类名不存在则添加改类名,并返回true

box-sizing: border-box;

box-sizing: border-box; 
width: 200px;
height: 200px;
padding: 10px;
/* 整个盒子的宽高为200px,content为180px */

即, border-box 使容器的宽度固定为200px, 而 padding 只能从里面取了

position

relative:设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
fixed: 生成绝对定位的元素，相对于浏览器窗口进行定位。
absolute: 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。

:nth-child(n) 选择器

匹配属于其父元素的第 N 个子元素，不论元素的类型。
n 可以是数字、关键词或公式。

事件冒泡还是事件捕获？

在 HTML DOM 中有两种事件传播的方法：冒泡和捕获。
事件传播是一种定义当发生事件时元素次序的方法。假如 <div> 元素内有一个 <p>，然后用户点击了这个 <p> 元素，应该首先处理哪个元素“click”事件？
在冒泡中，最内侧元素的事件会首先被处理，然后是更外侧的：首先处理 <p> 元素的点击事件，然后是 <div> 元素的点击事件。
在捕获中，最外侧元素的事件会首先被处理，然后是更内侧的：首先处理 <div> 元素的点击事件，然后是 <p> 元素的点击事件。
在 addEventListener() 方法中，你能够通过使用“useCapture”参数来规定传播类型：

addEventListener(event, function, useCapture);

默认值是 false，将使用冒泡传播，如果该值设置为 true，则事件使用捕获传播。

tagName 属性

返回元素的标签名
在HTML中,tagName 属性的返回值始终是大写的
语法:

element.tagName

div 中的文本居中与div元素居中

Ways to Center Div or Text in Div in CSS
提炼五要素:

margin
padding
text-align
display: flex, 设置align-items和 justify-content 值为 center
position: absolute, 结合 transfrom 或margin

Here’s the Difference Between Flexbox, CSS Grid, & Bootstrap
摘要: CSS Grid 和 Flexbox 是具有相似性并且可以一起使用的布局模型。关键区别在于，CSS Grid 可以用于创建二维布局，而 Flexbox 只能用于创建一维布局。这意味着您可以在 CSS Grid 中沿 X 轴和 Y 轴放置组件，而在 Flexbox 中只能放置一个轴。
摘要: 在一篇关于 CSS Tricks的文章中，创始人 Chris Coyier 做了一个重要的说明。与 Flexbox 一样，CSS Grid 可用于创建一维布局（并且经常如此）。Flexbox 也可用于创建二维布局。所以说主要区别是 CSS Grid 专门用于二维布局是不正确的，而 Flexbox 是一种。只是 CSS Grid 允许您以 Flexbox 不具备的方式创建 2D 布局。
摘要: Flexbox 与 Bootstrap
为了开始这个比较，重要的是要了解 Bootstrap 4 的网格系统是用 Flexbox 构建的。Bootstrap 与单独使用 Flexbox 的区别在于编写实际代码的过程。使用 Bootstrap，您可以仅使用HTML创建网格。使用 Flexbox，您必须使用 HTML 和 CSS。

var let const的区别

let 是ES6提出来的
const 声明的是常量
var 存在变量提升
let 和 const 会形成块作用域
var 声明的变量会挂载到 window 上, let 和 const 不会
同一个作用域下, var 可以重复声明同名变量, 而 let 和 const 不行
暂存死区, 由于let/const 会形成块作用域, 再加上js可以访问父作用域的特性, 导致了暂存死区的现象

输入网址按下回车之后发生了什么?

DNS 解析, 根据 URL 找到服务器 IP
浏览器向服务器发起 TCP 连接
浏览器向服务器发送 HTTP 请求
服务器处理请求, 并返回响应以及响应的状态
浏览器渲染 HTML 内容

promise

prosemise MDN

williamdsy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【前端妙不可言】零散的学习笔记

transition: 设置元素的过渡效果,简写属性transition-propertytransition-duration 也就是说触发条件导致元素的状态发生改变,这种改变不会立即完成,但会在规定的时间内完成transition-timing-functiontransition-delay...
复制链接

扫一扫