CSS基础知识（二）

（盒子模型、布局、浮动、高度塌陷、BFC）

1、文档流（normal fliow)

 -文档流是网页的基础，是网页最底下的一层，我们所创建的元素默认都是在文档流中进行排列

 -对于我们来说元素主要只有两个状态

                -在文档流中

                -不在文档流中（脱离文档流）

  元素在文档流中的特点：

      -块元素（block）

                      -块元素会在页面中独占一行（自上向下垂直排列）

                      -默认宽度是父元素的全部（会把父元素全部撑满）

                      -默认高度是被内容撑开

      -行内元素（inline）

                      -行内元素不会被独占一行，只占自身大小

                      -行内元素在页面中从左向右水平排列，如果一行之中不能装下

                       则元素会被自动换到第二行继续自左向右排列（书写习惯）

                      -行内元素的默认宽度和高度都是被内容撑开

2、盒子模型（box model）

CSS将页面中所有元素都设置为一个矩形盒子，将元素设置为矩形盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置,

 每个盒子都有以下几部分组成：

            -内容区(content)

            -内边距(padding)

            -边框(border)

            -外边距(marign)

（1）内容区(content)

        -元素中所有元素和文本内容都在内容区排列

                   内容区的大小有width和height两个属性来设置

                    width 内容区的宽度

                    height 内容区的高度

（2） 边框 （border）

        -属于盒子边缘，边框的大小会影响整个盒子的大小

                要设置边框至少设置三个样式：

                   边框宽度( border-width)

                   边框颜色( border-color)

                   边框样式( border-style)

 边框宽度一般默认值为3个像素，若没写还是有边框的

 可以用来指定四个方向的值

                   四个值： 上 右 下 左

                   三个值：上  左右  下

                   两个值： 上下  左右

                   一个值： 上下左右

 除了border以外还有一组 border-xxx-width

                xxx可以是 top left bottom right

                用于单独设置边框的某一个边宽

 border-color用来指定边框的颜色，同样可以分别指定四个边的边框，规则和border-width一样

         border-color也可以省略不写，若不写会自动使用color的颜色

 border-style 指定边框的样式 ，其默认值是none,若没写表示没有边框

                solid 表示实线 

                dotted 点状虚线

                dashed 虚线

                double 双线

border的简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求 。

        除了border之外还有四个border-xxx， xxx可为top bottom left right，用于单独设置某一条边框的样式。    

（3）内边距：(padding) 

             -内容区和边框之间的距离

             -一共四个方向的内边距padding-xxx

              xxx可以为top left right bottom

  padding的简写属性，可以同时指定四个方向的内边距，规则与border-width一致

  -内边框的设置会影响到盒子的大小

            -内容的背景颜色会延伸到内边距上（其本身不能设置背景颜色，使用内容的背景颜色，

   若要显示内边距则需重新设置内容子元素的背景颜色）

注意：可见框的大小，由内容区、内边距和边框共同决定

故计算盒子大小时需要将三个区域加到一起计算 

（4）外边距(margin)

          -外边距不会影响盒子可见框的大小

          -但是外边距会影响盒子的位置，即影响盒子的实际占用空间

          -一共有四个方向的外边距：

                           margin-top

                                -上外边距，设置一个正值，元素会向下移

                           margin-left

                                -左外边距，设置一个正值，元素会向右移

                           margin-right

                                -默认情况下设置margin-right不会产生任何效果

                           margin-bottom

                                -下外边距，设置一个正值，其下边元素会向下移

           -元素在页面中按自左向右的顺序排列，

故默认情况下设置左和上外边距会移动自身，设置下和右外边距会移动其他元素

 -margin间写属性，同时设置四个方向的外边距大小，用法和padding一样。

3、布局

（1）水平布局：元素在其父元素水平方向的位置由以下属性共同决定：

                   margin-left

                   border-left

                   padding-left

                   width

                   padding-right

                   border-right

                   margin-right

   其必须的满足以下等式：

        以上子元素的属性值之和=父元素的width

 若相加结果等式不成立，则称为过渡约束，等式会自动调整margin-right的值

  若七个之中三个值可设置为auto

                  width

                  margin-left

                  marging-right

                 某值为auto，则会自动调整auto值来满足等式

 -如果一个宽度和一个外边距设置为auto，则宽度会调整到最大(等于父元素的宽度），

 设置auto的外边距会自动为0

 -如果三个都设置为auto，则外边距都是0，宽度最大(等于父元素的宽度）

 -如果两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值，

 故利用该特点将一个元素在父元素中水平居中

      示例：width:xxxpx;

                 margin:0 auto; 

 （2）垂直布局：

                   -默认情况下父元素的高度被内容撑开

                   -子元素是在父元素内容区中排列的

如果子元素的大小超过父元素，则子元素会从父元素中溢， 使用overflow属性来设置父元素如何处理溢出问题(在父元素中设置overflow属性)

 overflow的可选值：

          visible  默认值，子元素会从父元素中溢出，且在父元素外部位置显示

          hidden   溢出内容将会被裁剪不会显示

          scroll   生成两个滚动条，通过滚动条来查看完整内容

          auto     会根据需要生成滚动条

  overflow-x: 在水平方向

  overflow-y：在垂直方向   (可不用)

4、垂直外边距的折叠（重叠）

相邻的垂直方向外边距的折叠

  -兄弟元素

            -兄弟元素间的相邻垂直外边距会取两者之间的较大值（两个都是最大值）

特殊情况：

         如果相邻元素的外边距一正一负，则去两者之和

         如果相邻元素的外边都为负，则取两者中绝对值较大的

 -父子元素

       -父子元素间相邻外边距，子元素会传递给父元素（上外边距）

       -父子外边距的折叠会影响到页面的布局，必须要进行处理

       -将父元素的外边距改为设置内边距，在调整父元素的高度（方便）

       -将父子元素上外边距隔开，设置父元素边框属性，再调整高度（复杂）

5、行内元素盒模型：

   -行内元素不支持设置高度和宽度

   -行内元素可以设置padding、border、margin、background-color，而且不影响垂直方向的布局 

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

        可选值：

              inline 将元素设置为行内元素

              block  将元素设置为块元素

              inline-block  将元素设置为行内块元素

                 （行内块：既可以甚至宽度和高度，又不会独占一行）

             table 将元素设置为一个表格

             none 元素不在页面中显示 

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

         可选值：

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

              hidden 元素在页面中隐藏，不显示，但是依然占据页面的位置

6、去除默认样式

默认样式：

               -通常情况浏览器都会为元素设置一些默认样式

               -默认样式的存在会影响页面的布局

                通常pc端在编写网页时必须去除浏览器的默认样式

第一种去除浏览器默认样式的方法（独自一个一个查看去除) ；

第二种去除浏览器默认样式的方法(一起去除)；

第三种重置样式表，专门用来对浏览器重置样式的

              -reset.css  直接去除浏览器的默认样式

              -normalize.css 对默认样式进行统一

7、盒子大小

默认情况下盒子的大小是由内容区、内边距、边框共同决定

box-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用）

     可选值： 

         content-box   默认值 宽度和高度用来设置内容区的大小

          border-box    宽度和高度用来设置整个盒子的可见框大小

（width和height指的是内容区、内边距和边框大小）

8、轮廓、阴影、圆角

（1） outline  用来设置元素的轮廓线  用法和border一模一样

    轮廓和边框的不同点是 轮廓不会影响可见框的大小

（2）box-shadow 用来元素阴影效果，阴影不会影响页面布局

        第一个值 水平偏移量 设置阴影水平位置  正值向右移动 负值相反

        第二个值 垂直偏移量 设置阴影垂直位置 正值向下移动  负值相反

        第三个值 阴影的迷糊半径

        第四个值 阴影的颜色  

（3）border-radius  用来设置圆角  即设置圆的半径大小

       分为四个角的圆角

                          四个值  左上 右上 右下 左下 （顺时针）

                          三个值 左上 右上/左下 右下

                          两个值  左上/右下  右上/左下

 border-radius:20px / 40px (是椭圆形)

  还有   border-top-left-radius:

            border-top-right-radius:

            border-bottom-left-radius:

            border-bottom-right-radius:

9、浮动

浮动可以是一个元素向其父元素的左侧或右侧移动

           用float来设置浮动属性

可选值：

               none 默认值 ，元素不浮动

               left 左移

               right 右移

浮动元素特点：

              1、浮动元素默认不会从父元素中移出

              2、浮动元素向左或右移动时不会超过前边的其他浮动元素

              3、浮动元素不会超过它上边的浮动兄弟元素，最多和它一样高

              4、元素设置浮动之后，水平布局的等式不强制成立

              5、设置浮动后元素会脱离文档流，不再占用文档流位置，

故元素下边的还在文档流中的元素会自动向上移动

简单总结：浮动元素左右就是让页面中的元素可以水平排列，从而通过浮动制作一些水平方向的布局。

浮动元素的其他特点：

      -浮动元素不会盖住文字，文字会自动环绕在浮动元素周围

                 故可利用浮动来设置文字环绕图片的效果

       - 脱离文档流的特点；

            块元素：

                        1、块元素不再独占一行

                        2、块元素的宽度和高度默认被内容撑开

            行内元素：

                        脱离文档流后变成块元素，特点和块元素一样

注意：浮动元素不再区分块元素和行内元素

10、BFC

高度塌陷问题： 

                   -在浮动布局中，默认父元素的高度被子元素撑开

                   -当子元素浮动后，其完全脱离文档流，将无法撑起父元素

                      导致父元素高度丢失

                   -当父元素高度丢失后，其下元素会自动上移，导致页面布局紊乱

                   -是浮动布局中常见的问题

BFC(block formatting context) 块级格式化环境

        -BFC是CSS中隐藏的一个属性 ，可以为一个元素开启BFC

                     开启BFC后该元素会变成一个独立的布局区域

        -开启BFC后的特点：

                     1、该元素不会被浮动元素覆盖

                     2、子元素和父元素外边不会重叠(在父元素中设置)

                     3、可以包含浮动的子元素

         -通过一些特殊方式开启BFC：

                     1、设置元素的浮动，即将所有元素都设置浮动(不推荐)

                     2、将元素设置成行内块元素（不推荐）

                     3、将元素的overflow设置成一个非visible的值

                        -常用方式：将元素设置成overflow：hidden，

                           即开启BFC，包含可以浮动的元素

11、clear

clear属性来清除浮动元素对当前元素所产生的影响

     可选值：

                  -left 清除左浮动元素对当前元素的影响

                  -right 清除右浮动元素对当前元素的影响

                  -both  清除两侧中最大影响的那侧

     原理：

                设置清除浮动以后，浏览器会自动为元素添加一个

                上外边距（同浮动元素的高度），以使其位置不受其他元素的影响

12、利用clearfix同时解决高度塌陷和外边距重叠的问题

       即为目前最优解决方案

 .clearfix::before,
 .clearfix::after{
              content: "";
              display: table;
              clear: both;
          }