CSS页面布局_css 1:1-CSDN博客

本文链接：https://blog.csdn.net/weixin_43416349/article/details/125537597

本文介绍了CSS中实现元素全屏高度的关键技巧，强调了父级元素设置100%高度的重要性，并探讨了隐藏元素的两种方法。此外，还分享了文字居中对齐的多种方式，包括使用`line-height`和`text-align`，以及利用`display:flex`和`grid`布局实现复杂情况下的居中对齐。最后，展示了如何使用SCSS实现Grid布局，创建三等分宽度且间距为20px的子元素。

摘要由CSDN通过智能技术生成

注意了，要想div 100%，它的父元素必须是 height100%，祖祖祖也必须是100%

 html
    {
     height:100%;
     margin:0;
    }
    body
    {
        height:100%;
        margin:0; 
    }
 .div{
        width: 100%;
        height: 100%;
        background-color: red;
        
    }  // 只有把 body 和 html都设置了 100%，div的100%才有用

隐藏的两种方式

visibility: hidden /none;

display: none / block

----------------------------------------------------------------------------------------------------------

文字上下左右居中对齐：

  
height: 44px;
line-height: 44px;  // height和line-height  px相同时， 上下居中
text-align: center;  // 左右居中
  
----------------------------------------------------------
 
display: flex;
justify-content: center;
align-items: center;

--------------------------------------------------------------------------------------------------------------

Grid 布局：

// 请⽤SCSS实现：item的宽度三等分，之间的间距20px

 <div class="container">
 <div class="item"></div>
 <div class="item"></div>
 <div class="item"></div>
 </div>
 .container {
            display: grid;
            grid-template-columns:1fr 1fr 1fr;
            grid-gap: 20px; 
 }

参考自己的文章：Flex布局和gird布局_一路向阳~负责的男人的博客-CSDN博客