day19-day23：多列布局、css的hack、网格布局

多列布局

css3 中最新给出的多列布局方案，他是css布局一个新的扩展

设置列宽
column-width：具体值/auto
具体值是直接设置元素的宽宽度
auto是 根据页面宽度自定义列宽
设置列数
column-count：num
num是具体的正整数，范围是[1,10]

以上两个属性合写
column：width count；
设置列间距
column-gap：normal 或者具体的数值
normal是默认值，他的大小是1em
设置两列之间的边框
column-rule 具体设置规则和css中的border一致

设置标题跨列
column-span
只具有两个值
1.none表示不跨列
2.all表示跨所有列

/* 分列的宽度 */
            column-width: 200px;
            /* 分列的列数 */
            column-count: 3;
            /* 合写 */
            columns: 180px 3;
            /* 设置列间距 */
            column-gap: 20px;
            /* 设置两列之间的边框 */
            column-rule: 10px #f00 dashed;

css的hack

css hack：由于不同的浏览器厂商，比如ie，火狐，谷歌，safari（苹果），他们在生产浏览器的时候，会有不同的解决方案，还有不同版本浏览器也可能对相同的css设置渲染出不同的效果，例如 IE6 7 8 9。 css hack是浏览器厂商给自己的浏览器专门制定的一套特殊的指令。可以理解为css hack的目的就是解决不同浏览器的兼容问题，当然也可以使用css hack 为不同的浏览器指定不同的css

    ie的条件注释
    [if IE]:只要是IE都生效
    [if lte IE 6]:浏览器版本小于等于IE6的时候生效
    [if lt IE 6]:浏览器版本小于IE6的时候生效
    [if gte IE 6]:浏览器版本大于等于IE6的时候生效
    [if gt IE 6]:浏览器版本大于IE6的时候生效
    [endif]条件注释的结束指令
    [if ! IE 6]:浏览器的版本不是ie6的时候生效


    特殊符号的hack
    * 在ie10及其以上生效
    - 只对ie6生效
    + 对ie7生效
    _下划线，对ie6 ie7生效
    \9 对ie6 7 8 9 10都生效
    \0 对ie8 9 10都生效
    \9\0 只对ie9 10生效

网格布局

网格布局，是css3新出的一种布局方式，常见的适用案例为九宫格布局

声明网格布局的环境
display：grid；(最常用)
display：inline-grid；

设置列
grid-template-columns
值是 fr，1fr就代表一个比例划分
有几列就可以设置几个fr，每一个fr所占据的宽度比例为1fr。如果需要设置其他比例的宽的，则可以设置整倍fr
如下例：
grid-template-columns：1fr 2fr 3fr；
设置了当前网格为3列，第一列的宽的为1fr，第二列的宽的是第一列的二倍，第三列的宽度是第一列的三倍
有几个fr值，就有几列

还可以设置具体宽度
grid-template-columns：100px 100px 200px
还可以设置 宽度+auto auto是除了具体宽度列数之外的自适应宽度

也可以 宽度+fr组合

设置行
grid-template-rows
它的值是行高，有几个值，就设置几个行高
grid-template-rows：100px 200px 300px;
以上案例的含义是，设置了三行，第一行行高是100px，第二行行高是200px，第三行行高是300px
如果总行高小于父元素grid的高，则父级剩余的高度会被剩余的子元素平分

== 行 列 合写
grid-template：行 /列==

grid-template：auto auto auto/1fr 1fr 1fr;

设置列间距
grid-column-gap：具体数值
设置行间距
grid-row-gap：具体数值
合写间距
gap：row column；

指定开始行
grid-row-start:1; 从第一行开始跨行
指定结束行
grid-row-end：span 3； 到第三行结束，合并3行

指定开始列
grid-column-start:1; 从第一列开始跨列
指定结束行
grid-column-end：span 3； 到第三列结束，合并3列

sass简介

sass是css的预编译语言

sass的写法
简单写法和css是一样的
less 的写法
通过换行符和空格来表达层级关系

css写法
div{border:1px #f00 solid;}
div p{font-size:20px;}
sass 写法
div {
border:1px #f00 solid;
p{
font-size:20px;
}
}
less 写法
div
border:1px #f00 solid;
p
font-size:20px;

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

使用sass，可以使用两种语法格式,语法格式不同，文件的后缀名不同，具有scss和sass两种不同的后缀名
scss:支持css3语法格式，所有的css3语法都通用
sass:被称为缩进格式 (Indented Sass) 通常简称 “Sass”，是一种简化格式。它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性。

sass的变量

在vscode中安装 插件
easy sass
easy less
主要使用的是easy sass，通过插件编译后的结果是会自动生成一个css文件和一个min.css压缩文件

声明变量
        通过关键字($)作为声明变量，$name 此时name就是变量名
        变量名的命名方式：
            以数字，字母，下划线_、短横线-组合的字符作为变量名
            注意，只能以字母和下划线_开头

   通过 #{$name} 插值语句可以在选择器或属性名中使用变量
        直接在属性中使用变量，sass会报错
        如  margin-$left:10px; 报错
            margin-#{$left}:10px;正确写法

全局作用域和局部作用域
全局作用域范围值整个sass文件，局部作用域范围是某个选择器内部

全局变量和局部变量
全局变量：声明在全局作用域内的变量，可以在任何地方使用该变量
局部变量：声明在局部作用域内的变量，只能在生命的地方使用

sass的嵌套规则

sass的嵌套规则
.wp{
background:#f60;
h1{color:#333;}
p{color:#333;}
}
以上嵌套规则最终会被编译为后代选择器的形式 ，因此嵌套不宜过深

属性嵌套:凡是可以进行拆分的属性都可以使用属性嵌套，注意属性名后面的冒号（:）要和{} 有空格分开
border: {
width: 2px;
style: solid;
color: #f00;
}

父选择器的标识符 &,&表示当前的父选择器

混合器

混合器的作用：把相同的css样式提取出来，单独设置成一个模块，使用方便

使用混合器 @mixin
语法@mixin name{
css 样式代码
}
其中name就是混合器的名字，他是一个变量，命名规则同变量的命名规则

使用混合器
@include name；通过@include把混合器的名字引入到使用混合器的位置

复杂的混合器
混合器也可以接受参数

1.定义混合器
@mixin name(arg1,arg2,arg3…){
ss 样式代码
}
()中的arg列表就是混合器参数，由于他们只是形式上的参数，不具备任何意思，因此成为形参列表
注意参数的本质也是变量，因此需要$开头

2.使用混合器
@include name(val1,val2,val3…)
val列表是实际的数据，因此成为实参列表

形参和实参是一一对应的关系

特殊字符

&nbsp；空格
        > 大于号
        < 小于号
        © 版权符号
        " 双引号
        ' 单引号
        × ×号
        ™ 商标

BFC

BFC 块级格式化上下文，BFC规定了在当前元素中块元素的布局方式，默认只有一个标签body是块级上下文标签

BFC特点
１.BFC是一个独立的布局环境，BFC内部的布局和外部不会相互影响
２.可以通过一些方法触发BFC，完成一个独立的布局环境

BFC的布局规则
１.BFC内部块元素，会从上到下一个一个的垂直排列
２.BFC规定了　两个相邻的块元素他们的上下margin重合，
３.每一个元素的margin盒模型的左边(margin-left),与包含他的父border 盒模型的左边(border-left)相接触
4.每一个BFC区域不会和浮动的元素重叠
5.每一个BFC区域都是独立的，里面的内容和外面的内容相互不影响

创建一个BFC的方法
1.给元素添加overflow，注意它的值visible除外
2.给元素设置浮动，注意浮动值 none除外
3.给元素设置position，他的值是fixed或者absolute
4.给元素设置display，他的值为flex，inline-flex table-cell inline-block