- 熟练掌握前端工程师工程中需要掌握的内容和各个情况下的效果
- 增加代码熟悉度，尽量使用简洁优雅的的方案解决问题
<h1>支持代码高亮</h1>- 三栏式布局
- 左右宽度固定中间自适应，外高度取决于最高元素
- 掌握布局的概念
- 掌握盒模型的概念
- 掌握poosition与float的概念以及在布局时的用法
元素下会有空白，原因以及去除办法参见https://www.zhihu.com/question/21558138
- 许多元素都有自带margin
- 重复的设置太多，用写好的类来赋予html不知道是不是好的解决方法
-
不设置background会出现空心 - 首字下沉的实现
- 使用两种标签进行左浮动
- 使用first-letter左浮动
- 使用CSS实现三角
- CSS border三角、圆角图形生成技术简介
- 《CSS揭秘》
- 最后的双引号最难写，分析如下：
- 不能用:first-letter深入CSS ::first-letter伪元素及其实例等
- 第一个双引号下部与文字对齐，第二个上部与文字对齐
- 双引号不影响文字本身的行高
- 解决方案考虑如下：
- overflow对多余内容切除——无法对指定位置切除
- clip
- absolute定位——使文字产生空位略为困难，但并非无法采用
- 第一个使用relative定位并使用margin拉近文字（relative不会影响到其他元素，但这会改变同行行高，这是第一行无所谓），第二个使用float配合relative（不会影响行高）
- class与id命名十分不便，需要了解常用规范
- 图片添加透明蒙版（不会使用伪类制作）
- 段落间距不确定是不是line-height（大致确认不是，而是可以通过line-height设置）
- 使用first-letter实现首字下沉为什么要配合padding实现效果？
- 定宽为最小宽度1280px,本来想新世界那里图片应该不变，但后来发现太丑了
- 超链接定义样式需要定义四种状态
- class的命名
- 本意参考BEM进行命名，然而发现过于复杂且不知它的好处，所以略作修改
- 依然按照BEM进行分类，但配合元素选择器进行每个的细分，不抗拒同class的存在
- 但用这种方法配合scss的嵌套好奇怪，感觉在浪费性能，期待以后更好的方案
- img居中居然可以包裹在p标签进行垂直居中
- 定宽为最小宽度1280px
- 会延浏览器自动拉长的元素，可参考布局方法
- vw、vh只有vh比较实用，而且vw还有兼容问题（设置的时候会多出一点）
- 使用after伪类为图片添加透明遮罩
- text-align-last的使用
- 改变默认的下拉列表样式
- 本想使用伪元素制作，但尝试一番后发现伪元素对下拉列表不起作用
- 用图片制作
- 改变option样式太难了，搜了好长时间没有解决方案，暂时只有这个，还是选中后的前端网
- 最好还是div模拟比较方便
- 外边距合并
- 用CSS制作三角
- 如果把body定宽居中，那么大背景图不能顶满浏览器放进去
- 解决办法暂时参照ofo官网使用column纵宽控制div宽度
- 设置字体时遇到疑问，是应该按照单个class进行设置还是每个字体分别进行设置？
- 暂时采用了分裂时方法字体颜色使用class，字体大小和字体用选择器(主要有些父元素设置字体没用，一个一个的超麻烦)
- 但实际使用中发现设计的都是有规律的，大部分都可以用语义化来解决，h3标签和p标签的固定设置基本上可以覆盖大部分内容
- 最后四个图标不用awesome库的话只能用图了，最后还是引入了库
- 让网格间保持距离，即列间空白
- bootstrap讲解布局页面采用的方法(布局)[https://bootstrap.ninghao.net/scaffolding.html]
- 元素定宽，使用margin
- bootstrap本身也是采用padding的方法
- 由于修改了box-sizing,padding被计入，所以使用padding控制间距
- CSS官方网格布局(网格)[https://www.w3cplus.com/css3/line-base-placement-layout.html]
- bootstrap讲解布局页面采用的方法(布局)[https://bootstrap.ninghao.net/scaffolding.html]
- 当CSS像素有可能出现小数点时你不知道会出现什么样的问题
- 颜色超多的时候就不要想着复用啦，你看灰色有那么多种
- .item th处字体小于14px表格会发生折叠
- tr设置宽度无效，需要td自己把宽度撑起来
- 设置padding后正常，不知道为什么会缩到一起
- .tab子元素div插入text时，div下移，此时div已成为BFC容器，为何div会下移？
- 初步猜测是基线原因：在不指定 vertical-align 時，默認即基線對齊。然而由於該 box 當中既沒有 block level box 也沒有 text（比如全是 floating boxes，沒有規範的可以提取基線的地方），導致對齊時以該元素底部而非基線爲基準，又因爲元素底部在基線以下，就會出現對齊時上移的情況。（包含 float 的 inline-block 对齐问题原理详解？ ）[https://segmentfault.com/q/1010000002517202]
- 设置overflow后形成block level box解决
- 背景图需要进行模糊处理
- 因为子元素不需要模糊，本拟放弃filter: blur(),使用backdrop-filter: blur()属性，参照这篇文章高级CSS filters
- 后因《CSS揭秘》对文字背景进行模糊启发，给伪元素设置一层新背景图，对此张进行模糊，达到模糊目的
- 经搜索发现另一种模糊方案CSS3实现文字流光渐变动画,但此方案加了一层无用容器
- 按钮边框的从中间到两边扩展开
- 动画不能对边框进行单独设置，放弃
- 使用投影改变长度，transform: scale3d(x, y, x)的改变来改变伪元素的长度
- 因为是从边框的中心展开，所以要设置两个伪元素，并分别设置边框，利用伪元素长度的变化来改变边框的长度
- 隐藏文字和边框
- 本来设想使用display:none进行隐藏，实测失败
- 利用透明度进行隐藏
- 猜想也可使用visibility属性进行隐藏，未实测
- 文字背景渐变
- 文字颜色渐变
- 使用背景渐变，文字透明，背景clip到文字
- 动画
- 把背景拉长，使用动画把背景来回循环达到文字渐变目的
- 文字颜色渐变
- 对CSS3新属性不够了解，仅达到知道的地步，对详细设置不够清楚
- 动态数据绑定的原理自己也很浅显的想过，前些日子看ES6入门标准增添了Object.observe()接口对对象的监听，但经详细了解此接口已废除，官方建议使用 Proxy 对象来替代
- 官方提供Proxy构造函数用来生成Proxy实例
- get表示访问，set表示设置，在Proxy构造函数中可以对其重设
- Proxy实例可作为其他对象的原型对象
- 自己用一种比较婉转的方式完成了题目要求，目前自认为此代码的问题有
- 构造函数最好不返回值，不过此函数理应也不是正常的构造函数了
- 为对象的data属性添加了proxy，所以对对象其他的访问是监测不到的
- 不知道如何深入遍历，即本题目参考资料中的walk实现
- 立即执行函数不要乱用，在控制台中使用立即执行那外面的代码怎么访问呢小愚蠢？
#vue动态数据绑定（二）
- 小方块设置为inline-block会有间隙问题，设为font-size:0后突然灵机一动，为什么不直接把这个背景设为红色呢？机智
- 小方块的位置问题，开始设想使用旋转实现各个方向的完成，但其实也可以用浮动和margin值实现上下左右，只不过较麻烦
- 小方块的移动，移动dom；但是突发奇想可以使用方案二让所有的棋盘都有小方块，然后设为display：none，啧啧，只不过性能消耗更大了
- 小方块随机问题：因为标号也是用table，所以x与y不能相等
- 小方块的旋转问题，本来使用类名搭配js改变实现旋转，后来发现是持续旋转而不是仅仅指明方向。决定使用js直接修改css
- 小方块确定方位的问题：使用度数的余数来确定。开始单纯使用度数导致有bug产生
- 此篇功能和上篇变化不大，所以新指令就不进行完成
- 难点在于动画，因时间所限小方块移动的动画又必须大改，所以只在这里提供一种思路。
- 修改小方块的定位方式，由表格大小进行计算，让小方块浮出，移动小方块改为真的移动位置，这样才会有动画出现
- 旋转的动画部分使用过渡动画transition就能完成
- 拖拽移动的实现应该使用HTML5拖拽API，但考虑到时间不准备实现此功能
- 浮出层的关闭，点击浮出层外。因为事件机制的原因，点击子元素父元素依然会被触发
- 阻止子元素事件传播
- 重设子元素事件
- 背景和内容分隔开
- 切换选中
- 以前需要使用js来监测是否选中，现在CSS可以使用伪类
- input隐藏，但不能删除，因为要留下监测状态
- 样式实现
- 使用伪类纯CSS实现
- 这里我偷了个懒，使用了字符来完成圆圈中心的设计
- 使用雪碧图实现
- 使用label::after实现字
- 通过background-image和position实现定位和切换
- 使用伪类纯CSS实现
- 雪碧图的绘制，使用了腾讯的绘制工具，但是原小图用谷歌居然搜不到，自己简单切了一个，勉强可以使用