注：如果display设置为none，float及position属性定义将不生效；

 重置浏览器默认样式：下载CSSReset

七、布局

1、多列布局

2、弹性布局（Flexbox）

/*放在父类*/
display: flex;              
justify-content:space-between; 

1、display属性值flex： 将对象作为弹性伸缩盒显示。【display: flex; /设置弹性盒子/】

2、flex：none | flex-grow、 flex-shrink || flex-basis

　　 (1)、功能：设置或检索弹性盒模型对象的子元素如何分配空间

　　 (2)、适用于：flex子项

　　 (3)值：

(4)、Flex容器可以设置属性flex-flow，取值为row,row-reverse,column,column-reverse四种值:与弹性盒子设置在一起

1、display: flex;：指定某元素使用 Flexbox 布局。

注：

（1）、两个控件元素的宽度没有发生变化，因为弹性布局默认不改变项目的宽度。

（2）、弹性布局默认左对齐，所以两个控件会从行首开始排列。

2、flex-grow: 1;//默认为0

说明：容器中剩余的空间将平均分配给所有子元素。如果其中一个子元素的值为2，那么剩余的空间将会占用两倍于其他元素的空间；

3、align-self 属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式。

值：

　　flex-start：顶边对齐，高度不拉伸

　　flex-end ：底边对齐，高度不拉伸

　　center ：居中，高度不拉伸

　　stretch ：默认值，高度自动拉伸

4、align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

值：

　　flex-start：顶边对齐，高度不拉伸

　　flex-end ：底边对齐，高度不拉伸

　　center ：居中，高度不拉伸

　　stretch ：默认值，高度自动拉伸

　　baseline ：元素位于容器的基线上。

5、flex-direction 属性规定灵活项目的方向

值：

　　row(默认) :从左到右;

　　row-reverse :是从右到左

　　column :从上到下

　　column-reverse:从下到上

6、flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

值：

　　 nowrap（默认）：所有flex item将在一条线上

　　wrap ：flex item将会从上到下分为多行

　　 wrap-reverse ：flex item将会从下到上分为多行

7、flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

值：数字

3、瀑布流布局

1、下载：masonry

2、引用：

script src="js/masonry/masonry.pkgd.min.js" type="text/javascript" charset="utf-8">script>

3、初始化插件：

(1)、方法一：使用jQuery

//页面加载时
window.onload = function() {
    //获取容器
    $(‘#grid‘).masonry({
        //瀑布流布局中的单项选择器
        itemSelector: ‘.grid-item‘,
        columnWidth: 200
    });
}

(2)、方法二：JavaScript

//页面加载时
window.onload = function() {
    var grid = document.querySelector(‘#grid‘);
    var msnry = new Masonry(grid, {
        itemSelector: ‘.grid-item‘,
        columnWidth: 200
    });
}

4、属性：

4、Grid布局

边距折叠

　　外边距折叠：相邻的两个或多个外边距 (margin) 在垂直方向会合并成一个外边距（margin）

　　相邻 ：没有被非空内容、padding、border 或 clear 分隔开的margin特性. 非空内容就是说这元素之间要么是兄弟关系或者父子关系，

垂直方向外边距合并计算

　　a)、参加折叠的margin都是正值：取其中 margin 较大的值为最终 margin 值。

　　b)、参与折叠的 margin 都是负值：取的是其中绝对值较大的，然后，从 0 位置，负向位移。

　　c)、参与折叠的 margin 中有正值，有负值：先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。

1、网格容器：

display:grid;

2、单位：

（1）、fr：剩余空间分配数。用于在一系列长度值中分配剩余空间,如果多个已指定了多个部分,则剩下的空间根据各自的数字按比例分配

3、grid-template：定义行与列的轨道大小

说明：使用以空格分隔的多个值来定义网格的列和行。

（1）、列：grid-template-columns

（2）、行：grid-template-rows

属性值：

（1）、轨道大小【track-size】:可以使用css长度(pX、em等)、百分比、或用分数(用f单位)

（2）、网格线名字【line-name】:可以选择任何名字

/*轨道大小*/
.container{
    display: grid;                                    /*定义网格容器*/
    grid-template-columns : 40px 50px auto 50px 40px ;/*5列*/
    grid-template-rows : 25% 100px auto ;             /*3行。。。(或更多)*/
}
/*网格线名称+轨道大小*/
.container{
    display: grid;                         /*定义网格容器*/
    /*5列【网格线名称+轨道大小】*/
    grid-template-columns :[one]40px [two]50px [three]auto [fout]50px [five]40px ;
    grid-template-rows : 25% 100px auto ;        /*3行。。。(或更多)*/
}

4、grid-template-areas：通过引用grid-area属性指定的网格区域的名称来定义网格模板。

属性值：

（1）、:使用grid-area属性设置的网格区域的名称

（2）、".":点号代表一个空网格单元

（3）、none:没有定义网格区域

.container{
    tgrid-template-areas : "header header header header"  //第一行
                           "main main . sidebar"          //第二行
                           "footer footer footer foot"    //第三行
} 

5、指定网格线的大小，控制行列之间的间距宽度：

（1）、列：grid-column-gap:数值(px等等)

（2）、行：grid-row-gap:数值(px等等)

6、对齐

（1）、沿着行轴对齐网格内容：justify-items

值：

　　1）、start:内容与网格区域的左端对齐

　　2）、end：内容与网格区域的右端对齐

　　3）、center：内容位于网格区域的中间位置

　　4）、stretch ：内容宽度占据整个网格区域空间（这是默认值）

（2）、沿着纵轴对齐网格内容：align-items

值：

　　1）、start:内容与网格区域的顶部对齐

　　2）、end：内容与网格区域的底部对齐

　　3）、center：内容位于网格区域的中间位置【垂直居中】

　　 4）、stretch ：内容宽度占据整个网格区域空间（这是默认值）

（3）、简写：place-items:【值一样】(第一个【列】 第二个【行】)

7、css函数

（1）、repeat():重复

例：

grid-template-columns :repeat(5,100px) ;

8、合并行列【如：把2列合并为一列】

（1）、列的开头：grid-column-start

（2）、列的结尾：grid-column-end

（3）、行的开头：grid-row-start

（4）、行的结尾：grid-row-end

.c .t:nth-child(7){
    background-color: royalblue;
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 5;
} 

5、PC端固定布局

6、移动端流体布局

rem

font-size:625%;

max-width:6.4rem;

margin:0 auto;

每个标签都有设置：font-size

媒体查询

7、兼容响应式布局

unction resize() {
        var w = document.documentElement.clientWidth;
        document.documentElement.style.fontSize = w * 20 / 290 + "px";
}
window.onresize =resize 

max-width:1263px;

百分比

八、渐变

九、字体

1、使用@font-face：

@font-face {
    font-family: myiconfont2; 
    font-family: ;
    src: url(‘fontello-e1116127/font/fontello.woff2‘); 
    src:  [][, []]*;            };
    [font-weight: ];         
    [font-style:  

(1)、Name  :自定义的字体名称。
(2)、source:自定义的字体的存放路径。
(3)、format:自定义的字体的格式，其值主要有以下几种类型：
            ①、truetype,
            ②、opentype,
            ③、truetype-aat
            ④、embedded-opentype,
            ⑤、avg等；
?
(4)、weight和style:weight定义字体是否为粗体，style主要定义字体样式，如斜体。