CSS躬行记（9）——网格布局

网格布局(Grid Layout)也叫栅格布局,与表格布局类似,也依赖行和列.但与之不同的是,网格布局能直接控制HTML文档中元素的顺序.位置和大小等,而不用再借助辅助元素. 一.术语下图展示了CSS规范中定义的网格. (1)网格容器(grid container)由display属性的两个特殊值(grid和inline-grid)所创建,由于它不是块级容器,因此其布局不受浮动和外边距塌陷的影响. (2)网格项(grid item)也叫网格元素,是网格容器的子元素,注意,它的后代元素不是网格项…

CSS躬行记（8）——裁剪和遮罩

一. 裁剪裁剪(clipping)能让元素显示指定形状的区域,在布局时可起点缀的作用,丰富了视觉呈现.注意,裁剪本质上只是让元素的部分区域透明,由此可知,裁剪完后元素所占的空间仍旧会保留.裁剪最早是在CSS 2.1时代由clip属性引入,但该属性只能应用于绝对定位的元素,并且只能裁剪成矩形.CSS3提供了强大的clip-path属性,突破了clip属性的众多限制,接下来将围绕clip-path属性展开讲解. 1)裁剪形状 clip-path属性可以使用四种裁剪函数:circle().ellip…

CSS躬行记（1）——CSS基础拾遗

一.box-decoration-break CSS3新增的box-decoration-break属性可指定行内非替换元素在跨行.跨列或跨页时的样式渲染,它包含两个值: (1)slice:默认值,盒子会被分割成多部分. (2)clone:断开的各个盒子会单独渲染. 下面用一个示例来演示两种的区别,第一个span元素采用box-decoration-break的默认值,效果如第一张图所示,在断行处没有左右内边距和圆角:第二个span元素box-decoration-break的值为clone,效…

CSS躬行记（2）——伪类和伪元素

一.伪类选择器伪选择器弥补了常规选择器的不足,能够实现一些特殊情况下的样式,例如在鼠标悬停时或只给字符串中的第一个字符指定样式.与类选择器类似,可以从HTML元素的class属性中查看到,但伪选择器不会出现在HTML文档中(有几个例外,如:lang.::placeholder等).并且它的关键字大小写不敏感,也就是说empty和EMPTY完全相同.伪选择器分为两种:伪类选择器和伪元素选择器.注意,伪选择器会以一个或两个冒号(:)开头,并且如果要与其它选择器组合使用,那么只能与类型选择器(即元素…

CSS躬行记（7）——合成

在图形编辑软件中,可以按特定地方式处理不同图层的合成,最新的CSS规范也引入了该功能,并提供了mix-blend-mode和background-blend-mode两个属性.混合模式(blending mode)是一种数学算法,可计算元素重叠部分的颜色值,目前已定义了十多种不同的混合模式. 一.元素混合元素混合是指将元素和其背后内容(backdrop,也叫背着物)混合,由mix-blend-mode属性设置混合模式.元素背后既可以是另一个元素,也可以是父元素的背景,并且声明了mix-blen…

CSS躬行记（10）——CSS方法论

方法论是一个哲学术语,会对一系列具体的方法进行分析研究.系统总结并最终提出较为一般性的原则.CSS方法论是一种面向CSS.由个人和组织设计.已被诸多项目检验且公认有效的最佳实践.这些方法论都会涉及结构化的命名约定,并且在组织CSS时可提供相应的指南,从而提升代码的性能.可读性以及可维护性.本章会讲解三种CSS方法论:OOCSS.BEM和SMACSS. 一.OOCSS OOCSS(Object-Oriented CSS)是指面向对象的CSS,由Nicole Sullivan在2009年提出,借鉴了…

CSS躬行记（11）——管理后台响应式改造

为了提升业务人员操作管理后台的体验,花了点时间进行响应式的改造,紧急情况时,掏出手机就能工作. 利用CSS3的媒体查询,就能根据不同屏幕的尺寸采用不同的样式来渲染,目前使用的移动端屏幕阈值为750px. 为了便于管理,基于Less的语法,声明了一个常量,专门记录屏幕尺寸. @mobile-screen: ~"(max-width:750px)"; 我们当前使用的管理后台基于UmiJS3.X和Ant Design 3.X. 一.结构改造首先是管理后台整体结构的改造,包括左边的菜单栏,右…

CSS躬行记（3）——CSS属性拾遗

一.粘滞定位粘滞定位(sticky)与相对定位类似,既不会脱离正常流,也不会改变元素盒类型,并且会保留原先所占的空间.它会相对于包含块偏移,它的包含块分为两种,第一种和绝对定位一样:第二种是最近的滚动祖先,即overflow属性是hidden.scroll.auto或overlay时.接下来用一个例子来介绍粘滞定位的用法,如下代码所示. <style> div { overflow: auto; } span { position: sticky; top: 10px; left: 20px…

CSS躬行记（4）——浮动形状

CSS规范新增了一个模块:CSS Shapes,shape-outside属性属于该模块,它能影响浮动元素周边内容流的形状(即浮动形状),可接收三类值:形状盒子.函数和图像. 一.形状盒子形状盒子(shape box)会指定形状的边界,既能单独使用,也能与另外两类值组合使用,可选的关键字如下所列,其中margin-box是shape-outside属性的默认值. (1)margin-box:以外边距为界. (2)border-box:以边框为界. (3)padding-box:以内边距为界.…

CSS躬行记（6）——滤镜

滤镜(filter)可改造元素的视觉呈现,CSS内置的滤镜有10种,通过SVG文件还能自定义滤镜. 一.调色滤镜调色滤镜可控制元素的模糊.颜色.亮度等变化,并且多个滤镜可组合在一起使用.这些滤镜大部分既能接收百分数,也能接收数值.当传入的值大于上限值时,会以上限值来处理. 1)模糊 blur()滤镜会对元素进行高斯模糊的处理,它能接收一个模糊半径的长度值.注意,不能向其传递负数.在下图中,右侧是调用了blur()滤镜后的效果. div { filter: blur(5px); } 2)透明 o…

CSS躬行记（5）——渐变

渐变是由两种或多种颜色之间的渐进过渡组成,它是一种特殊的图像类型,分为线性渐变和径向渐变,这两类渐变还会细分为单次和重复两种.渐变图像与传统图像相比,它的优势包括占用更少的字节,避免额外的服务器请求,调试成本更低等.在平时,发挥自己的想象,利用渐变可以创造出许多奇妙的视觉特效. 一.线性渐变线性渐变会使用linear-gradient()函数,可沿着一条梯度线(gradient line),从某一边或某个角度绘制渐变背景,该背景的默认方向是从元素顶部到底部,如下图所示. div { backg…

ES6躬行记（1）——let和const

古语云:“纸上得来终觉浅,绝知此事要躬行”.的确,不管看了多少本书,如果自己不实践,那么就很难领会其中的精髓.自己研读过许多ES6相关的书籍和资料,平时工作中也会用到,但在用到时经常需要上搜索引擎中查询相关知识概念,并且对很多知识也仅仅是略知一二,没有领会到其中的原理.为此,开辟了<ES6躬行记>系列,将ES6相关的知识系统的记录下来,以便自己翻阅,也希望能帮助到广大网友. 在ES6之前的版本中,用于声明变量的关键字只有var,并且没有块级作用域,只有函数作用域和全局作用域,但在ES6中已改变…

ES6躬行记笔记

ES6躬行记(18)--迭代器要实现以下接口## next() ,return,throw 可以用for-of保证迭代对象的正确性例如 var str = "向…

Web优化躬行记（1）——CSS

Web优化的对象包括页面性能.用户体验.开发效率.代码优化.网络延迟等,本系列会列举出众多常用的优化技巧,每个技巧都可深入分析,在此只做抛砖引玉. 本系列优化内容提炼于<前端面试宝典>.<高效前端>.<高性能JavaScript>.<CSS重构>等书籍,以及<2020前端性能优化清单>等网络资源. CSS优化包括减少样式量.合理使用CSS3特性.对样式分类.采用预处理器等. 一.CSS选择器 1)匹配优化由于CSS选择器是从右往左进行匹配,因此…

CSS进阶之模拟Bootstrap网格布局

目前暂时实现效果,容后面整理心得,先贴上源代码. 源码 <!DOCTYPE html> <html> <head> <title>demo bootstrap</title> <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css"> <!-- <script type="t…

ES6躬行记（4）——模板字面量

模板字面量(Template Literal)是一种能够嵌入表达式的格式化字符串,有别于普通字符串,它使用反引号(`)包裹字符序列,而不是双引号或单引号.模板字面量包含特定形式的占位符(${expression}),由美元符号.大括号以及合法的表达式组成,合法的表达式(expression)可以是变量.算术或函数调用,甚至还可以是模板字面量.在ES6引入模板字面量后,就能避免用若干个加号来实现字符串拼接,而改用更为优雅的语法来替代,下面用新旧两种方式分别来组合字符串. var name = "s…

React躬行记（8）——样式

由于React推崇组件模式,因此会要求HTML.CSS和JavaScript混合在一起,虽然这与过去的关注点分离正好相反,但是更有利于组件之间的隔离.React已将HTML用JSX封装,而对CSS只进行了较弱的封装,仅仅给出了基本的样式设置.不过,好在第三方库提供了CSS in JS的解决方案,让开发者能更高效的书写组件的样式,促进CSS工程化的发展. 一.内联样式在React中的元素都包含style属性,用来定义内联样式.style的属性值是一个对象而不是一段字符串,该对象的属性就是CSS属…

前端利器躬行记（3）——webpack基础

webpack是一个静态模块打包器,此处的模块可以是任意文件,包括Sass.TypeScript.模板和图像等.webpack可根据输入文件的依赖关系,打包输出浏览器可识别的JavaScript.CSS和HTML等文件,并且能对图像做优化处理,如图1所示. 图1 webpack打包目前,webpack的最新版本是4.33,其配置文件(webpack.config.js)的基本结构如下所示,包含了它的4个核心概念:入口(entry).输出(output).加载器(loader)和插件(plug…

前端利器躬行记（6）——Fiddler

Fiddler是一款免费的.基于Windows系统的代理服务器软件(即Web调试抓包工具),由Eric Lawrence用C#语言在2003年10月发布了第一个版本.注意,由于Fiddler依赖Microsoft .NET Framework 2.0或更高版本,因此在运行Fiddler之前需要预先将其安装. 当启动Fiddler时,它会自动注册成Windows Internet(WinINET)网络服务代理,从而就能捕获本地所有的HTTP和HTTPS数据流.在图14中,客户端(例如Web浏览器.…

Vue躬行记（3）——样式和表单

Vue对DOM元素的class和style两个特性做了专门的增强,即对CSS类和内联样式做了一层封装,通过v-bind指令来处理它们,而接收的表达式既可以是简单的字符串.对象或数组,也可以是复杂的计算属性.不仅如此,Vue还为表单设计了一些语法糖,让表单处理变得尤为简单. 一.CSS类 v-bind指令与class参数配合,就能处理CSS类,并且能接收多种类型的值. 1)对象 v-bind:class可以接收一个对象,对象的属性名就是CSS类名,只有当其值是真值时,才能添加到DOM元素上,否则会…

Web优化躬行记（2）——JavaScript

一.语言 1)慎用全局变量当变量暴露在全局作用域中时,由于全局作用域比较复杂,因此查找会比较慢. 并且还有可能污染window对象,覆盖之前所赋的值,发生意想不到的错误. 0 == '' //true 0 == '0' //false 3)简写简写的方式很多,此处只会列举其中的几种,例如用三目运算替代if-else语句,或用&&或||符号替代条件语句. if (count > 1) { ++a; } else { --a; } // 简写 count > 1 ? (++a)…

Web优化躬行记（4）——用户体验和工具

一.用户体验用户体验(UE/UX)是指一个人使用一个特定产品.系统或服务时的行为.情绪与态度,还包含用户对于系统的功能.易用和效率的感受,因此用户体验在本质上可以视为一个人对于系统的主观感受与主观想法. 用户体验是动态的,由于不断变化的使用情况.不停变化的各个系统,以及变化发生背后的情境与脉络,因此它是随着时间而不断地变化着. 1)Loading动画有一份调查指出,用户能够忍受加载的最长时间在:6到8秒.8秒是一个临界值,如果加载时间在8秒以上,大部分访问者最终会选择放弃,除非他一定要打开那…

Node.js躬行记（24）——低代码

低代码开发平台(LCDP)是无需编码(0代码)或通过少量代码就可以快速生成应用程序的开发平台.让具有不同经验水平的开发人员可以通过图形化的用户界面,通过拖拽组件和模型驱动的逻辑来创建网页和移动应用程序. 低代码的核心是呈现.交互和扩展,其中呈现和交互需要借助自行研发的渲染引擎实现.而此处的扩展特指物料库,也就是各类自定义的业务组件,有了物料库后才能满足更多的场景. 在 4 个月前研发过一套可视化搭建系统,当时采用的是生成代码的方式渲染页面.而本次研发采用的则是运行时渲染,功能比较基础,基于Rea…

ES6躬行记（21）——类的继承

ES6的继承依然是基于原型的继承,但语法更为简洁清晰.通过一个extends关键字,就能描述两个类之间的继承关系(如下代码所示),在此关键字之前的Man是子类(即派生类),而在其之后的People是父类(即基类或超类). class People { constructor() { this.age = 28; } getAge() { return this.age; } static getName() { return "strick"; } } class Man extend…

ES6躬行记（13）——类型化数组

类型化数组(Typed Array)是一种处理二进制数据的特殊数组,它可像C语言那样直接操纵字节,不过得先用ArrayBuffer对象创建数组缓冲区(Array Buffer),再映射到指定格式的视图(view)之后,才能读写其中的数据.总共有两类视图,分别是特定类型的TypedArray和通用类型的DataView.在ES6引入类型化数组之后,大大提升了JavaScript数学运算的性能. 一.ArrayBuffer 虽然ArrayBuffer对象可以开辟一片固定大小的内存区域(即数组缓冲区)…

ES6躬行记（3）——解构

解构(destructuring)是一种赋值语法,可从数组中提取元素或从对象中提取属性,将其值赋给对应的变量或另一个对象的属性.解构地目的是简化提取数据的过程,增强代码的可读性.有两种解构语法,分别是数组解构和对象解构,两者的区别在于解构赋值语句的左侧,前者是数组字面量,而后者是对象字面量.为了说明解构的优势,下面用一个例子来对比手动赋值和解构赋值. var arr = [1, 2], obj = { a: 3, b: 4 }, x, y, a, b; x = arr[0]; y = arr[1…

ES6躬行记（7）——代码模块化

在ES6之前,由于ECMAScript不具备模块化管理的能力,因此往往需要借助第三方类库(例如遵守AMD规范的RequireJS或遵循CMD规范的SeaJS等)才能实现模块加载.而自从ES6引入了模块化标准后,就不需要再特地加载一次外部脚本了.模块化的语法不仅让JavaScript代码的组织变得更有条理,还包含封装.按需导出或导入等实用功能,可轻松应对日益复杂和庞大的前端工程.但有一点要注意,模块中的代码默认运行在严格模式中. 一.导出一个模块就是一个独立的JavaScript文件,如果要读取…

React躬行记（5）——React和DOM

React实现了一套与浏览器无关的DOM系统,包括元素渲染.节点查询.事件处理等机制. 一.ReactDOM 自React v0.14开始,官方将与DOM相关的操作从React中剥离,组成单独的react-dom库,从而让React能兼容更多的终端.在引入react-dom库后,就能调用一个全局对象:ReactDOM,虽然在之前的章节中已多次使用该对象,但是都没有给出过多的讲解,本节将对其做重点分析. ReactDOM只包含了unmountComponentAtNode().findDOMNod…

React躬行记（3）——组件

组件(Component)由若干个React元素组成,包含属性.状态和生命周期等部分,满足独立.可复用.高内聚和低耦合等设计原则,每个React应用程序都是由一个个的组件搭建而成,即组成React应用程序的最小单元正是组件. 一.构建目前推崇的构建组件的方式总共有两种:类和函数,而用React.createClass()构建组件的方式已经过时,本节也不会对其做讲解. 1)类组件通过ES6新增的类构建而成的组件必须继承自React.Component,并且需要定义render()方法.此方法用…

React躬行记（10）——高阶组件

高阶组件(High Order Component,简称HOC)不是一个真的组件,而是一个没有副作用的纯函数,以组件作为参数,返回一个功能增强的新组件,在很多第三方库(例如Redux.Relay等)中都有高阶组件的身影.由于遵循了装饰者模式的设计思想,因此不会入侵传递进来的原组件,而是对其进行抽象.包装和拓展,改变原组件的行为(图9形象的表达出了高阶组件的作用).这样不仅增强了组件的复用性和灵活性,还保持了组件的易用性.灵活使用高阶组件,可大大提高代码质量. 图9 高阶组件的作用高阶组件有两…

【CSS躬行记（9）——网格布局】的更多相关文章