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元素居中
- 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