zmmzmmz / css-trick

Tips,Tricks and Techniques on using Cascading Style Sheets

css-trick

Tips,Tricks and Techniques on using Cascading Style Sheets

css-trick's Issues

关于CSS变量的那些事儿

原文链接：Everything you need to know about CSS Variables

翻译: by 酉生

大多数编程语言支持变量。但很不幸，CSS从一开始就不支持原生变量。

假设你曾使用过CSS，如果想去尝试全局变量，除非使用类似Sass的预处理器。

同时像Sass的预处理器也会把支持变量作为一大亮点。

随着web的快速发展，我很开心CSS终于开始支持定义变量。

在预处理器支持的很多特性中，CSS变量的添加是一个很不错的。这些特性甚至让整个web行业更接近未来。

在本文中，我将带领你们了解原生变量是怎样在CSS运行的、怎样使用它们让你的工作生活变得很简单便捷。

注意：本文假设你已经对CSS有个不错的理解。

一、前言

首先，我将带你们理解CSS变量的基础知识。我相信任何关于CSS变量认知的尝试必须从基础开始。

学习基础知识很重要。但是更重要的是我们要把这些基础知识用于构建真实的工作应用中。

所以我会用3个实际项目的方式向你展示怎样轻松的使用变量。一下是有关这3个项目的简介。

项目1：使用CSS变量创建差异化组件

你可能已经写过类似的变化组件。不管你是用React，Angular，还是Vue，CSS变量将会让这一过程更加简单。

[图]

在这里查看效果 �👉 Codepen.

项目2：使用CSS变量订制主题

你很可能在别的地方已经看到过。我会向你展示CSS变量是怎样创建自定义主题。

[图]

在这里查看效果 �👉 Codepen.

项目3：创建“CSS变量小屋”🤣

不要在意这个命名，我实在想不出其他的好名字。

[图]

留意下boxes的样色是怎样动态更新的，boxes容器是怎样随着range表单控件进行3D旋转的。

[图]

这个项目将会展示用JavaScript动态更新CSS变量的方便。

在这里查看效果 �👉Codepen.

二、为何变量是如此重要

简单来说，有以下这些方面：

理由 #1：增加代码的可读性

这个不用说，一眼就可以看懂变量用途（前提是有个好的命名规则），更利于维护。

理由 #2：有利于大型CSS文档的需求更换

如果你把这些常量分散在一个个的独立文件内，相信你肯定能明白，使用一个共享变量是有方便去更新和维护了。

理由 #3：可以更有效的检查语法错误

好吧

三、定义变量

先开始介绍我们熟悉的：JavaScript中的变量。

一个简单的JavaScript变量可以这样声明：

var amAwesome;

翻译中...👨‍💻‍

圣杯、双飞翼与Flexbox布局

简介

圣杯布局是典型的CSS布局问题，圣杯布局是Matthew Levine在2006年提出这个名称，双飞翼布局则是源自淘宝UED。但二者都是通过float浮动法。

下面通过复习对比圣杯、双飞翼和现代flexbox布局，用不同方法去解决下图中页面的布局：

因其长得类似圣杯或者飞翔的小鸟而得名。

而且满足一下需求：

1. left和right的宽度已知，中间自适应
2. 中间内容应放在文档流前面，优先加载，content内容部分依次按照main、left、right加载

所以HTML如下：

<div class="head">head</div>
<div class="content">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<div class="foot">foot</div>

基础样式

首先在content使用float前我们需要定义一个清除浮动类。

* {
    margin: 0;
    padding: 0;
}

.cleanfix {
    clear: both;
}
.cleanfix:after {
    content: '.';
    clear: both;
    display: block;
    visibility: hidden;
    height: 0;
    zoom: 1;
}
/* 或者使用 Nicolas Gallagher 创造的 micro clearfix 方法 (http://nicolasgallagher.com/micro-clearfix-hack/) */ 

.head, .foot {
    width: 100%;
    height: 80px;
}
.left, .right, .main {
    float: left;
}
.left {
    width: 40px;
    height: 60px;
    background-color: rgba(10, 190, 20, .43);
}
.right {
    width: 40px;
    height: 80px;
    background-color: rgba(210, 0, 220, .43);
}
.main {
    background-color: #ddd;
}

按照上面样式实现下面布局

我们的目的是要内容部分main自适应，这样的话给main 100%的宽度：

.main {
    width: 100%;
}

content加上width 100%之后导致两侧left，right浮动到下面，但是目的是想要两侧上去，这时可以使用负边距。

main,content,right都是在同一个浮动流中，顺序是main left right。现在main占了100% 从而导致 left 与 right 不能和 main 浮在同一行。

这个时候我们可以利用负边距来让 left 向前移动 （即 margin-left 为正的时候就是和左边的盒子的外边距，那么为负的时候就是像前移动了），为了让left保持对齐到最左侧，需要向左移动-100%，加上下面样式

.left {
    margin-left: -100%;
}

会得到下面的布局：

同理计算right向左移动一个right的宽度，对齐到最右侧

.right {
    margin-left: -40px;
}

得到下面布局：

从元素审查中可以看出left和right是覆盖在main上面。

那下面问题来了，怎么使得main的被覆盖部分往里收呢？这就是圣杯布局与双飞翼布局的根本区别。

基本样式：

* {
    margin: 0;
    padding: 0;
}
.cleanfix {
    clear: both;
}
.cleanfix:after {
    content: '.';
    clear: both;
    display: block;
    visibility: hidden;
    height: 0;
    zoom: 1;
}
.head, .foot {
    width: 100%;
    height: 80px;
}
.head {
    background-color: rgba(200, 200, 200, .35);
}
.foot {
    background-color: rgba(90, 190, 200, .43);
}

.left, .right, .main {
    float: left;
}
.left {
    width: 40px;
    height: 60px;
    background-color: rgba(10, 190, 20, .43);
    margin-left: -100%;
}
.right {
    width: 40px;
    height: 80px;
    background-color: rgba(210, 0, 220, .43);
    margin-left: -40px;
}
.main {
    background-color: #ddd;
    width: 100%;
}

圣杯布局

圣杯布局的**是给content添加padding-left和padding-right，数值分别是left和right的宽度，再将left和right用相对布局 position:relative并分别配合left和right属性，移动到两旁不至于覆盖主内容。

首先，给content添加padding

.content{
    padding: 0 40px 0 40px;
}

再给left和right添加相对定位，移动

.left {
    position: relative;
    left: -40px;
}
.right {
    position: relative;
    right: -60px;
}

HTML：

<div class="head">header</div>
<div class="content cleanfix">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<div class="foot">footer</div>

双飞翼布局

双飞翼布局是在main 中创建子wrapper用户放置内容，子wrapper用margin-left和margin-right为left、right两栏留出位置。下面为HTML结构

<div class="head">head</div>
<div class="content cleanfix">
    <div class="main">
        <div class="wrapper">main</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<div class="foot">foot</div>

添加样式。

.wrap {
    background-color: #FFEB3B;
    margin-left: 40px;
    margin-right: 40px;
}

这样得到下面布局

flexbox布局

不同于“怪异的float浮动”，随着现代浏览器的良好支持，和PostCSS配合AutoPrefixer做兼容， flexbox弹性盒模型已经可以优雅的替代传统的布局方案。

关于跟更多flexbox示例展示看这里solved-by-flexbox

flexbox布局思路很简单，由于没有float，我们不用清除浮动什么鬼的。

1、将content设置为弹性盒

.content {
    display: flex;
}
.right {
    width: 40px;
    height: 100px;
    background-color: rgba(210, 0, 220, .43);
}
.left {
    width: 40px;
    background-color: rgba(10, 190, 20, .43);
}
.main {
    background-color: #00BCD4;
}

2、将main的flex属性设置为1 自适应宽度

.main {
    flex: 1;
} 

2、设置left的顺序为-1，使main居中

.left {
    order: 1;
}

全部样式:

.content {
    display: flex;
}
.main {
    flex: 1;
    background-color: #00BCD4;
}
.right {
    width: 40px;
    height: 100px;
    background-color: rgba(210, 0, 220, .43);
}
.left {
    width: 40px;
    background-color: rgba(10, 190, 20, .43);
    order: -1;
}

怎样，够简单吧！

总结

Float流布局：

圣杯布局和双飞翼布局流程大致如下：

• 搭建 head content foot, content 内部的三个元素全部左浮动，然后清除浮动防止影响 foot
• 给 main 100% 的宽度让他占满一行
• 给 left -100% 的margin-left 让他移动到最左边，给 right 和他宽度一样的负 margin 移动到最右边
• 给 left -100% 的margin-left 让他移动到最左边，给 right 和其宽度的负 margin移动至最右侧
  • 圣杯布局会给 content 内边距，左右分别为 left 和 right的宽度，然后再利用相对定位移动 left 和 right
  • 双飞翼布局会在 main 里面再加一层 wrap ，然后把内容都写在 wrap 里面，正对 wrap 设置他的 margin, 左右外边距和 left 与 right 一样

FlexBox布局

直接设置content为弹性盒，调整left顺序-1，设置main的宽度伸缩自适应flex:1。
样例代码地址：地址

多亏Flexbox，麻麻再也不用担心我的布局了。溜~