css样式：表格、字体、文本、布局（盒模型、浮动、定位、弹性盒子等等）

盒模型：css的一种开发布局模式，它根据标签在文档流中的特点来布局

            （标签在文档流中的特点： 块元素、行内元素、行内块的特点）

               一旦标签脱离文档流 ，标签在文档流中的特点也就不存在了。

盒模型的布局方式一定是最主要的，最基础

网页把页面中所有的标签，所有的内容都当作一个个小盒子（小区块），我们在布局时，需要考虑盒子的大小及位置，不需要考虑它的形状

文档流：网页开发存在多层结构，我们把页面的最底层叫文档流

              我们写的标签默认都在网页最低层

一、盒子模型的构成

        盒模型            冰箱快递

        内容区              冰箱

        内边距              泡沫          

        边框                纸箱子

        外边距              位置

• 盒模型的大小跟哪些组成部分有关？

                跟内容区、内边距、边框有关，跟外边距无关

• 内容区：用来装内容（默认设置的宽高，是盒模型的内容区大小）

二、盒子模型——边框

1、设置边框的简写方式

     border: 边框的大小 边框的样式 边框的颜色;

2、设置边框的完整写法

（1）border-width: 10px;  可选：默认大小1-3px

（2）border-style: solid;  必选：默认时none

•   可选值：

             solid 实线

             dotted  点状的虚线

             double  双线

             dashed  条状的虚线

（3）border-color: red;   可选值：默认黑色

以上的完整写法，样式名后都能跟多个样式值，空格隔开；

        4个   上  右  下  左

        3个    上  左右  下

        2个    上下   左右

        1个   上下左右

3、自定义小箭头    

        width: 0px;

        height: 0px;

        border: 10px solid red;

        border-color: transparent orange transparent transparent ;

4、分别设置某一边的边框

        border-bottom: 10px solid red;

        border-top: 10px solid red;

        border-left: 10px solid red;

        border-right: 10px solid red;

5、去除某一边的边框线    

      border-xxx: none;

三、盒子模型——内边距

1、简写

        padding：；

        也可跟多个值，规则跟border-width一样

       eg：padding:10px  30px 40px; 

2、分别设置某一边的内边距 

        padding-left: 20px;

        padding-right: 20px;

        padding-top: 20px;

        padding-bottom: 20px;

四、盒子模型——外边距

外边距：设置盒子与盒子之间的距离，影响盒子的位置

1、简写

    margin: ;

    属性值也可以写多个，规则跟border-width一致

2、分别设置某一边的外边距

    margin-top: 20px; 在盒子上方增加正值大小的空白，盒子向下移动

                                                          负值                  ，       向上移动

    margin-left: 20px;                          正值                   ，盒子向右移动

                                                          负值                   ，       向左移动

    margin-bottom: 20px;                    正值，盒子本身不动，下面的盒子向下移动

                                                          负值，                          下面的盒子向上移动

    margin-right: 20px;                        正值，盒子本身不动，右侧的盒子向右移动

                                                          负值，                          右侧的盒子向左移动

五、盒子模型——圆角效果

border-radius: 50%; （border-radius: 30px;）

        border-top-left-radius: 30px;

        border-bottom-left-radius: 30px;

        border-top-right-radius: 30px;

        border-bottom-right-radius: 30px;

六、元素的水平方向的布局

元素在其父元素中水平方向的位置由以下几个属性共同决定：

    margin-left、 border-left、 padding-left、width、  padding-right、  border-right、margin-right

一个元素在其父元素中，水平布局必须要满足以下的等式

    margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 父元素内容区的宽度（必须满足）

以上等式必须满足，如果相加结果等式不成立，则称为"过度约束"，则浏览器会让等式自动调整

      浏览器在这个7个值，只能调整3个值，分别margin-left,width,margin-right,调整为auto,

      1、1个auto

                谁是auto调整谁，让等式成立，默认margin-right为auto

      2、2个auto

                只要width为auto，就调整width；

                若width为固定值，margin-left,margin-right为atuo，则同时调整

                把盒子挤到水平居中的位置

      3、3个auto  

                只要width为auto，就调整width

• 作用

        利用过度约束，实现盒子的水平居中排列，前提是width为固定值，例如应用在版心的设置

• 版心

        排版的中心，版心的设置是为了pc端解决屏幕适配问题

        正常情况下，版心在1000px-1400px之内

七、垂直布局

      overflow: ;

• 可选值：

          visible         正常显示  默认值

          hidden          裁剪多余文本

          auto           根据情况，自动生成滚动条

          scroll         生成两侧滚动条

/* 隐藏滚动条 */
scrollbar-width: none;

八、垂直外边距的重叠

1、兄弟元素

兄的下外边距跟弟的上外边距重叠在一起

      （1）两个外边距为正值，以大的为准

      （2）为负，以绝对值大的为准

      （3）一正一负，两者两加

开始时，一般不需要额外做处理

2、父子元素

父子元素的上外边距重叠在一起

如果父子元素的垂直外边距相邻了，则子元素的外边距会传递给父元素

• 解决父子外边距折叠的问题

      1、开启元素的隐藏属性：BFC（块级格式化）属性，一旦开启，这个元素就会成为一个独立的元素，不受其他元素的影响

        overflow: 非visible;一般喜欢用hidden

      2、加一个透明的边框线，但这种方式，还是会改变盒子的大小

        border: 1px solid transparent;

      3、单独提取一个类，在元素的前面添加一个空白的表格       

.clear::before{

    content: '';

    display: table;

}

十、内联元素的盒子

• 行内元素的盒模型

1、不能设置width和height，被内容撑开

2、可以设置padding，但垂直方向padding不会影响页面的布局，不会挤别人

3、可以设置边框，但是垂直的边框不会影响到页面的布局，不会挤别人

4、可以设置水平方向的外边距，水平方向的相邻外边距不会重叠，而是求和，但不支持垂直外边距

十一、默认样式

默认样式：

浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的元素都设置了一些默认的margin和padding等默认样式。

而它的这些默认样式，正常情况下我们是不需要使用的。所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉

1、方式一：手动清除浏览器的默认样式   

*{

    padding: 0;

    margin: 0;

    list-style: none;

    text-decoration: none;

}

  2、方式二：引入重置样式表

        解决浏览器对默认样式解析不同的问题

          reset.css: 它把所有的样式都去除，要什么样式，你自己写

          normalize.css：它保留了默认样式，统一不同浏览器呈现问题

十二、盒子的大小

默认情况下：盒子可见宽的大小由内容区，内边距，边框共同决定

        box-sizing  用来设置盒子尺寸的计算方式，width/height 指的是谁

• 可选值：

                content-box 内容区 默认值

                border-box  宽度和高度用来设置整个盒子可见框的大小，包括边框，padding，内容区

十三、隐藏元素

（一）隐藏元素方案

        1、设置宽高为0

        2、display 用来设置元素的显示类型

• 可选值：

                ····

                none    元素不在页面中显示（隐藏一个元素）

        3、visibility 用来设置元素的显示状态

• 可选值：

            visible 默认值  元素在页面中正常显示

            hidden  元素不在页面中显示（隐藏一个元素），位置依然保留

        4、opcity 设置元素的透明

• 可选值：

           0表示透明

           1表示不透明

           0-1之间表示半透明  

（二）区别

        1、如果配合动画去写，只能用宽高为0或者opcity ,这里的变化有数值的变化

        2、是否占位：display和宽高为0时不占位的，  visibility 和opcity是占位的