0_3 CSS文档流、盒模型、浮动、高度塌陷、外边距折叠、BFC

------------恢复内容开始------------

1、盒模型：

CSS将页面中的元素都设置为了一个矩形的盒子，布局变为把不同的盒子放在不同的位置

组成：内容区content，内边距padding，边框border，外边距margin

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

默认值为content-box内容区，

border-box指整个盒子可见框（content、padding、margin）

1.1水平布局：margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素内容区的宽度 （必须满足）

等式若不成立，且无值设为auto，则自动调整margin-right

 auto设置：其中width 、margin-left 、 maring-right可设置为auto

若width和一个margin设为auto，则width最大，margin为0

若将三个值都设置为auto，则外边距都是0，宽度最大

若将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值，即在父元素中水平居中

width:xxxpx;
margin:0 auto;

1.2垂直布局：

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

                    如果子元素的大小超过了父元素，则子元素会从父元素中溢出

                   overflow 属性来设置父元素如何处理溢出的子元素（可用于开启BFC，非visible）

                    可选值：

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

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

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

                        auto 根据需要生成滚动条

1.3垂直外边距的合并（折叠）

相邻的垂直方向外边距会发生重叠现象，兄弟（一般不需处理）、父子、自己自己

只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

1.4 行内元素的盒模型

　　　　不支持设置width、height，可以设置padding、border、margin，但垂直方向的不会影响布局

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

　　　　　　inline 将元素设置为行内元素

                       block 将元素设置为块元素，可以设置宽度和高度

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

                                行内块，既可以设置宽度和高度又不会独占一行

                       table 将元素设置为一个表格

                       none 元素不在页面中显示

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

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

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

1.5 轮廓和圆角（:hover常用）

box-shadow （水平偏移，垂直偏移，模糊半径，阴影颜色）用来设置元素的阴影效果，阴影不会影响页面布局

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

 border-radius: 用来设置圆角，若想设置成椭圆，只要半径值足够大即可

 

 

 

2、文档流：

网页是一个多层的样式，通过css为每一层设定样式，用户只能看到最上面一层；

最下面一层是文档流，即是网页的基础，创建的元素默认都在文档流排列；

对于我们元素主要有两个状态：在文档流、(脱离)文档流

在文档流特点

块元素：

在页面中独占一行；默认宽度是父元素全部（把父元素撑满）；默认高度是被内容撑开（子元素）

行内元素：

不会独占页面一行，只占自身大小，默认自左向右，换行；默认高度和宽度都是被内容撑开

3、浮动(脱离文档流)

3.1、float属性：

none 默认值；  left 元素向左浮动； right 元素向右浮动

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

如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移

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

3.2、脱离文档流特点

　　　　块元素：

                        1、块元素不在独占页面的一行

                        2、脱离文档流以后，块元素的宽度和高度默认都被内容撑开

                行内元素：

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

                脱离文档流以后，不需要再区分块和行内了

3.3、高度塌陷的问题

在浮动布局中，父元素的高度默认是被子元素撑开的，子元素浮动以后，会完全脱离文档流，无法撑起父元素高度，导致父元素高度丢失；

父元素高度丢失以后，其下的元素会自动上移，导致布局混乱

最终解决方案

clear属性：清除浮动元素对当前元素所产生的影响（left，right，both）

　　　　　原理：设置清除浮动以后，浏览器会自动计算为元素添加一个上外边距,以使其位置不受其他元素的影响

在被影响的元素定义一个class="clearfix"，同时解决外边距折叠问题

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

　　

 4、BFC

　　　　BFC(Block Formatting Context) 块级格式化环境

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

4.1、特点

　　　1.开启BFC的元素不会被浮动元素所覆盖   

　　　2.开启BFC的元素子元素和父元素外边距不会重叠

  　 　3.开启BFC的元素可以包含浮动的子元素

4.2、开启方式

　　　　1、设置元素的浮动（不推荐）

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

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

     常用的方式 ，元素设置 overflow:hidden 开启其BFC 以使其可以包含浮动元素

 

 

------------恢复内容结束------------