读《CSS揭秘》总结一超实用的项目开发技巧

读《CSS揭秘》总结一

前言：文章是看《CSS揭秘》书边看边总结的笔记

目录：

• 减小重复 1.考虑css值是依赖关系的时候，要用比例代码表达。 2.灵活控制 3.使用currentColor变量简化代码 4.使用inherit继承关键字
• 关于响应式布局的设计 1.响应式布局的设计建议

---------------------------------人工分割线---------------------------------------------------

减小重复

1.考虑css值是依赖关系的时候，要用比例代码表达。 例如：

行高是字体的1.5倍
font-size: 20px;
line-height: 1.5;

字体是父字体的1.25倍
font-size: 125%;
line-height: 1.5

巧用em
padding: 0.3em 0.8em;
border-radios: 0.2em;
text-shasow: 0 -0.5em 0.05em #fff
复制代码

==Tips:== 尽可能多使用比例的方式能使得你的修改，适应设备等很是灵活、简便

2.灵活控制

这是你设计的按钮样式。

.button {
    font-size: 125%;
    line-height: 1.5
    padding: 0.3em 0.8em;
    border-radios: 0.2em;
    background: blue;
}
复制代码

稍加改造就能变成取消按钮、确认按钮的样式

.button .cancel {
    background: red;
} 
.button .ok {
    background: green;
} 
复制代码

==Tips:== 你能够把这个按钮的样式放在你的全局css 库中，class加上button就是一个按钮样式，class再加上ok就是一个确认按钮了。

3.使用currentColor变量简化代码

currentColor顾名思义是当前颜色，更准确的说是当前文本的颜色。 例如：你要设计一个按钮，样子是中间文字加上边框。样子想象一下，那么你会但愿这个边框的颜色跟文字的颜色是一致的，这样美美哒。

之前的实现方式 vs currentColor的实现方式：

旧：
button {
    color: blue;
    border: 1px solid blue;
}
新：
button {
    color: blue;
    border: 1px solid currentColor;
}
复制代码

==Tips:== 这种方式有超级都的应用场景，在你开发的时候只要想起有这个变量就必定有帮到你的地方

4.使用inherit继承关键字 简单理解就是某个属性的值跟随父布局的值 例如：当你遇到

<style>
    span {
        color: green;
    }
</style>
<div class="parent" style="color:red">
    123<span class="child">456</span>
</div>
复制代码

此时运行的结果是（红123）（绿456）； 若是你想那个child的颜色跟parent的保持一致怎么办？

style再加一个
.child {
    color: inherit;
}
复制代码

这样的话就是红123456； parent改什么颜色child就跟着变成什么颜色。

==Tips:== 因此当遇到父布局跟子元素之间有联系的属性能够考虑使用继承的方式实现

关于响应式布局的设计

在过往的开发中会大量使用媒体查询（Media Query）去实现响应式的布局（适应不一样分别率的设备），但媒体查询使用的越多，你的代码就会变得越难以维护。本人并没有这种开发经历，简单跳过。 这里引入一位国外大神的语录：

Basecamp的设计师：
结果咱们发现，想让网页在一堆不一样的设备上合理展现，只须要在
最终产品上添加一点 CSS 媒体查询就能够了。这件事情之因此这么简单，
关键在于咱们的布局本来就是弹性可伸缩的。所以，优化网页在小屏幕上
的表现，其实只意味着把一些外边距收拢到最小程度，而后把由于屏幕太
窄而没法显示成双列的侧栏调整为单列布局而已。
复制代码

下面是关于响应式布局的设计建议：

• 尽可能使用百分比来取代固定长度，实在不行就考虑与视图相关的单位（vw,vh,vmin,vmax等）;这种值会被解析成视图的百分比
• 当你须要在较大分辨率下获得固定宽度时，可使用max-width而非width,由于max-width具备必定的适应性，能够兼顾到小分辨率的状况
• 为（img、Object、Video、iframe）等设置max-width:100%
• 加入图片要铺满一个容器，而且不受容器尺寸影响，可使用background-size:cover实现，但每每从接口中拿回一张大图而后缩成一个小图去显示都是很浪费的，应为浪费浏览，浪费对图片的解析
• 善于使用流式布局；例如想展现一个横向滚动的列表，你能够定义你每一个item的宽度（假设宽度=50%),这样的话不管是pc，仍是手机最终显示两个；例如，你将item固定200px宽，那么在电脑、手机显示效果都是固定宽度的方式，电脑屏幕宽一点的话就能多显示几个，手机就显示少一几个而已。

咱们的思路就是想方设法的不使用固定宽高，如此一来你的网页能有一个不错的自适应屏幕的能力了，再搭配媒体查询那应该能解决更多的屏幕适应问题。

这一篇文章就到这里；后续会更新~