文章列表
张颖 ,认真认真 于 2个月前发表 592 1 0
CSS MODULES CSS 模块化 不管是用jquery还是react开发,都会遇到的一系列 CSS 的问题: 1. 全局污染 2. 命名混乱 3. 依赖引入复杂 4. 无法共享变量 5. 代码冗余 通过 JS 来管理 CSS 就很好解决上述列举的问题。CSS 模块化的解决方案有很多,但主要有两类。 一类是彻底抛弃 CSS,使用 JS 或 JSON 来写样式。Radium, jsxstyle ,react-style 属于这一类。优点是能给 CSS 提供 JS 同样强大的模块化能力;缺点是不能利用成熟的 CSS 预处理器(或后处理器) Sass/Less/PostCSS, :hover 和 :active 伪类处理起来复杂。 另一类是依旧使用 CSS,但使用 JS 来管理样式依赖,代表是CSS Modules。CSS Modules 能最大化地结合现有 CSS 生态和 JS 模块化能力。发布时依旧编译出单独的 JS 和 CSS。它并不依赖于 React,只要你使用 Webpack,可以在 Vue/Angular/jQuery 中使用。 启用 CSS MODULES
2个月前
CSS/重构
ShiJianwen 于 2个月前发表 447 2 0
问题描述 在开发中,我们常使用 line-height 属性来实现文本的垂直居中,但是在安卓浏览器渲染中有一个常见的问题,就是对于小于12px的字体使用 line-height 属性进行垂直居中的时候,渲染出来的效果并不是文字垂直居中,而是会偏上一些。举两个代码示例如下: 1. 大于12px html <span>testtesttest</span> css span{ display: inline-block; height:16px; background-color: gray; line-height:16px; font-size:12px; } <!-- more -->显示效果 [http://7tszky.com1.z0.glb.clouddn.com/Fjxba0fqcxW5gDXF9DW1IMRoHh5I] 2. 小于12px html <span>testtesttest</span> css span{ display: inline-block; height:16px;
2个月前
CSS/重构
郭明慧 于 3个月前发表 564 0 0
最近一直忙于将JavaScript学习的笔记整理成电子书,也没什么空闲时间写新的文章。趁着今天有点空闲,决定再来折腾一下CSS3中的两个属性:object-fit和object-position。 这两个奇葩的属性是搞毛的呢?其实它们是为了处理替换元素(replaced elements)的自适应问题,简单的说,就是处理替换元素的变形(这里指长宽比例变形)问题。 等等,好像多了一个名词,啥叫替换元素?替换元素其实是: * 其内容不受CSS视觉格式化模型控制的元素,比如image,嵌入的文档(iframe之类)或者applet,叫做替换元素。比:img元素的内容通常会被其src属性指定的图像替换掉。替换元素通常有其固有的尺寸:一个固有的宽度,一个固有的高度和一个固有的比率。比如一幅位图有固有用绝对单位指定的宽度和高度,从而也有固有的宽高比率。另一方面,其他文档也可能没有固有的尺寸,比如一个空白的html文档。 *
3个月前
CSS/重构
lxy ,学无止境 于 3个月前发表 619 2 0
[http://7tszky.com1.z0.glb.clouddn.com/FqSr0oqb2NxKhp0DgUvcBXsSN3-v] 以上是实图展示需要用到的主要元素: 1、perspective:定义 3D 元素距视图的距 2、transform:允许我们对元素进行旋转、缩放、移动或倾斜 3、transform-style:规定如何在 3D 空间中呈现被嵌套的元素 4、transition:定义过渡开始、完成的时间、速度和类型 简述:.cube代表一个正方体,.cube里面的每一个div分别表示正方体的一个面,要想每个面都有图片,即在每个div里分别加上一个img。正方体的制作很简单,只需要先让6个面处于同一位置,然后再绕不同的轴旋转一定的角度和平移一定距离即可。下面一起看实操: div部分[http://7tszky.com1.z0.glb.clouddn.com/FgCeilBN40rl5iZZ3pCTkkB_BxHZ] css搭建舞台 [http://7tszky.com1.z0.glb.clouddn.com/FoLDkXZtDEX7bjukxv61smPgMBsY]
3个月前
CSS/重构
结一 于 3个月前发表 1720 1 0
按道理来说,做重构切页面那本来就是要还原设计稿啊,没话说。但是如果设计师真的细究到0px还原,那还真不是个小事。 首先一个网站落到PS中,都是图片或文字(附加对图片或文字进行相关处理),而对应到重构来说就是一个个元素,所以要做到还原设计稿,主要要解决下面这三个问题: * 元素大小 * 元素与元素之间的间距 * 元素在页面的位置 下面对上面问题一一详细展开 元素大小 先来说下元素大小的问题,对于图片类的来说我们就要获取图片在PS中的正确大小,这一般来说百分之八十都没什么问题,除了一些设计师进行过特殊处理加工各层叠加等效果的需要费点时间搞定;而对于文字来说,那就是文字大小了,但是还有个不能忽略的字体问题,同一个大小不同字体可能相差十万八千里。 总结起来就是两点:保证图片跟设计稿一样大小;保证字体大小及类型一致。 对于第一点为了准确性及效率,我们可以采用 Cutterman [http://www.cutterman.cn/zh] 这个PS插件;而第二点我们就得使用规范去约定,约定网站常规字体类型及大小 元素之间的间距
3个月前
CSS/重构
郭明慧 于 3个月前发表 556 0 0
相信大家都看过报纸,报纸上的内容大多数都是分栏显示的,如下图所示: [http://7s1r1c.com1.z0.glb.clouddn.com/t_multi-columns.png] 对于前端攻城狮来说,这种分列布局,在以前虽然可以实现,可是难度却是不小,工作量很大,必须使用JavaScript对内容分段,再配合上绝对定位或浮动等CSS样式来实现多列布局。但现在,强大的CSS3为我们提供了“multi-column”,让我们可以很轻松的实现这样的分列布局。 先来看看与多列布局(multi-column)相关的css属性有哪些: * 列数和列宽:column-count、column-width、columns * 列的间距和分列样式:column-gap、column-rule-color、column-rule-style、column-rule-width、column-rule * 跨越列:column-span * 填充列:column-fill
3个月前
CSS/重构
结一 于 4个月前发表 728 0 0
听闻 w3cplus [http://www.w3cplus.com/] 大漠在第三届 CSS Conf [https://css.w3ctech.com/] 上的演讲主题是CSS Grid Layout,吓得我赶紧抛下红尘俗事闭门谢客苦心钻研,唯恐脚步太慢,遥望大漠一骑绝尘而扼腕叹息。 闲话少说,提起网格系统,大家都应该耳熟能详,如 960 [http://960.gs/] ,当然随着技术与分辨率的进步有了进一步的演变,但设计思想还是一致的。既然是这么实用的东西,CSS当然有了纳入规范之想,这不就出现了我们今天要说的CSS Grid Layout 网格系统浏览器支持 虽说IE10、11早就实现了网格布局,不过那已经是过时的了,新标准目前没有任何浏览器默认正规支持(chrome 54,firefox 49),都需要去手动设置开启: * chrome 在地址栏输入“chrome://flags”,找到"experimental web platform features"开启
4个月前
CSS/重构
Red626 于 8个月前发表 1520 2 5
[http://7tszky.com1.z0.glb.clouddn.com/FtBNk5TEyh1gSunrZelbWnERhl5j] Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones). 为什么写这篇文章
8个月前
CSS/重构
结一 于 9个月前发表 2688 6 2
今天早晨决定写这篇博文,但是晚上回家的时候,突然一道闪电从脑海劈过,于是临时决定将这个熟悉然后到懵逼最后到放弃的问题分为两部分。第一部分为抛出问题,诚邀各路英雄豪杰解答;第二部分为解答,就是一周之后会给出我的答案。 闲话少说,直接上题: icons [http://7tszky.com1.z0.glb.clouddn.com/FgPfIRNx_3A9gUqetKJOmYOlSabe] 要求如下: * 三个橙色圆的大小为60px,固定不变 * 所有间隙相等,也就是被三个橙色圆划分成的四个间距相等 * 应用在移动端,整个黄色为全屏宽度(所以这里图片的大小不是真实的大小,如iphone 5那就是320px,6就是375px,6s就是414px等等) * 兼容安卓4.0以上(悄悄透露下安卓4.3- 属性calc不支持) * html > css (no js) 大家可在imweb群(179045421), w3cplus群(1041263), sass群(78142855) 中讨论,或者把你的答案发送到我邮箱 ['623059526', 'qq.com'].join('@') 答案专区
9个月前
CSS/重构
结一 于 9个月前发表 1712 3 2
首先关于bootstrap从v3的less转到v4的sass的十万个为什么,这里暂且不表(计划会另起一篇文章对比less,sass,postcss)。 其次本篇文章主要围绕下面几个目标展开: * 了解bootstrap 4整个sass的设计 * 如何使用并修改bootstrap v4的样式 * 如何改进bootstrap的sass设计 最后不深入具体代码的实现细节,只从整体架构上分析 一起走进BOOTSTRAP V4 SASS 1、bootstrap的sass文件都放在scss目录,为什么名字是scss而不是sass呢?主要涉及到sass与scss两种语法的区别,scss语法更接近css,所以更受大家喜爱,使用更广泛。具体可参考 sass 语法 [http://www.w3cplus.com/sassguide/syntax.html]
9个月前
CSS/重构
结一 于 9个月前发表 2594 1 2
有很多朋友一聊起做移动端重构,第一个问题就是用什么单位合适。%,还是rem?(如果你还不太了解rem是什么单位,可先前往 CSS3的REM设置字体大小 [http://www.w3cplus.com/css3/define-font-size-with-css3-rem] 了解。) 然后我的回答是:根据情况而言,%,rem,px都用,而且px用得比较多。然后就是各种疑惑和解释了。 那么多各种尺寸的视窗,到底用什么单位可以搞定呢?这里我借这篇文章,简单把一些遇到的问题总结下。 简单来说,总共就二个问题: * 宽度不确定 * 高度不确定 下面我们一一说明 宽度不确定 目前主流的宽度: 360px, 375px, 414px等,外加一个小尺寸的320px。 从内容来看,我们的内容一般为文字或图片。 文字这块我们随便挑几个宽度不同的手机查看同一个app,会发现文字大小都是一样的,不会出现iphone se的时候是14px,iphone 6是16px, iphone
9个月前
CSS/重构
结一 于 10个月前发表 1560 1 0
故不登高山,不知天之高也;不临深溪,不知地之厚也。--摘自《劝学》 ::BEFORE > ::AFTER 相当于多了两个空白标签,可以放置一些修饰的点缀或内容等 伪元素 [http://7tszky.com1.z0.glb.clouddn.com/FkkYfyLFf5KS4zd85l-ZE4n5MWvW] * css3 生成内容 [http://www.w3cplus.com/solution/css3content/css3content.html] * A Whole Bunch of Amazing Stuff Pseudo Elements Can Do [https://css-tricks.com/pseudo-element-roundup/] 字体 字体方面主要包括:字体渲染方式,浏览器默认字体及重置,@font-face自定义字体,字体性能等 * 字体渲染背后不得不说的故事 [http://www.jianshu.com/p/8414b96549e3]
10个月前
CSS/重构