Css盒子模型

最新推荐文章于 2024-09-16 06:30:00 发布

梦晨黑

最新推荐文章于 2024-09-16 06:30:00 发布

阅读量187

点赞数 3

分类专栏： Css 文章标签：前端 css

本文链接：https://blog.csdn.net/2302_80695016/article/details/141059556

版权

Css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

盒子模型

所谓盒子模型，不过就是大盒子嵌套小盒子

<html>
    <head>
        <title></title>
    </head>
    <style>
        .bigbox{
            width: 500px;
            height: 500px;
            background: red;
        }
        .smollbox{
            width: 250px;
            height: 250px;
            background: pink;
            margin: auto;
            transform: translateY(50%);
        }
    </style>
    <body>
        <div class="bigbox">    <!-- 大盒子 -->
            <div class="smollbox"></div>    <!-- 小盒子 -->
        </div>
    </body>
</html>

Flex布局

使用场景，局部tab布局，导航栏布局等

<html>
<head>
    <title></title>
</head>
<style>
    div{
        width: 400px;
        height: 50px;
        background: pink;
        display: flex;
        justify-content: center;/* 水平居中 */
        align-items: center;/* 垂直居中 */
        text-align: center;/* 文本内容居中 */
    }
    a{
        flex: 1;/* 平均分 */
    }
</style>
<body>
    <div>
        <a>首页</a>
        <a>收藏</a>
        <a>关注</a>
        <a>我的</a>
    </div>
</body>
</html>

经常使用的Flex元素

Flex布局，要先给父元素设置display：flex元素

给子元素设置flex：数字，数字相同代表平均分，把父元素宽度平均分给子元素

如果要设置换行使用：看代码

<html>
<head>
    <title></title>
</head>
<style>
    div{
        width: 400px;
        height: 100px;
        background: pink;
        display: flex;
        justify-content: center;/* 水平居中 */
        align-items: center;/* 垂直居中 */
        text-align: center;/* 文本内容居中 */
        flex-wrap: wrap;    /* 允许换行 */  /* nowrap不允许换行 */
    }
    a{
        width: 50%;
    }
</style>
<body>
    <div>
        <a>首页</a>
        <a>收藏</a>
        <a>关注</a>
        <a>我的</a>
    </div>
</body>
</html>

这些是Flex常用的基础样式

Grid布局

使用场景：全局分布，用来设置排版等，大型使用建议grid，小型使用flex

<html>
    <head>
        <title></title>
    </head>
    <style>
        body{
            display: grid;
            grid-template-columns: 1fr 1fr; /* 定义2列 */
            grid-template-rows: 1fr 1fr 1fr;/* 定义3行 */
            grid-gap: 20px; /* 间隔20px */
        }
        .header{
            background: red;
            grid-row: 1;    /* 占第一行的1到3列 */
            grid-column: 1/3;
        }
        .main1{
            background: pink;
            grid-row: 2;
        }
        .main2{
            background: green;
            grid-row: 2;
        }
        .footer{
            background: blue;
            grid-row: 3;
            grid-column: 1/3;
        }
    </style>
    <body>
        <div class="header"></div>
        <div class="main1"></div>
        <div class="main2"></div>
        <div class="footer"></div>
    </body>
</html>

给body设置display：grid元素

grid-template-columns设置列:单位为fr,设置一列1fr，两列1fr 1fr

grid-template-rows设置行：单位为fr，设置一行1fr，两行1fr 1fr

将盒子划分位置

grid-column：1 / 3 盒子占两列

我解释一下，为什么占两列要写成1 / 3

两个盒子拼在一起三条线，看图1 / 3表示从第一列开始到第三列