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,宽度固定值,则会将外边距设置为相同的值,即在父元素中水平居中

1 width:xxxpx;
2 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 以使其可以包含浮动元素
 

 

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

posted @ 2022-03-03 20:08  踏燕白梅  阅读(69)  评论(0)    收藏  举报