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 ...
随机推荐
- [opentwebst]一个简单的登陆脚本
这个是个简单的vbs脚本,使用opentwebst进行录制 'Use the command line below to launch the script (or just double click ...
- Latex 自定义命令:用于一些特殊单词的显示
\usepackage{xspace} \newcommand{\ie}{{\emph{i.e.}},\xspace} \newcommand{\viz}{{\emph{viz.}},\xspace} ...
- Learning WCF:Fault Handling
There are two types of Execptions which can be throwed from the WCF service. They are Application ex ...
- 【Spark调优】:结合业务场景,优选高性能算子
聚合操作使用reduceByKey/aggregateByKey替代groupByKey 参见我的这篇博客说明 [Spark调优]:如果实在要shuffle,使用map侧预聚合的算子 内存充足前提下使 ...
- Spring Boot 核心配置文件 bootstrap & application 详解。
用过 Spring Boot 的都知道在 Spring Boot 中有以下两种配置文件 bootstrap (.yml 或者 .properties) application (.yml 或者 .pr ...
- iOS开发笔记(Swift)-针对Swift调用PPiFlatSegmentedControl项目的一些修改
PPiFlatSegmentedControl项目是一个很流行的开源iOS控件库,提供了扁平化风格(Flat style)的SegmentedControl,可以自定义segment的颜色,图标.大小 ...
- AB(ApacheBench)工具 -- 压力测试
服务器负载太大而影响程序效率也是很常见的,Apache服务器自带有一个叫AB(ApacheBench)的工具,可以对服务器进行负载测试 同时美多商城的秒杀功能也会被高负载影响,从而导致超卖现象 安装x ...
- kafka shutdown停止关闭很慢问题的解决方案
kafka shutdown停止很慢问题 在数据量大的时候,consumer一次抓取数据的数据很多,进入到业务处理的数据可能有很多, 假设一次poll有1万条数据进入业务程序,而且业务程序是和poll ...
- 使用Windows的mstsc远程桌面连接到Ubuntu图形界面(AWS上安装的Ubuntu系统)
参考文档:https://blog.csdn.net/liumaolincycle/article/details/50052619 https://www.cnblogs.com/eczhou/p/ ...
- 829. 连续整数求和-leetcode
题目:给定一个正整数 N,试求有多少组连续正整数满足所有数字之和为 N? 示例 1: 输入: 5 输出: 2 解释: 5 = 5 = 2 + 3,共有两组连续整数([5],[2,3])求和后为 5. ...