解析CSS经典布局问题

最新推荐文章于 2024-03-28 17:22:16 发布

crazy的蓝色梦想

最新推荐文章于 2024-03-28 17:22:16 发布

阅读量464

点赞数

分类专栏： CSS基础+布局

本文链接：https://blog.csdn.net/qq_41257129/article/details/104340964

版权

CSS基础+布局专栏收录该内容

14 篇文章 0 订阅

订阅专栏

布局题：div垂直居中，左右10px，高度始终为宽度一半

问题描述: 实现一个div垂直居中, 其距离屏幕左右两边各10px, 其高度始终是宽度的50%。同时div中有一个文字A，文字需要水平垂直居中。

思路：利用height: 0与padding-bottom: 50%来实现

 <style>
    *{
        margin: 0;
        padding: 0;
    }
    html,body {
        height: 100%;
    }
    .wrapper1{
        margin: 0 10px;
        height: 100%;
        display: flex;
        /* 子盒子垂直居中 */
        align-items: center;
    }
     .wrapper2{
        width: 100%;
        height: 0;  
        /* 相对父级元素的width的50% */
        padding-bottom: 50%;
        position: relative;
    }
    .box{
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        background: red;
        justify-content: center;
        align-items: center;
        font-size: 20px;
    } 
    </style>
      <div class="wrapper1">
        <div class="wrapper2">
            <div class="box">A</div>
        </div>
    </div>

wrapper1设置：display: flex,align-items: center 保证子元素垂直居中
wrapper2设置：height：0,padding-bottom: 50%; 保证高度为父盒子width的一半
wrapper3设置：继承wrapper2的宽高。

注意：
(1) padding-bottom:50%相对于谁？

相对于父盒子的width

(2) 父元素相对定位，那绝对定位下的子元素宽高若设为百分比，是相对谁而言的？

相对于父盒子的(content + padding) 值

延伸：如果子元素不是绝对定位，那宽高设为百分比是相对于父元素的宽高，标准盒模型下是content, IE盒模型是content+padding+border。

推荐文章：巧用margin、padding实现高度自适应
在这里插入图片描述

如何进行css品字布局

 <div>
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </div>
<style>
        .div1 {
            margin: 0 auto;
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .div2,
        .div3 {
            float: left;
            width: 200px;
            height: 200px;
            transform: translateX(-100%);
        }
        .div2 {
            background-color: blue;
            margin-left: 50%;
          
        }
        .div3 {
            background-color: yellow;
        }
    </style>

在这里插入图片描述

九宫格布局

在这里插入图片描述
(1) teble布局

  *{
            padding: 0;
            margin: 0;
        }
        .row {
            display: table;
        }
        .item {
            display: table-cell;
            text-align: center;
            line-height:50px;
            width: 50px;
            height: 50px;
            border: 1px solid black;
        }
 <div class="parent">
        <div class="row">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>
        <div class="row">
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
        </div>
        <div class="row">
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
        </div>
    </div>

缺点： margin失效

flex布局

   *{
            padding: 0;
            margin: 0;
        }
        .row {
            display: flex;
        }
        .item {
            text-align: center;
            line-height:50px;
            width: 50px;
            height: 50px;
            border: 1px solid black;
        }
 <div class="parent">
        <div class="row">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>
        <div class="row">
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
        </div>
        <div class="row">
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
        </div>
    </div>

(3) grid布局

   .parent {
            width: 156px;
            display:grid;
             /*分成3列*/
            grid-template-columns: repeat(3, 1fr);
            /*分成3行*/
            grid-template-rows: repeat(3, 1fr);
        }
        .item {
            text-align: center;
            line-height:50px;
            width: 50px;
            height: 50px;
            border: 1px solid black;
        }
     <div class="parent"> 
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>  
    </div>

流式布局与响应式布局的区别

流式布局
使用非固定像素来定义网页内容，也就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
响应式开发
利用CSS3 中的 Media Query(媒介查询)，通过查询 screen 的宽度来指定某个宽度区间的网页布局。

超小屏幕(移动设备) 768px 以下
小屏设备 768px-992px
中等屏幕 992px-1200px
宽屏设备 1200px 以上

由于响应式开发显得繁琐些，一般使用第三方响应式框架来完成，比如 bootstrap 来完成一部分工作，当然也可以自己写响应式。

在这里插入图片描述

grid布局

学习指南：

crazy的蓝色梦想

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
解析CSS经典布局问题

九宫格布局(1) teble布局 *{ padding: 0; margin: 0; } .row { display: table; } .item { display: table-cell; text-...
复制链接

扫一扫

专栏目录