CSS——布局

一、文档流（normal flow）

    1、网页是一个多层结构，一层摞着一层，通过CSS可以分别为每一层来设置样式。作为用户来讲只能看到最顶上的一层。这些层中，最底下的一层称为文档流。文档流是网页的基础，我们所创建的元素默认是在文档流中进行排列的。

    2、元素主要有两个状态：① 在文档流中；   ② 不在文档流中（脱离文档流）。

    3、元素在文档流中的特点：

① 块元素：会在页面中独占一行。 默认宽度是父元素的全部（会把父元素撑满），默认高度是被内容撑开（子元素）。

② 行内元素：不会独占页面一行，只占自身大小，在页面中左向右水平排列，如果一行之中不能容纳下所有的行内元素则元素会换到第二行继续自左向右排列。行内元素的默认宽度和默认高度都是被内容撑开。

二、盒子模型（盒模型、框模型      box model）

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

    2、每一个盒子都由以下几个部分组成：

① 内容区（content）：元素中的所有子元素和文本内容都在内容区中排列。内容去的大小由width（宽度）和height（高度）两个属性来设置。

② 内边距（padding）：内容区和边框区之间的距离。

                                      一共有四个方向的内边距：padding-top、padding-right、padding-bottom、padding-left。

                             特点: 内边距的设置会影响到盒子的大小。

                             背景颜色会延伸到内边距上。

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

                             一共盒子的可见框的大小，由内容区、内边距和边框共同决定，所以在计算盒子大小时需要将这三个区域加到一起计算。   

③ 边框（border）：属于盒子的边缘，边框里边属于盒子内部，除了边框都是盒子的外部。也会影响盒子的大小。

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

边框的宽度   border-width：一般有默认值为3个像素，可以用来指定四个方向的边框宽度。

                                             值的情况：四个值，顺时针旋转，上 、右、 下、 左

                                                                三个值，上、 左右、 下

                                                                两个值，上下、 左右

                                                                一个值，上下左右

            除了border-width还有一组 border-xxx-width，用来单独指定某一个边的宽度，xxx可以是 top、right、bottom、left。

边框的颜色   border-color：用来指定边框的颜色，同样可以分别指定四个边的边框。规则和border-width一样。也可以省略不写，如果省略则自动使用color的颜色值，color没有设定则默认为黑色。

边框的样式   border-style：用来指定边框的样式。solid表示实线、dotted表示点状虚线、dashed表示虚线、double表示双线。 规则与border-width一样。不写则默认值为none 表示没有边框。

border简写属性：通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求。如：border：solid 10px orange；。空格隔开。

除了border以外还有四个border-xxx，对四个边分别设置样式。如：border-top：10px solid red；。空格隔开。

④ 外边距（margin）：不会影响盒子的可见框的大小，但是会影响盒子的位置，影响到盒子实际占用空间的大小。

 一共有四个方向：margin-top   上外边距，设置一个正值，元素会向下移动。

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

                              margin-bottom   下外边距，设置一个正值，其下边的元素会向下移动。

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

                              margin也可以设置一个负值，元素向相反方向移动。

        元素在页面中是按照自左向右的顺序排列的，所以默认情况下如果我们设置的左和上外边距则会移动元素自身，而设置下和右外边距会移动其他元素。

 简写属性：margin。可以同时设置四个方向的外边距，用法和padding一样。

    3、水平方向的布局

① 元素在其父元素中水平方向的位置由以下几个属性共同决定：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=其父元素内容区的宽度。     如果 相加结果使等式不成立则称为过度约束，等式会自动调整（如果这七个值中没有为auto【自动】的情况，则浏览器会自动调整margin-right值以使等式满足）。

    这七个值中有三个值可以设置成auto：width、margin-left、margin-right。如果某个值为auto则会自动调整为auto以使等式成立。

        如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0。如果将三个值设置为auto，则外边距都是0，宽度最大。

        如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同值。所以我们经常利用这个特点来使一个元素在其父元素中水平居中。

        元素在父元素中水平居中的语法：width：xxxpx；

                                                           margin：0 auto；

    4、垂直方向的布局

① 不设置父元素的高度时，默认情况下父元素的高度被内容撑开。设置父元素高度则不会改变父元素的高度。

② 子元素是在父元素的内容区中排列，如果子元素的大小 过了父元素，则族元素会从父元素中溢出。

③ 使用overflow属性来设置父元素如何处理溢出的子元素。

    可选值：   visible    默认值，子元素会从父元素中溢出，在父元素的外部位置显示。

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

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

                    auto       根据需要生成滚动条。

④ overflow-x：单独处理水平方向。

    overflow-y：单独处理竖直方向。

        两者可选值跟overflow一致。

    5、外边距的折叠

① 垂直外边距的重叠（折叠）：相邻的垂直方向外边距会发生重叠现象。

• 兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值取较大值，两者都是负值则取绝对值较大的）。

 如果相邻的外边距一正一负，取两者的和。

 兄弟元素之间的外边距的重叠对于开发有利，所以我们不需要进行处理。

• 父子元素之间的相邻外边距，子元素会传递给父元素（上外边距）。父子外边距的折叠会影响到也免得布局，必须进行处理。

三、行内元素的盒子模型

    1、行内元素不支持设置宽度和高度，可以设置padding、border、margin，但是垂直方向padding、border、margin不会影响页面的布局。

    2、属性：① display     用来设置元素的显示类型。

                                    可选值：     inline    将元素设置为行内元素。

                                                      block     将元素设置为块元素。

                                                      inline-block     将元素设置为行内块元素，行内块既可以设置宽度和高度又不会独占一行。拥有行内元素和块元素的作用

                                                      table      将元素设置为一个表格。

                                                      none      元素不在页面中显示，隐藏元素，不占据页面的位置。

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

                                    可选值：     visible      默认值，元素在页面中显示。

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

四、浏览器的默认样式

    1、通常情况下，浏览器都会为元素设置一些默认样式。

    2、默认样式的存在会影响到页面的布局，通常情况下编写网页时必须要去除浏览器的默认样式（pc端的页面）。

 3、可以使用重置样式表来重置浏览器的默认样式。

其中，reset.css  直接去除浏览器的默认样式，normalize.css对默认样式进行了统一。

五、盒子的大小

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

    2、属性：   box-sizing         用来设置盒子尺寸的计算方式（设置width和height的作用）。

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

                                                          border-box       宽度和高度用来设置整个盒子的可见框的大小。width和height指的是内容区、内边距和边框的总大小。

六、轮廓和圆角

    1、轮廓：outline  属性：用来设置元素的轮廓线，用法和border一模一样。

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

    2、阴影：box-shadow    属性： 用来设置元素的阴影效果，阴影不会影响页面布局。

                                             默认情况下，阴影位于元素的正下方。

                                             值的情况： 第一个值    水平偏移量，设置阴影的水平位置，正值向右移动，负值向左移动。

                                                               第二个值    垂直偏移量，设置阴影的竖直位置，正值向下移动，负值向上移动。

                                                               第三个值    阴影的模糊半径。

                                                               第四个值    阴影的颜色。

    3、圆角：border-radius      用来设置圆角。圆角设置的是圆的半径大小。有以下具体属性可设置：

                                                border-top-left-radius    左上角

                                                border-top-right-radius  右上角

                                                border-bottom-left-radius  左下角

                                                border-bottom-right-radius 右下角

                                         值的情况：一个值       水平垂直方向圆的半径一致；

                                                          两个值       第一个为水平方向（x轴），第二个为垂直方向（y轴）。

                   border-radius可分别指定四个角的圆角：四个值：左上   右上   右下   左下

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

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

                                                                                  一个值：四个圆角半径一致

                 border-radius：50% ；  ——>   将元素设置为一个圆形。

border-radius：999px；——>    可以直接将正方形变成圆，长方形变成胶囊形状。

本文的分享先到这里，欢迎大家一起讨论学习，下一篇将介绍到CSS的浮动。