摘要：的中指向一个，而中不需要，是因为不是基于标准通用标记语言。不占空间占空间是继承的，所以如何子孙节点修改可以显示但不可以。意识是先显示了无样式的文档内容，后又加载了样式文件，导致重新渲染，出现闪烁的现象。中的伪类与伪元素伪类伪元素
优雅升级 vs 渐进增强
优雅升级：先满足所有功能，再想尽办法去兼容所有浏览器。
渐进增强：先满足基本功能，保证网页的可访问性，注重标签的语言化；然后再为高级浏览器和高带宽用户提供高级功能与效果。
不是HTML标签，是用来告诉浏览器用怎样的规范去解析当前文档。
HTML4.01的中指向一个DTD（Document Type Definition），而HTM5中不需要，是因为HTMTL5不是基于SGML(Standard Generalized Markup Language) 标准通用标记语言。
HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
title：是globale attributes之一，当鼠标划上去时显示的内容；
alt：是img的特有属性，是图片的等价内容描述，有三重意思：
1.当图片无法加载时就显示alt的内容;
2.屏幕阅读器“阅读”图片时,读的就是这个alt值;
3.对搜索引擎友好。
1.display:none; 不占空间；visibility:hidden;占空间；
2.visibility:hidden;是继承的，所以如何子孙节点修改visibility:visible
;可以显示；但display:none;不可以。
3.修改display属性会导致整个文档重排，但修改visibility属性只会导致元素重绘。
4.读屏器不会读display:none的元素，但会读visibility:hidden的元素。
block：
1.在常规流中，如果没有设置width，会填充满父容器；
2.margin，padding有效；
3.忽略vertical-align;
inline:
1.在水平方向，根据direction依次布局；
2.margin和padding在垂直方向无效，水平方向有效；
3.浮动或绝对定位时会转换成block；
4.vertical-align属性生效；
FOUC：Flash Of Unstyled Content。意识是先显示了无样式的文档内容，后又加载了样式文件，导致重新渲染，出现闪烁的现象。
解决方法：1.样式文件放在文档的head标签中；2.尽可能避免用@import来引入css文件，因为这样会没法同步加载样式文件，可能导致FOUC现象。
浮动元素脱离文档流，不占据空间，浮动元素碰到包含它的边框或者浮动元素的边框才停留。
清除方法：
1.使用空标签清除浮动：在所有浮动标签后面加一个空标签，定义样式clear:both;弊端就是增加了无意义的标签。
2.使用after伪对象清除浮动，注意要设置height:0;否则该元素会比实际多出若干像素。
3.使用oveflow：给包含浮动元素的父元素增加样式：overfow:auto;zoom:1;（兼容IE6）。
transition:过渡。
意思是允许CSS的属性在一定时间内平滑地过渡。
语法：transition:[<"transition-property">||<"transition-duration">||<"transition-timing-function">||<"transition-delay">,~~]
transition-property: none|all|color|width|...
transition-duration: 持续时间
transition-timing-function: linear(匀速)|ease(逐渐慢)|ease-in(加速)|ease-out(减速)|ease-in-out(先加速后减速)|cubic-bezier(x1,y1,x2,y2)这里的两对坐标其实是贝塞尔曲线的那两个杠杆点。
transition-delay: 动画的延迟执行事件
transform：改变。
意思是：让元素执行什么变化，如旋转/缩放/移动/倾斜等
none 定义不进行转换。
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换，只是用 X 轴的值。
translateY(y) 定义转换，只是用 Y 轴的值。
translateZ(z) 定义 3D 转换，只是用 Z 轴的值。
scale(x[,y]?) 定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。 测试
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图。
比较有意思的是matrix这个属性，基本上其他属性的效果都能通过这个matrix实现。
CSS中的伪类与伪元素伪类：
伪元素：
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/49650.html
摘要：的中指向一个，而中不需要，是因为不是基于标准通用标记语言。不占空间占空间是继承的，所以如何子孙节点修改可以显示但不可以。意识是先显示了无样式的文档内容，后又加载了样式文件，导致重新渲染，出现闪烁的现象。中的伪类与伪元素伪类伪元素 优雅升级 vs 渐进增强 优雅升级：先满足所有功能，再想尽办法去兼容所有浏览器。渐进增强：先满足基本功能，保证网页的可访问性，注重标签的语言化；然后再为高级浏...
摘要：半路出家的前端程序员应该不在少数，我也是其中之一。年，冯冯同事兼师兄看我写太费劲，跟我说对面楼在找，问我要不要学，说出来可能有点丢人，但是在那之前，我真得不知道什么是，什么是。 半路出家的前端程序员应该不在少数，我也是其中之一。 为何会走向前端 非计算机专业的我，毕业之后，就职于一家电力行业公司，做过设备调试、部门助理、测试，也写过一段时间的QT，那三年的时间，最难过的不是工作忙不忙，...
摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...
摘要：目前只有和有这个概率。是快速开发应用程序的前端工具包。调试工具前端的调试工具很多，比如，核心的的。前端流程部署，和现在几乎是前端最流行的自动化的项目构建工具正则表达式浏览器插件开发浏览器原理沟通能力优秀 下图是前端工程师图解：showImg(http://upload-images.jianshu.io/upload_images/1807893-de7c7404345922b6.jp...
阅读 1167·2021-11-24 09:38
阅读 2567·2021-09-27 14:00
阅读 1126·2019-08-30 15:55
阅读 1312·2019-08-30 14:16
阅读 1455·2019-08-30 10:54
阅读 2840·2019-08-28 17:58
阅读 724·2019-08-26 13:22
阅读 1186·2019-08-26 12:01
