css的一些细节
对于动态输出文字可以不用在意,某些页面可能会有类似提示文案的地方,用英文标点符号,对于居中效果比较友好。
布局的时候从上往下开始写页面,一般都是写下一个的元素margin-top来决定和上一个元素的间距,那么就尽量不要又是写margin-top又是写margin-bottom,如果混着用,后期不好维护,比如某一块区域需要摞位置,或者是一个组件可能会被很多地方共用,混着写的话后期在改的时候,可能会麻烦一点,这里导致的问题可以说不痛不痒,但是不管是js还是css,注重细节并养成好的习惯,是代码能力的一种体现。
有时候设计师,在配置字体颜色的时候可能用透明的百分比,来设置几种不同的颜色,比如主色是#000,浅灰色#000 80%的透明度,这种情况下不建议web写透明度,而是让设计师给到对应的颜色值,因为透明色会根据背景的不同,比如现在看到的这种情况,这样扩展性就比较差。
4、命名
eg: .nav-btn-float-right
第二种使用缩略命名,会使代码更短,写起来更快,但是不易读。
5、0.5px边框的理解误区
我之前写边框的时候就发现,只要让边框的颜色更淡,边框看起来就更细,所以当设计师问我为什么边框看起来比较粗的时候,我都告诉他们颜色调浅一点就好了,这个技巧我一直在实际使用。网上有博客说通过css3 transform的缩放scale 50%,可以实现0.5px边框,我一直很奇怪,1px实际是物理的最小单位,怎么可能实现0.5px,就这样我做了个实验,我设置了1px颜色为000的边框(黑色)。
当使用scale缩放50%的时候,颜色变成了c5c5c5,但是实际仍然有1px。我用的是拾色工具会精确到像素,确实还是1px,所以这种方式并不能实现0.5px而是颜色变浅了。还有些手机屏幕上1px是按照2px来的展示,所以这种方式可以让2px缩放为1px,让1px的边框变得更淡,这种方式确实能让边框变细,但不能说是0.5px。
6、user-select:none
在为dom绑定事件的时候,大家可能会直接绑定当前有样式的class,这样会因为修改或者替换class名称,影响JS,而如果定义一个无样式的js前缀的类 专门用来绑定事件,这样就解除了样式和逻辑的耦合,在读代码的时候,也能一下子看出哪些元素绑定了事件的。 eg: <div class="item js-item"></div>
8、rem布局的文字大小
9、object-fit: cover
我们在做列表页的时候,图片都是固定的大小,比如是一个100px*100px的正方形图片,但是很有可能拿到的图片并不是正方形的,这个非正方形图片放到正方形的img标签里,就会变形如果使用object-fit:cover 可以裁剪超出比例的部分,这样图片看起来就不会是变形或者拉伸的了,但是这样会导致图片残缺,根据图片的不同,可能裁剪掉关键部分的内容,但是鉴于列表本来就是缩略图,所以还是可以加上这个属性的,是一个比较折中的办法。
说到图片拉伸的问题, 就要说说对于图片的约定,因为不管是拉伸还是裁剪都会导致图片的残疾,拉伸影响视觉,裁剪害怕关键部位丢失,如果不严格按照约定的规范来,肯定是不能兼容所有情况的,因此在做项目的一开始就要和产品运营们约定好图片比例,建议约定为正方形。
11、只在不得已时使用 !important
在一个类上定义 !important 是一种使代码被有动覆盖的方法,特别是当你试图处理 media 查询时。而且这对于移动端来说很麻烦。比如说,如果你希望在手机屏幕显示某些内容,则必须使用另一个 !important 类来覆盖 .hide 类以在移动设备上显示它。我没有找到一个合理的借口来使用 !important ,除非你是在重写别人之前放错位置的 !important 类。
12、box-sizing的最佳实践
知识点
-------------------------------------------------------------------------------------------------------------
css的一些细节的更多相关文章
- 几个容易出错的css盒子模型细节
css是前端必须掌握的技能之一.其中的box模型,如图所示: 大体就是border.margin.padding和content,概念挺好理解.但当盒子模型与其他属性一块使用时产生的现象,或许您还难以 ...
- Html,Css,Dom,javascript细节总结
最近愈发觉得基础的重要性,细节决定成败,所以希望能够将自己注意到的搜集到的一些关于前端的小细节小知识整理出来,更好的方便自己记忆回顾. 1.在构建网页Html框架时,尽量只给外层标记(即是父标记)定义 ...
- jQuery+css+div--一些细节详解
(一).首先.让我们认识一下最基本普通的alert()弹出框!(改变alert()提示弹出框的样式) 我们在写html或是jsp页面的时候,谁都不希望自己精心设计,且非常美观的页面颜色布局被破坏掉吧! ...
- html css 布局小细节
学了两个月的html和css每天都重复一样的生活,敲着大同小异的代码,这样的生活枯燥无味.我腻了,我也累了!小米首页算是我写的第三个静态页面,写了好久,很多细节都把握不好,下面的这个简单的布局细节是我 ...
- css 的小细节,小总结
CSS的一些零碎总结 1.CSS 伪元素用于向某些选择器设置特殊效果(用来当作一个东西的,跟一个元素差不多,但不是元素). ① :frist-line伪元素:用于向文本首行设置特殊样式,但是只能用于块 ...
- 面试学到的css布局,细节影响了我的面试成绩
这几天的面试很纠结,也让我注意到我的前端知识确实不行,从两个小细节总结: 1:body体的居中样式. 这个在IE和非IE Firefox Chrome Opera下面的差别 IE下text-align ...
- select自定义下拉三角符号,css样式小细节
本来没有写文章的习惯,但是闲下来了,整理资料,发现还挺纠结,对前端来说.所以整理下,希望对看到的人有所帮助,毕竟我不是前端开发. 起因,是前端告诉我select 框的三角箭头不能自定义.但是第二次的时 ...
- HTML和CSS遇到的细节问题
一.列表项标记窜出div盒子 列表项标记窜出盒子,是因为设置了 *; } ,消除了<li>元素的默认外边距. 结解决方法:消除*{}选择器或是设置外边距 列表项目标记与边距有关 二.div ...
- CSS细节
写起这篇文章,是因为阅读张鑫旭到的一篇文章<CSS的学习瓶颈>,里面提到了要重视CSS的细节和实现机制.确实:有必要掌握一些关于CSS方面的细节,而不是遇到任何页面,都添加css.rese ...
随机推荐
- STL中的容器作为返回值
分别以函数返回值方式和参数传引用方式测试了vector.map两种容器,代码如下: // testContainer.cpp : Defines the entry point for the con ...
- CentOS添加明细路由
网络架构图 根据最近为客户设计的网络架构,简单的梳理一个网路架构图,当然实际上的网络架构要比这个架构图复杂的多,咱们这边只是用这个图作为一个简单的示例. 拓扑分析 我们要实现专线两端不同网段的 ...
- jQuery的JS库在本地运行项目时提示无法加载
最近公司有个项目在我本地运行时引用本地的jquery.js,浏览器提示无法加载 <script src="/js/newperson/jquery-1.11.3.min.js" ...
- jQuery判断复选框checkbox的选中状态
通过jQuery设置复选框为选中状态 复选框 <input type="checkbox"/> 错误代码: $("input").attr(&quo ...
- 详解Android数据存储技术
前言 学习Android相关知识,数据存储是其中的重点之一,如果不了解数据,那么让你跟一款没有数据的应用玩,你能玩多久呢?答案是这和没有手机几乎是差不多的.我们聊QQ,聊微信,看新闻,刷朋友圈等都是看 ...
- 零碎的java知识点记录(一)
小知识点 Map有getOrDefault("1","0");取不到取默认值 两个不同对象,属性相同进行赋值转换,使用modelMapper <depen ...
- 谈谈 JavaScript 的正则表达式
一.背景 最近在做 CMS 系统中不同身份登录用户的权限管理,涉及到对 api 路径的识别去判断是否放行.以前对正则表达式都是敬而远之,要用到的话都是直接复制粘贴现成网上的表达式,看也看不太懂,借这次 ...
- Thread-方法以及wait、notify简介
Thread.sleep()1.静态方法是定义在Thread类中.2.Thread.sleep()方法用来暂停当前执行的线程,将CPU使用权释放给线程调度器,但不释放锁(也就是说如果有synchron ...
- [源码]Delphi 5KB无输入表下载者
[源码]Delphi 5KB无输入表下载者源码 PROGRAM Fun; type DWORD = LongWord; THandle = LongWord; BOOL = LongBool; LPC ...
- 对python pickle的理解
python 提供了pickle模块,能将对象进行序列化,将对象以文件形式存放在磁盘. 几乎所有的数据类型(列表,字典,集合,类等)都可以用pickle来序列化.但是序列化后的数据可读性很差. pic ...