摘要：最近在看揭秘，于是写了文章来作笔记，除此以外还会补充一些自己遇到的笔试题。举例说明以上的代码有什么问题呢如果需要改变字号，那么同时需要调整行高。那么经过修改后的代码如下关于使用还是还是百分比，需要根据具体情况来决定。
最近在看《css揭秘》，于是写了文章来作笔记，除此以外还会补充一些自己遇到的笔试题。希望大家都有所收获。
css编码技巧 尽量减少代码重复在实践中，代码可维护性的最大要素是尽量减少改动时要编辑的地方。
举例说明
padding:6px 12px; border: 1px solid #446d88; background: #58a linear-gradient(#77a0bb, #58a); border-radius: 4px; box-shadow: 0 1px 5px gray; color: white; text-shadow:0 -1px 1px #335166; font-size:20px; line-height:30px;
以上的代码有什么问题呢？
如果需要改变字号，那么同时需要调整行高。
【当某些值相互依赖时，应该把它们的相互关系用代码表达出来】
如果将父级的字号加大，则不得不修改每一处使用绝对值作为字体尺寸的样式。
需要确定哪些效果是应该跟着变大变小，哪些效果是保持不变的
产生主色调的亮色和暗色变体，其实可以使用将半透明的黑色或白色叠加在主色调上。
background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent);
//作者建议使用HSLA而不是RGBA来产生半透明的白色。因为它的字符长度更短，重复率更低。
那么经过修改后的代码如下：
padding: .3em .8em; border: 1px solid rgba(0,0,0,.1); background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent); border-radius: .2em box-shadow: 0 .05em .25em rgba(0,0,0,.5); color: white; text-shadow: 0 -.05em .05em rgba(0,0,0,.5); font-size: 125%; line-height:1.5
关于使用rem还是em还是百分比，需要根据具体情况来决定。
【插播笔试题】 Q：line-height:1.5 与line-height:150%的差别？line-height:1.5 是根据自身元素的font-size进行计算。
line-height:150% 是根据父元素继承而来的font-size进行计算。
Q：rem,em,px的差别rem css3新增单位。rem为元素设定字体大小时，相对的只是HTML根元素。【IE8以下不支持】
em 相对于父元素的字体大小。
px 像素px是相对于显示器屏幕分辨率而言的
px，em，rem的转换工具
继续回到css编码技巧。
有时候，代码易维护和代码量少不可兼得。
例如，为元素添加一个10px宽的边框，但左侧不加边框
border-width: 10px 10px 10px 0;
但若以后需要改动边框的宽度，需要同时改3个地方。那么以下这种方式可能更好。
border-width: 10px;
border-left: 0;
currentColor【IE9+支持】
例如，我们想让所有的水平分割线元素自动与文本颜色保持一致，只需要这样写。
hr { background: currentColor;}
border和box-shadow默认的颜色就是当前的文字颜色，也就是类似currentColor。currentColor本身就是很多颜色属性的初始值，例如border-color、outline-color、text-shadow和box-shadow的颜色。【iOS Safari浏览器下(iOS8)下，currentColor有一些bug，例如伪元素hover时候，background:currentColor的背景色不会跟着变化。关于currentColor其他信息可查看张鑫旭博客，currentColor-CSS3超高校级好用CSS关键字。
继承 inherit
例如，在创建提示框时，可能希望小箭头能自动继承背景和边框的样式。就可以这样做。
.callout:before {
//其他代码 background: inherit; border: inherit;
}
相信你的眼睛，而不是数字视觉上的错觉在任何形式的视觉设计中都普遍存在。如果希望四边的内边距看起来基本一致，需要减少顶部和底部的内边距。关于响应式网页设计
作者提出了一些建议，可能可以避免不必要的媒体查询
使用百分比长度来取代固定长度，如果做不到，尝试使用与视口相关的单位(vw,vh,vmin,vmax)，它们的值解析为视口宽度与高度的百分比。
当需要在较大分辨率得到固定宽度时，使用max-width
不要忘记为替换元素（例如img,object,video,iframe等）设置一个max-width，值为100%
假设背景图片需要完整的铺满一个容器，可以使用background-size:cover。【在移动网页中通过css把一张大图缩小显示往往不太明智】
当图片或其他元素以行列式进行布局，让视口的宽度来决定列的数量。可以使用弹性盒布局(Flexbox)或者display:inline-box加上文本折行行为。
在使用多列文本时，指定column-width而不是column-count，这样可以在较小的屏幕上自动显示为单列布局。
【尽量实现弹性可伸缩的布局，并在媒体查询的各个断点区间内制定相应尺寸】
如果要明确地去覆盖某个具体展开式属性并保留其他相关样式，则需要用展开式属性。
background: url(tr.png) no-repeat top right / 2em 2em,
url(br.png) no-repeat bottom right / 2em 2em,
url(bl.png) no-repeat bottom left / 2em 2em;
//如果只为某个属性提供一个值，那么它会扩散并应用到列表中的每一项。
//在简写时，使用一个斜杠（/）作为分隔，是为了消除歧义。
background: url(tr.png) top right,
url(br.png) bottom right,
url(bl.png) bottom left;
background-size: 2em 2em;
background-repeat: no-repeat;
//此时，只需要在一处修改，就可以改变所有的background-size和background-repeat
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115219.html
摘要：但是根据本司机两年的开发经验来看，在实际开发中很少来使用这个单位。由于基本都是一些实用性的技巧，我就不一一列举了，建议自读。很好很实用的一本书。 第一章 引言 css编码技巧 在引言中，作者提到使用em与inherit来实现css代码的简洁与可维护性。但是根据本司机两年的开发经验来看，在实际开发中很少来使用em这个单位。如何用以及何时去使用，还是要根据实际开发需求来定吧，毕竟这两个属性...
摘要：因为鲜为人知的第四个长度参数双层投影毛玻璃效果见毛玻璃自定义复选框不多介绍，也有相关案例复选框滚动提示现在越来越多的移动端都是这样处理，滚动提示其他揭秘对应的地址图灵图书在封底都提供优惠码低价购买电子书她 目标 如何用 css 解决难题 收获 尽量减少代码重复 1 用相对值 font-size: 20px; line-height: 30px; // 应该改成 font-size:...
摘要：笔者作为一位，将工作以来用到的各种优秀资料神器及框架整理在此，毕竟好记性不如烂键盘，此前端知识点大百科全书前端掘金，，不定期更新技巧前端掘金技巧，偶尔更新。计算数组的极值技巧使你的更加专业前端掘金一个帮你提升技巧的收藏集。 CSS 样式画各种图形 - 前端 - 掘金下面是一些我在 CSS 中经常用到的图案，还有一些是在css-tricks看到的。记录一下，以后会用到。会持续更新… 一、...
阅读 1320·2021-09-22 15:09
阅读 2654·2021-08-20 09:38
阅读 2401·2021-08-03 14:03
阅读 863·2019-08-30 15:55
阅读 3368·2019-08-30 12:59
阅读 3550·2019-08-26 13:48
阅读 1885·2019-08-26 11:40
阅读 647·2019-08-26 10:30
