CSS3弹性盒子布局

最新推荐文章于 2024-05-13 15:06:24 发布

我本浪人--游吟世间

最新推荐文章于 2024-05-13 15:06:24 发布

阅读量166

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/qq_41760521/article/details/96724532

版权

前端开发专栏收录该内容

31 篇文章 0 订阅

订阅专栏

水平垂直居中

1、已知宽高

①：绝对定位，50% margin挪回一半

②：绝对定位四个方向为0，实现水平垂直居中

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

<head>
    <meta charset="UTF-8">
    <title>水平垂直居中</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: rgb(255, 224, 229);
        }
        
        .wrapper {
            width: 300px;
            height: 200px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -150px;
            margin-top: -100px;
            border: 5px dashed orangered;
            padding: 5px;
        }
    </style>
</head>

<body>
    <div class="wrapper">想要去稻城亚丁、想要去看好妹妹的演唱会、想要养一条狗狗、想要和你一起吃西瓜、想要去稻城亚丁、想要去稻城亚丁、想要去看好妹妹的演唱会、想要养一条狗狗、想要和你一起吃西瓜、想要去稻城亚丁、想要去看好妹妹的演唱会、想要去稻城亚丁、想要去看好妹妹的演唱会、想要养一条狗狗、想要和你一起吃西瓜、想要去稻城亚丁、想要去看好妹妹的</div>
</body>

</html>

效果图：

给wrapper设置属性为：实现的一样的效果

     .wrapper {
            width: 300px;
            height: 200px;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            border: 5px dashed orangered;
            padding: 5px;
        }

2、未知高度

①绝对定位，50% transform挪回一半

②flex布局

给wrapper设置属性为：

.wrapper {
            position: absolute;
            width: 300px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /*自身高度的一半*/
            border: 5px dashed orangered;
            padding: 5px;
        }

使用flex布局：

       body {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            /*以上是将body的高度设置为100%*/
            /*body充满一屏：还可以设置height:100%*/
            display: flex;
            background: rgb(255, 224, 229);
            justify-content: center;
            /*主轴上的对齐方式 */
            align-items: center; 
            /*交叉轴的对齐方式*/
        }
        
        .wrapper {
            width: 300px;
            border: 5px dashed orangered;
            padding: 5px;
        }

实现的效果相同

   body {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            /*以上是将body的高度设置为100%*/
            /*body充满一屏：还可以设置height:100%*/
            display: flex;
            background: rgb(255, 224, 229);
            justify-content: center;
            /*主轴上的对齐方式 */
        }
        
        .wrapper {
            width: 300px;
            border: 5px dashed orangered;
            padding: 5px;
            align-self: center;
            /*flex元素的对齐方式*/
        }

导航栏

display: inline-block; 需要设置font-size:0

float 需要清除浮动

flex完美~

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body,
        ul,
        li {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        
        nav {
            height: 50px;
        }
        
        ul {
            margin: 0 auto;
            display: flex;
            /*弹性盒子*/
            width: 600px;
            background: #ccc;
            font-size: 0;
        }
        
        li {
            flex-grow: 1;
            display: inline-block;
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 16px;
            background: linear-gradient(to right, #888, transparent 40%), linear-gradient(to right, transparent 60%, #888);
        }
    </style>
</head>

<body>
    <nav>
        <ul>
            <li>首页</li>
            <li>课程</li>
            <li>老师</li>
            <li>关于我们</li>
        </ul>
    </nav>
</body>

</html>

效果图：

我本浪人--游吟世间

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3弹性盒子布局

水平垂直居中1、已知宽高 ①：绝对定位，50% margin挪回一半②：绝对定位四个方向为0，实现水平垂直居中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>水平垂直居中</title> &...
复制链接

扫一扫