CSS常用技巧（1）——布局类

最新推荐文章于 2022-09-18 21:14:36 发布

weixin_34050389

最新推荐文章于 2022-09-18 21:14:36 发布

阅读量116

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/janas-luo/p/9599243.html

本文详细介绍CSS背景图全屏显示、元素水平居中、高度自适应div背景图设置、视口单位应用、响应式网格布局、行内元素均匀分布及图层反转等技巧，帮助读者掌握高效、美观的网页布局方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、背景图全屏

bg{
 position: fixed;  
   top: 0;  
   left: 0;  
   width: 100%;  
   height: 100%;  
   background: url(bg.jpg) no-repeat #000;  
   background-size: cover;  
   z-index: -1;
}

二、水平居中

margin

margin:0 auto

absolute+margin

position:absolute;  
left:50%;  
width:720px;  
margin-left:-360px; //自身宽度一半

absolute+translate

position:absolute;  
left:50%;  
width:720px;  
transform：translateX(-50%);

三、给高度自适应的div设置背景图

不给height，设置padding

position: relative;
width: 100%;
height: 0;
padding-top: 70%;
background-size: cover;
background-image: url();

四、利用视口单位做自适应：

:root {
  font-size: calc(0.5em + 1vw);
}

五、响应式网格布局

在容器上设置：

.grid-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: 20px;
}

六、利用text-align: justify与text-align-last: justify实现行内均匀分布

<body>
  <style>
    .container {
      width: 400px;
      margin: 50px auto 0;
      background: #ddd;
    }

    .justify {
      position: relative;
      width: 100%;
      height: 24px;
      text-align: justify;
      text-align-last: justify;
      margin-bottom: 20px;
      
    }
    i {
        width: 24px;
        line-height: 24px;
        display: inline-block; 
        text-indent: 9px;
        background: #333;
        color: white;
        border-radius: 50%;
        overflow: hidden;
        font-style: normal;
      }
  </style>
  <div class="container">
    <div class="justify">
      <i>1</i>
      <i>2</i>
      <i>3</i>
      <i>4</i>
      <i>5</i>
    </div>
  </div>
</body>

七、图层反转：

transform: scale(-1,1) //水平反转
transform: scale(1,-1) //垂直反转

转载于:https://www.cnblogs.com/janas-luo/p/9599243.html