css的一些细节

时间:2022-09-07 11:48:45
1、中文符号居中效果

对于动态输出文字可以不用在意,某些页面可能会有类似提示文案的地方,用英文标点符号,对于居中效果比较友好。

2、元素的上下间距

布局的时候从上往下开始写页面,一般都是写下一个的元素margin-top来决定和上一个元素的间距,那么就尽量不要又是写margin-top又是写margin-bottom,如果混着用,后期不好维护,比如某一块区域需要摞位置,或者是一个组件可能会被很多地方共用,混着写的话后期在改的时候,可能会麻烦一点,这里导致的问题可以说不痛不痒,但是不管是js还是css,注重细节并养成好的习惯,是代码能力的一种体现。

3、字体颜色透明

有时候设计师,在配置字体颜色的时候可能用透明的百分比,来设置几种不同的颜色,比如主色是#000,浅灰色#000 80%的透明度,这种情况下不建议web写透明度,而是让设计师给到对应的颜色值,因为透明色会根据背景的不同,比如现在看到的这种情况,这样扩展性就比较差。

4、命名 

    命名是一个让人最纠结的事情,先看第一种,这样命名的更详细可以一目了然的知道当前类的意思,但是长度比较长,增加代码量。 

eg: .nav-btn-float-right

第二种使用缩略命名,会使代码更短,写起来更快,但是不易读。

    eg: .nav-btn-fr
    如果用缩略命名,可以约定文档,有约定和熟悉成本,但是熟悉以后更高效,类的命名也会变得更规范和统一.

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 

   该属性让区域内容无法被选中,可以阻止用户长按复制,也可以避免用户复制无关内容,比如下面我只希望用户复制6655验证码,除了6655我都设置了user-select:none,长按其他部分并不会出现复制按钮,按钮数字就可以,并且第三幅图的左右下标只能在6655间拖动 
7、js-class

在为dom绑定事件的时候,大家可能会直接绑定当前有样式的class,这样会因为修改或者替换class名称,影响JS,而如果定义一个无样式的js前缀的类 专门用来绑定事件,这样就解除了样式和逻辑的耦合,在读代码的时候,也能一下子看出哪些元素绑定了事件的。 eg: <div class="item js-item"></div>

8、rem布局的文字大小

   大家都知道浏览器一般不会让文字小于12px,如果设置小于12px浏览器都会显示12px, 我们在用到rem布局的时候,元素是会根据屏幕宽度等比例缩放的,比如设计师给到750px的设计稿,如果某一个元素文字是22px,那么当用户的屏幕宽度是375的时候,文字会缩放为11px,实际浏览器就会显示为最小12像素,那么其他非字体元素比例仍然会缩小,这个时候字体可能和其他元素的比例就不是原设计稿的比例了,如果用户屏幕是320px,那么和原设计稿元素间的比例就差更多了。所以我们一定要根据自己的情况告诉设计师,在宽是750像素的设计稿里,字体最小应该是多少像素。 
eg: 设计稿 750px, 文字 22px
      设计稿 375px, 文字 11px(12px)

9、object-fit: cover

我们在做列表页的时候,图片都是固定的大小,比如是一个100px*100px的正方形图片,但是很有可能拿到的图片并不是正方形的,这个非正方形图片放到正方形的img标签里,就会变形如果使用object-fit:cover  可以裁剪超出比例的部分,这样图片看起来就不会是变形或者拉伸的了,但是这样会导致图片残缺,根据图片的不同,可能裁剪掉关键部分的内容,但是鉴于列表本来就是缩略图,所以还是可以加上这个属性的,是一个比较折中的办法。

10、图片的约定 

说到图片拉伸的问题, 就要说说对于图片的约定,因为不管是拉伸还是裁剪都会导致图片的残疾,拉伸影响视觉,裁剪害怕关键部位丢失,如果不严格按照约定的规范来,肯定是不能兼容所有情况的,因此在做项目的一开始就要和产品运营们约定好图片比例,建议约定为正方形。

11、只在不得已时使用 !important 

在一个类上定义 !important 是一种使代码被有动覆盖的方法,特别是当你试图处理 media 查询时。而且这对于移动端来说很麻烦。比如说,如果你希望在手机屏幕显示某些内容,则必须使用另一个 !important 类来覆盖 .hide 类以在移动设备上显示它。我没有找到一个合理的借口来使用 !important ,除非你是在重写别人之前放错位置的 !important 类。

12、box-sizing的最佳实践 

在这里主要回答三个问题:
问题一:box-sizing的值,取content-box好,还是取border-box值好?
   如果最低需要兼容IE6、7,那么box-sizing不可使用,只能使用W3C盒模型;
   如果最低只需兼容IE8,那么使用content-box在功能上完全没有问题,只是在一些弹性布局和响应式布局实现上,会稍微麻烦一点;而border-box虽然在这些方面表现更好,但是不能和IE8的min-width、min-height、max-width和max-height四个属性一同使用,使用的话就要稍微注意一下;
   如果最低只需兼容IE9,那么本人觉得,全局配置取content-box更为合适,局部配置二者均可。原因如下:
      CSS3提供了calc函数(IE9+),使得W3C盒模型有了强有力的助攻,在弹性布局和响应式布局的表现,与IE盒模型无异;
      默认优于配置原则:我个人认为,“默认优于配置”,特别是在reset.css这种架构级、平台级的配置文件,要尽量避免对未来可能引入的模块有侵入性。譬如,我们在一个项目中时常需要引入第三方组件,如果这个组件没有强声明box-sizing,那么其默认使用的就是W3C标准盒模型,如果在全局的reset.css中设置box-sizing的值为border-box以选用IE盒模型,那么就会影响到这一类默认基于W3C盒模型的第三方组件的样式。这里也给我们提了一个醒,在封装组件时,记得强声明box-sizing,哪怕你使用默认的content-box。
     总之,大部分场景二者可以互换,只是使用理念不一样。小部分场景border-box更具优势,但随着calc函数的支持,这种优势已经不再,相反content-box是默认值的优势愈加明显。
     我个人建议是:全局使用默认W3C盒模型(你的CSS代码最低能够兼容IE6/7,在IE8也可以和min-和max-一起使用),局部场景二者均可(仅把IE盒模型当作是一种布局技巧来使用)。你喜欢全局使用IE盒模型也是可以的,只要确认项目只需要兼容到IE8,即便有可能影响到引入的第三方组件,也是有办法处理的。
问题二:如果想要全局使用IE盒模型,那么在reset.css中,该怎样设置box-sizing?
这里提供一个参考:
html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
*, *:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}
这样设置的好处有:
子元素的盒模型类型,默认由父元素决定,方便组件统一设置;
支持低版本的浏览器:Safari (< 5.1), Chrome (< 10), and Firefox (< 29);
问题三:Bootstrap3开始,全局使用IE盒模型(box-sizing取border-box),又是基于怎样的考虑?怎么协调好与基于标准盒模型开发的第三方组件的关系?
   众所周知,BS2还考虑对IE7的兼容,而BS3彻底放弃了对IE7的兼容,并将box-sizing设置为border-box。

 知识点

正则小专场:
\d  匹配任何十进制数,相当于[0-9]  
\D  匹配任何非数字字符,相当于[^0-9]  
\s  匹配任何空白字符,相当于[\t\n\r\f\v]  
\S  匹配任何非空白字符,相当于[^\t\n\r\f\v]  
\w  匹配任何字母数字字符,相当于[a-zA-Z0-9_]  
\W  匹配任何非字母数字字符,相当于[^a-zA-Z0-9_] 

-------------------------------------------------------------------------------------------------------------

兼容性的渐变背景效果
相关代码如下:
.gradient{
    width:300px;
    height:150px;
    filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);
    -ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);/*IE8*/
    background:red; /* 一些不支持背景渐变的浏览器 */  
    background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));  
    background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));  
    background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); 
}
<div class="gradient"></div> 

css的一些细节的更多相关文章

  1. 几个容易出错的css盒子模型细节

    css是前端必须掌握的技能之一.其中的box模型,如图所示: 大体就是border.margin.padding和content,概念挺好理解.但当盒子模型与其他属性一块使用时产生的现象,或许您还难以 ...

  2. Html&comma;Css&comma;Dom&comma;javascript细节总结

    最近愈发觉得基础的重要性,细节决定成败,所以希望能够将自己注意到的搜集到的一些关于前端的小细节小知识整理出来,更好的方便自己记忆回顾. 1.在构建网页Html框架时,尽量只给外层标记(即是父标记)定义 ...

  3. jQuery&plus;css&plus;div--一些细节详解

    (一).首先.让我们认识一下最基本普通的alert()弹出框!(改变alert()提示弹出框的样式) 我们在写html或是jsp页面的时候,谁都不希望自己精心设计,且非常美观的页面颜色布局被破坏掉吧! ...

  4. html css 布局小细节

    学了两个月的html和css每天都重复一样的生活,敲着大同小异的代码,这样的生活枯燥无味.我腻了,我也累了!小米首页算是我写的第三个静态页面,写了好久,很多细节都把握不好,下面的这个简单的布局细节是我 ...

  5. css 的小细节,小总结

    CSS的一些零碎总结 1.CSS 伪元素用于向某些选择器设置特殊效果(用来当作一个东西的,跟一个元素差不多,但不是元素). ① :frist-line伪元素:用于向文本首行设置特殊样式,但是只能用于块 ...

  6. 面试学到的css布局,细节影响了我的面试成绩

    这几天的面试很纠结,也让我注意到我的前端知识确实不行,从两个小细节总结: 1:body体的居中样式. 这个在IE和非IE Firefox Chrome Opera下面的差别 IE下text-align ...

  7. select自定义下拉三角符号&comma;css样式小细节

    本来没有写文章的习惯,但是闲下来了,整理资料,发现还挺纠结,对前端来说.所以整理下,希望对看到的人有所帮助,毕竟我不是前端开发. 起因,是前端告诉我select 框的三角箭头不能自定义.但是第二次的时 ...

  8. HTML和CSS遇到的细节问题

    一.列表项标记窜出div盒子 列表项标记窜出盒子,是因为设置了 *; } ,消除了<li>元素的默认外边距. 结解决方法:消除*{}选择器或是设置外边距 列表项目标记与边距有关 二.div ...

  9. CSS细节

    写起这篇文章,是因为阅读张鑫旭到的一篇文章<CSS的学习瓶颈>,里面提到了要重视CSS的细节和实现机制.确实:有必要掌握一些关于CSS方面的细节,而不是遇到任何页面,都添加css.rese ...

随机推荐

  1. Redis安装部署

    Redis是一种高级key-value数据库.它跟memcached类似,不过数据 可以持久化,而且支持的数据类型很丰富.有字符串,链表,集 合和有序集合.支持在服务器端计算集合的并,交和补集(dif ...

  2. Android中插件开发篇之----类加载器

    关于插件,已经在各大平台上出现过很多,eclipse插件.chrome插件.3dmax插件,所有这些插件大概都为了在一个主程序中实现比较通用的功能,把业务相关或者让可以让用户自定义扩展的功能不附加在主 ...

  3. 删除本地git版本库中受版本控制的文件

     git乱码解决方案汇总 乱码原因 搜索一番,发现git文件名.log乱码,是普遍问题,这其中有编码的原因,也有跨平台的原因.主要原因是Windows 系统中的Git对中文文件名采用不同的编码保存所致 ...

  4. 【翻译习作】 Windows Workflow Foundation程序开发-第一章02

    1.2      Windows Workflow概览 微软的Windows Workflow Foundation(简称WF)是.NET框架3.0版的一部分..NET3.0其它主要部分是Window ...

  5. iOS-事务相关

    事务管理 事务(Transaction):1.构成单一逻辑工作单元的操作集合DBMS中的用户程序DBMS外的可执行程序对数据库的读/写操作序列2.读从数据库中读取数据,首先从磁盘中读到内存(Buffe ...

  6. JavascriptS中的各结构的嵌套和函数

    各位朋友大家好,上周更新给大家分享了JavaScript的入门知识及各种常用结构的用法,那么,本次更新博主就跟大家更深入的聊一聊JS各结构的嵌套用法,及JS中及其常用的一种结构--函数.以下为函数和循 ...

  7. 【开源社交系统研发日记】利用 Docker 包 Laradock 服务器部署 Laravel &amp&semi; ThinkSNS&plus; 等程序实战(多项目)

    什么是ThinkSNS+ ThinkSNS(简称TS),一款全平台综合性社交系统,为国内外大中小企业和创业者提供社会化软件研发及技术解决方案,目前最新版本为ThinkSNS+. 前段时间不知道抽上面疯 ...

  8. 【转】判断点在多边形内(matlab)

    inpolygon -Points inside polygonal region Syntax IN = inpolygon(X,Y,xv,yv)[IN ON] = inpolygon(X,Y,xv ...

  9. 画流程图挺好的软件---visio

    visio 2016 下载地址链接: https://pan.baidu.com/s/1oyfJL_QgOA7qUHOt7p8CIA 提取码: mv79 第一次做的样式图:

  10. CSS之transform-origin属性

    设置旋转元素的基点位置 语法 transform-orign:0 100% 0 transform-origin: x-axis y-axis z-axis; x-axis 定义视图被置于 X 轴的何 ...