四、DIV盒子内容撑不开而烦恼?使用怪异盒子帮你——html5教 前段大G > 首页 > css3布局教程 >

四、DIV盒子内容撑不开而烦恼?使用怪异盒子帮你——html5教

标准盒子模型：内容+内边距+边框+外边距

特点，会撑开容器。内边距和边框都是往外取延申，内容的区域大小不变

怪异盒子模型：内容+内边距+边框+外边距

box-siziing：beber-box 开启。  

特点，会压缩容器，内边距和边框都是往内延申，盒子总体容器不变，内容区域大小会被压缩

弹性盒子模型

特点，自动横向摆放，

        能通过父级元素和子级元素按比例放置子容器的位置

目录

一，怪异盒子模型（box-siziing：beber-box 把标准盒子变成怪异盒子）

二，弹性盒子模型

第一种，修改父级元素flex-direction属性 指定子元素在容器内的位置 镜像

第二种，设置子容器在父容器的水平对齐的方式 justify-content

第三种，设置子元素在父容器的垂直对齐方式 align-itmes

第四种，修改子级元素，flex-数值 权重比例

总结

一，怪异盒子模型（box-siziing：beber-box 把标准盒子变成怪异盒子）

    <!--  什么是怪异盒子模型
    怪异盒子 边框和内边距都是往自己内部扩展的
    标准盒子 边框和内边距都是往外撑的
    box-siziing：content-box 可以把怪异盒子变成标准盒子
    box-siziing：bober-box 可以把标准盒子变成怪异盒子
    在移动端用怪异盒子比较多

    -->

  
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>怪异盒子模型</title>
    <!--  什么是怪异盒子模型
    怪异盒子 边框和内边距都是往自己内部扩展的
    标准盒子 边框和内边距都是往外撑的
    box-siziing：content-box 可以把怪异盒子变成标准盒子
    bos-siziing：bober-box 可以把标准盒子变成怪异盒子
    在移动端用怪异盒子比较多
    -->
    <style>
        /*<!--    这是一个标准盒子-->*/
        .box {
            width: 100px;
            height: 100px;
            background-color: #ffcccc;
            /*外边距四周都是50*/
            margin: 50px;
            /*边框20宽 实线 颜色*/
            border: 20px solid gray;
            /*圆角给她倒角一下*/
            border-radius: 10%;
            padding: 50px;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: #ffcccc;
            /*外边距四周都是50*/
            margin: 50px;
            /*边框20宽 实线 颜色*/
            border: 20px solid gray;
            /*圆角给她倒角一下*/
            border-radius: 10%;
            padding: 50px;
            /*加上一个*/
            box-sizing: border-box;

        }
    </style>
</head>

<body>
    <div class="box">
        <p></p>
    </div>
    <div class="box2">
        <p></p>
    </div>
</body>

</html>


二，弹性盒子模型

1，开启弹性盒子  display：flex   flex弯曲的意思

 一个大容器包含了多个小容器，当大容器设置为弹性盒子的时候。

通过更改父级元素和子级元素，可以获得各种各样比例的样式
第一种，修改父级元素flex-direction属性 指定子元素在容器内的位置 镜像

    1，flex-direction 属性  可以指定子弹性盒子元素在父容器的位置
          flex-direcrion row 左对齐 默认的排列方式
          flex-direcrion row-reverse 反转 也就是右对齐排列 镜像过来
          column，纵向排列
          conlumn 翻转 从下往上排列  往下镜像

        /*  让这个盒子变成弹性盒子*/
          display: flex;
          /*这个是默认横向排列*/
          flex-direction: row;
          /*反转 也就是右对齐排列*/
          /*flex-direction: row-reverse;*/
          /*列排向 从上往下*/
          /*flex-direction: column;*/
          /*从下往上 镜像*/
          /*flex-direction: column-reverse;*/
          /*默认设置从左对齐*/

注意，这个是镜像排列的。

第二种，设置子容器在父容器的水平对齐的方式 justify-content

    justify-content 属性 指定子元素容器水平对齐方式  和上面的区别是她不会镜像了 它属于平移
        flex-start  默认值 左对齐
        flex-end  右对齐  无镜像
        center  居中
        space-between 水平平均摆放
        space-around 水平 左右侧留白 平均摆放

代码：

 
<style>
    /*justify-content: flex-start;*/
    /*靠右对齐 这个的区别是不会镜像了*/
    /*justify-content: flex-end;*/
    /*居中*/
    /* justify-content: center; */
    /*水平方向自动按间隔平均摆放*/
    /*justify-content: space-between;*/
    /*两边留白 然后平均分布*/
    /*justify-content: space-around;*/
    /*两边留白更多一点点 也是平均留白*/
    /*justify-content: space-evenly;*/

    /* 注意，这种是不会被镜像的， 是平移过去 第三种，设置子元素在父容器的垂直对齐方式 align-itmes 3，align-itmes 垂直对齐调整 flex-start 默认值 上对齐 flex-end 下对齐 center 居中 */
    /*默认值 上对齐*/
    /*align-items: flex-start;*/
    /*下对齐*/
    /*align-items: flex-end;*/
    /*居中摆放*/
    /* align-items: center;

    以上三种都是修改父级元素实现的效果，
    第四种，修改子级元素，flex-数值 权重比例 */

    /* 4，子元素属性
    1，flex-grow 权重
    1 数值 平均拉伸每一个元素
    注意 flex 1 会改变子元素的宽度 元素的宽度的权重比flex低 flex会平均改变每个元素的宽度 */

    .root div {
        width: 100px;
        height: 100px;
        /*设置每个子盒子都外边距10px*/
        margin: 0 10px;
        /*平均拉伸每一个元素*/
        /*flex: 1;*/
    }

    .box {
        background-color: #fa4d15;
        /*分为4份 第一个独占2分 也就是独占一半 */
        flex: 2;
    }

    .box1 {
        background-color: #4135fa;
        /*另外一个独占4分之1份 */
        flex: 1;
    }

    .box2 {
        background-color: slateblue;
        flex: 1;
    }
</style>

全部代码：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>弹性盒子模型</title>
    <!--  弹性盒子模型
    盒子模型分类
        1，标准盒子模型
              边框和内边距是向外扩展撑开整体 外边距不会
        2，怪异盒子模型
            边框和内边距是往内压缩整体  外边距不会
        3，弹性盒子模型（css3的新特性）
            适应不同的屏幕大小。更有效的弹性解决容器内部的子元素排列，对齐和分配空间
        css有2给大型版本
              1，css2
              2，css3
    -->
    <!--  设置弹性盒子
    1,弹性盒子的开启，在父级容器里面加上  display:flex;
    2,弹性盒子的特点 自动是横向摆放的
    3，父元素属性
          1，flex-direction 属性  可以指定子弹性盒子元素在父容器的位置
                flex-direcrion row 左对齐 默认的排列方式
                flex-direcrion row-reverse 反转 也就是右对齐排列 镜像过来
                column，纵向排列
                conlumn 翻转 从下往上排列  往下镜像
          2，justify-content 属性 指定子元素容器水平对齐方式  和上面的区别是她不会镜像了 它属于平移
              flex-start  默认值 左对齐
              flex-end  右对齐  无镜像
              center  居中
              space-between 水平平均摆放
              space-around 水平 左右侧留白 平均摆放
          3，align-itmes 垂直对齐调整
              flex-start 默认值 上对齐
              flex-end 下对齐
              center
    4，子元素属性
          1，flex-grow  权重
                1 数值  平均拉伸每一个元素
                注意 flex 1  会改变快度  元素的宽度的权重比flex低 flex会平均改变每个元素的宽度
    -->
    <style>
        .root {
            width: 500px;
            height: 500px;
            background-color: #ffcccc;
            /*  让这个盒子变成弹性盒子*/
            display: flex;
            /*这个是默认横向排列*/
            flex-direction: row;
            /*反转 也就是右对齐排列*/
            /*flex-direction: row-reverse;*/
            /*列排向 从上往下*/
            /*flex-direction: column;*/
            /*从下往上 镜像*/
            /*flex-direction: column-reverse;*/
            /*默认设置从左对齐*/

            /*justify-content: flex-start;*/
            /*靠右对齐  这个的区别是不会镜像了*/
            /*justify-content: flex-end;*/
            /*居中*/
            justify-content: center;
            /*水平方向自动按间隔平均摆放*/
            /*justify-content: space-between;*/
            /*两边留白 然后平均分布*/
            /*justify-content: space-around;*/
            /*两边留白更多一点点 也是平均留白*/
            /*justify-content: space-evenly;*/
            /*默认值 上对齐*/
            /*align-items: flex-start;*/
            /*下对齐*/
            /*align-items: flex-end;*/
            /*居中摆放*/
            align-items: center;


        }

        .root div {
            width: 100px;
            height: 100px;
            /*设置每个子盒子都外边距10px*/
            margin: 0 10px;
            /*平均拉伸每一个元素*/
            /*flex: 1;*/
        }

        .box {
            background-color: #fa4d15;
            /*分为4份  第一个独占2分 也就是独占一半 */
            flex: 2;
        }

        .box1 {
            background-color: #4135fa;
            /*另外一个独占4分之1份  */
            flex: 1;
        }

        .box2 {
            background-color: slateblue;
            flex: 1;
        }
    </style>
</head>

<body>
    <div class="root">
        <div class="box">我是0号盒子</div>
        <div class="box1">我是2号盒子</div>
        <div class="box2">我是3号盒子</div>
    </div>

</body>

</html>

 

总结

标准盒子模型，外边距（margin），内边距（padding），线宽（border），内容。内边距和线框会撑开容器

怪异盒子模型，外边距（margin），内边距（padding），线框（border），内容。内边距和相框会压缩容器

                怪异盒子的开启，box-siziing：bober-box  把标准盒子变成怪异盒子

                                              box-siziing;content-box  把怪异盒子变成标准盒子

弹性盒子模型。

           通过设置弹性盒子模型，可以更改子容器在父级容器的平均摆放距离

             开启：display-flex

                子容器会自动横向摆放

              修改父级元素获得效果
1，flex-direction 镜像摆放
row 左对齐 默认值
row-reverse 反转  镜像过来
column 纵向排列
conlum 纵向反转
2，justify-content 指定子容器水平摆放  平移不镜像        
flex-start  左对齐 默认值      
flex-end  右对齐
center  居中
space-between 水平平均摆放
space-around 水平平均摆放 左右留白
3，algin-itmes 指定子容器垂直摆放
flex-start 上对齐
flex-end  下对齐
center  居中
通过修改子级别元素
flex-数值  根据权重比例不同 容器的位置也不同

这篇四、DIV盒子内容撑不开而烦恼?使用怪异盒子帮你——html5教，文章就结束了，有不懂的地方可以联系站长。希望每个前端人员都有可以找到一个好工作，谢谢观看，祝您生活愉快。

前端大G 2023-11-21 14:57 文章点击量： 作者：【前端大G】

文章标签： 四,、,DIV,盒子,内容,撑,不开,而,烦恼,使用,

上一篇：五、弹性布局让你的网页更加美观——html5教程
下一篇：三、还在问内容乱跑而烦恼?一篇文章教你解决——html5教程

html5入门教程

点击排名

HTML5语言—— 网页常用的 HTML5语言—— 网页常用的