CSS样式设计

flex布局语法

传统的解决方案，基于盒装模型，依赖display 属性 + position属性 + float属性。对于特殊布局非常不方便(比如垂直居中)。flex布局可以简便，完整，响应式地实现各种页面布局，目前已得到所有浏览器的支持。

flex布局概念

flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒装模型提供最大的灵活性。设为 flex 布局以后，子元素的float，clear和vertical-align属性将失效。采用flex布局的元素，称为flex容器，它的所有子元素自动成为容器成员，称为flex项目

轴

我们知道，轴包括主轴和交叉轴默认情况下，主轴的方向是从左向右的，交叉轴垂直于主轴，逆时针方向90度；交叉轴是由主轴决定的，主轴又是由flex-direction决定的；flex-direction属性设置在父容器上，这样子才可以生效。

<div class="wrapper">
        <div class="flex1">子盒子#flex1: 1 </div>
        <div class="flex2">子盒子#flex2: 1 </div>
</div>
flex-direction: row | row-reverse | column | column-reverse

当你给父盒子(wrapper)设置属性 flex-direction: row时，flex容器的主轴被定义为与文本方向相同，主轴起点和主轴终点与内容方向相同，简单来说就是主轴沿水平方向向右；

当你给父盒子(wrapper)设置属性 flex-direction: row-reverse时，主轴方向与文本方向相反，因此沿着水平方向向左。

当你给父盒子(wrapper)设置属性 flex-direction: column时，可以看到子盒的布局发生了变化，形成了在Y轴上的布局方式，且书写方式与布局一样。flex容器的主轴和块轴相同，主轴起点与主轴终点和书写模式的前后点相同；主轴变为Y轴方向。

当你给父盒子(wrapper)设置属性 flex-direction: column-reverse；主轴与Y轴方向的书写方向相反。

容器

父容器

父容器包括justify-content：设置子元素在主轴方向上的对齐方式。

justify-content：flex-start；子元素沿着主轴方向开始对齐；

justify-content：flex-end；子元素沿着主轴方向终点对齐

justify-content：center；子元素在主轴方向水平居中；

justify-content：space-between；子元素在主轴方向上两端对齐，且项目之间间隔相等；

justify-content：space-around；子元素在主轴方向上均匀排列每个元素，每个元素周围分配相同的空间。

align-items：设置子元素在交叉轴方向上的对齐方式。

align-items: flex-start；子元素在交叉轴方向上起点对齐；

align-items: flex-end；子元素在交叉轴方向上终点对齐；

align-items: center；子元素在交叉轴方向上居中对齐；

align-items: baseline；子元素在交叉轴方向上以文字基线对齐；

align-items: stretch；默认属性，将占满整个容器的高度。

flex-wrap 设置换行方式
- 绝对子容器是否可以选择换行，一般而言有三种状态，支持换行的话，也支持逆序换行。
flex-flow 设置轴向与换行组合
- 是 flex-direction 和 flex-wrap 的简写。
- 所以只要掌握，flex-direction 和 flex-wrap即可。
align-content 多行沿交叉轴对齐方式
- 当子容器多行排列时，设置行与行之间的对齐方式。

子容器

flex属性定义在主轴是如何伸缩的；1、子容器是有弹性的，它们会自动填充剩余空间，子容器的伸缩比由flex属性决定；2、flex是多个属性的缩写，允许1-3个值的连写。

flex-grow 设置扩展比例
flex-shrink 设置收缩比例
flex-basis 设置基准大小
order 设置排列顺序

align-self属性单独设置子容器如何沿交叉轴排列；1、每个子容器都可以单独定义沿交叉轴排列方式。2、该属性的取值跟父容器中的align-items属性一致，如果两者相同的话，则以子容器align-self属性为主。

align-self : flex-start；起始端对齐；align-self : flex-end;末尾段对齐；align-self : baseline;基线对齐（第一行文字的基线对齐）；align-self : stretch：拉伸对齐。

SCSS预处理器

出现原因：1、CSS无法嵌套书写导致代码繁重、冗杂、逻辑混乱；2、没有变量和样式复用机制，属性值只能以字面量的形式重复输出。

sass支持标准的CSS多行注释以及单行注释，前者会被完整输出到编译后的CSS文件中，而后者不会。

变量与数据类型

变量以美元符号开头，赋值方法与CSS属性的写法一样；

在CSS的样式中，直接使用变量的名称即可调用变量。

作用域：变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用，不在嵌套规则内定义的变量则可在任何地方使用（全局变量）；将局部变量转换为全局变量可以添加!global声明。

字符串：有引号字符串和无引号字符串。数字：带单位数字与不带单位数字；单位会和数字当做一个整体，进行算数运算。空值：只有一个值null。布尔值。数组。映射。元素。

嵌套

在创建的样式中经常会有重复的标签样式出现，scss提供了更简单的方法来实现选择器。

使用嵌套时调用父选择器:进行伪类样式的处理，一般会看作被嵌套选择器是父选择器的后代，之后再用hover实现伪类。但有时，我们不想使用该关系时，想直接使用父选择器再加上&,这样后续使用& &-text 等价于.nav .nav-text会自动使用父选择器。

.nav {
    height: 100px;
    ul {
        margin: 0;
        li {
            float: left;
            list-style: none;
            padding: 5px
        }
        a {
            display: block;
            color: #000;
            padding: 5px;
            &:hover {
                background
            }
        }
    }
}

同样，嵌套除了可以用在样式的规则中，从而减少样式书写中重复的部分，除此之外，样式也可以用于属性中；使用属性的嵌套可以更加简洁。

body {
    font: {
        family: Helvetica, Arial, sans-serif;
        size: 15px;
        weight: normal;
    }
}

.nav {
    border: 1px solid #000{
        left: 0;
        right: 0;
    }
}

mxin混合

mixin有点像是JS中的函数mixin；在SCSS中使用mixin用的是

@mixin 名字（参数1， 参数2...）{
    ...
}
@mixin alert($text-color, $background) {
    color: $text-color;
    back-ground-color: $background;
    a {
        color: darken($text-color, 10%);
    }
}

.alert-warning {
    @include alert(#8a6d3b, #fcf8e3);
    //@include来使用alert定义的样式
}

@extend继承扩展

用一个选择器去继承另一个选择器中定义的所有样式，避免重复的样式编写。这种继承同时会继承alert里面与其相关的内部嵌套选择器的样式.

@import "base";//输入时则不用加上前面的下划线
    
.alert {
    padding: 15px;
}

.alert a {
    font-weight: bold;
}

.alert-info {
    @extend .alert;
    background-color: 
}

@import

便于将一个项目需要的样式分割成不同的小的部分Partials，项目名以下划线开头来提醒其为小部分，浏览器不会去单独编译其为CSS。

数值与字符串

SCSS中数值均会包含单位；且提供了一些数字函数来更方便地处理数字。

abs()：返回输入参数的绝对值；round(3.5)：四舍五入函数；ceil(3.2)：进位函数；floor(3.6)：退位函数；percentage(650px / 1000px)：变为百分数；min、max函数

关键字、带引号字符串、不带引号字符串；

+可以将两个字符串连接到一块，返回的结果会自带引号；字符串+数字=》字符串；

字符串函数：to-upper-case：变大写；to-lower=-case：变小写；str-length:返回长度

颜色

rgb函数：rgb(255, 100, 0)橙色;rgba函数：可以使颜色拥有透明度的设置，0~1，(255, 255, 0, 0.8);

HSL函数（色相、饱和度、明度）：hsla(60, 100%, 50%, 0.5);

adjust-hue函数，调整色相的值，adjust-hue($base-color-hsl, 137deg)；

lighten和darken函数：改变函数的明暗程度，lighten($base-color, 30%);

saturate、desaturate:增加或减少颜色的纯度，即饱和度，saturate($base-color, 50%);

transparentize、opacify：增加与

Technical blog

css设计