随笔分类 - web前端学习笔记
主要是记录经常忘记的知识点和最近得知的不常见的知识点
摘要：由于3D变换相对于2D变换只是多了一个Z轴, 所以, 所有的关于X, Y轴的变换也都是一样的. 关于translate-origin, 之前一直以为坐标系的基础都是以元素中心点为坐标原点的, 看到translate-origin的demo之后发现, 这个有点例外 这个属性的基准也是这个元素 所以拥有
阅读全文
摘要：所谓景深, 可以理解为是以自己的眼睛为参照物, 景深越小, 就代表自己的眼睛离物体越近, 看到的东西也就越夸张 景深越大, 就代表自己的眼睛离物体越远, 看到的东西也就只有轮廓, 平淡无奇.
阅读全文
摘要：当过渡进行组合时, 会出现不符合预想的变换, 比如先放大在平移, 先旋转再平移, 由于会改变坐标轴和像素点的密度, 造成了不符合预期结果的出现, 关于每种过渡底层是如何操作的, 仍然存疑. 待解决 根据实验, 对此问题的猜想: 1 每一个元素维护一个自己的坐标系, 坐标原点是该元素的中心, 这个坐标
阅读全文
摘要：父元素清除浮动之后, 子元素是一个浮动元素, 父元素的高度是由什么决定的? 父元素的高度是由整个盒模型决定的, 包含margin border padding area, 如果margin为负值, 仍然满足吞噬理论
阅读全文
摘要：1 padding区域也是可以被背景进行渲染的 2 一般指定容器的高度和宽度时, 指定的都是内容区的宽度和高度, 并不包括padding或border或margin 如果是怪异盒模型则会包含
阅读全文
摘要：疑问一: 使用vertical-align进行垂直对齐时要求必须是内联元素, 是不是要求此元素以及它的父元素都必须是内联元素. 疑问二: 使用vertical-align进行对齐时, 都是根据参照物(父元素)的顶线,中线,基线, 底线, 上文本线, 下文本线来进行对齐, 但是这些参照都是在文本行(带
阅读全文
摘要：总结点: 内容区高度=字体高度=font-size 行高=内容区高度+行间距 行内框=内容区 行框=上半行边距+max(行内框)+下半行边距 有坑: 在一个容器中要想设置元素垂直居中对齐(或者其它的对齐方式), 会使用到行高属性(line-height), 之前看到过说对齐基准是一行中行内框最大的元
阅读全文
摘要：BFC是块级上下文对象, 主要是用来管理块级元素的, 是一组规则 详细参考文章:https://zhuanlan.zhihu.com/p/25321647
阅读全文
摘要：详细参考: https://www.jianshu.com/p/549aaa5fabaa 关于margin的一点简单粗暴的小理解: 1, margin不会影响到内容区, 或者说甚至不会影响到border及内部的任何一部分区域, 只是会影响盒子的布局. 2, 关于布局的时候, 可以理解为这两个过程:
阅读全文
摘要：diaplay: block 基本特性 1、块级元素的宽度按文本方向填充所有可用空间。 2、块级元素的高度是根据内容高度自动计算的。 3、块级元素总是从新行开始。 盒模型特性 4、width（宽度）和height（高度）属性可以应用于块级元素。 5、padding（内边距）和border（边框）属性
阅读全文
摘要：具有定位的元素的层级, 默认是后面的元素比前面的元素的层级高 (这是对同级元素来说) 标准流盒子低于浮动的盒子，浮动的盒子又低于定位的盒子。定位(relative,absolute,fixed)高于浮动，浮动高于标准流。 给定z-index的值为层级的值时。（不给默认为0） 》 （层级为0的盒子，也
阅读全文
摘要：文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。 浮动会使元素脱离标准文档流, 从而导致容器塌陷 浮动元素的特点: 脱离标准文档流 >后来又发现, 这一条是成立的, 但是, 需要配合最后一条规则 不会自动
阅读全文
摘要：如果属性border-radius:50%, 采用类似的百分比的形式, 则是分别按照长和宽的像素乘以百分比 例如: 1 div{ 2 width:200px; 3 height:100px; 4 border-radius:50% 5 } 6 7 等价于 8 9 div{ 10 width:200p
阅读全文
摘要：当所有的布局有关参数都设置完成之后, 肯定会有一部分参数引起冲突, 冲突时, 哪些参数会保留, 哪些参数会被舍去? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>
阅读全文
摘要：nth-of-type只是针对元素进行选择, 如果通过类名进行筛选, 就会疯狂不对 正确: 错误: 当子元素都是同一种标签时, 用两种进行筛选都可以 当子元素不是同一种标签是, 用nth-of-type更好一点
阅读全文
摘要：###canvas中的变换 translate(x, y) 我们先介绍 translate 方法，它用来移动 canvas的原点到一个不同的位置。 translate 方法接受两个参数。x 是左右偏移量，y 是上下偏移量， 在canvas中translate是累加的 rotate(angle) 这个
阅读全文
摘要：不知道什么原因, 每一次使用getElementById()都无法获取canvas对象, 所以会使用querySelector()来获取 但是要注意获取上下文对象时, 要判断一下, canvas对象是否存在 var mycanvas = document.querySelector("#mycanv
阅读全文
摘要：关于栈中的元素以及正在使用的元素 可以这样理解: 栈是一个仓库, 只是储存着我们需要的格式, 除了仓库中的东西, 我们手中还有一个正在使用的格式, 每一次往栈中存储的时候, 只是把我们手中的东西复制了一份放到了仓库中, 只有调用restore()函数的时候 我们才会从栈中取出一个格式替代我们手中正在
阅读全文
