CSS布局的三种方式

简介: CSS布局的三种方式:1.绝对定位 2.相对定位 3.浮动

绝对定位

绝对定位:
​ 属性:position 值:absolute

<style>
p.abs{
  position: absolute;
  left: 150px;
  top: 50px;
}
 
</style>
 
<p >正常文字1</p>
<p >正常文字2</p>
<p class="abs" >绝对定位的文字3</p>
<p >正常文字4</p>
<p >正常文字5</p>

在这里插入图片描述
说明:设置了绝对定位的元素,相当于该元素被从原文档中删除了,所以“正常文字4”会紧接着出现。

==绝对定位是基于最近的一个定位了的父容器==
如果没有定位的div容器,默认是body

<style>
    p.abs{
         position: absolute;
         left: 550px;
         top: 0;
     }
 </style>

 <div style="position: absolute;width: 700px;">
      <p >正常文字1</p>
      <p >正常文字2</p>
      <p class="abs" >绝对定位的文字3</p>
      <p >正常文字4</p>
      <p >正常文字5</p>
  </div>

在这里插入图片描述
z-index

通过绝对定位可以把一个元素放在另一个元素上,这样位置就会重复,会存在一个谁掩盖谁的问题
z-index属性, 当z-index的值越大,就表示放上面,z-index:越小就表示放下面。

相对定位

属性:position
值: relative

与绝对定位不同的是,相对定位不会把该元素从原文档删除掉,而是在原文档的位置的基础上,移动一定的距离

<style>
p.r{
  position: relative;
  left: 150px;
  top: 50px;
}
  
</style>
  
<p >正常文字1</p>
<p >正常文字2</p>
<p class="r" >相对定位的文字3</p>
<p >正常文字4</p>
<p >正常文字5</p>

在这里插入图片描述

浮动

属性:float
值: left,right
==可以用于文字环绕图片的效果==

  1. 左侧固定,右侧自动占满
<style>
 .left{
   width:200px;
   float:left;
   background-color:pink
  }
  .right{
    overflow:hidden;
    background-color:lightskyblue;
  }
</style>
 
<div class="left">左边固定宽度</div>
 
<div class="right">右边自动填满</div>

在这里插入图片描述

  1. 左右固定,中间自适应
<style>
  .left{
      width:200px;
      float:left;
      background-color:pink
    }
    .right{
      width:200px;
      float:right;
      background-color:pink
     }
   .center {overflow:hidden;   background-color:lightblue
</style>
                     
  <div class="left">左边固定宽度</div>
  <div class="right">右边固定宽度</div>
  <div class="center">中间自适应</div>

在这里插入图片描述

  1. 贴在下方
<style>
                    #div1 {
                        position: relative;
                        height: 300px;
                        width: 90%;
                        background-color: skyblue;
                    }
                    #div2{
                        position: absolute;
                        bottom: 0;
                        height: 30px;
                        width: 98%;
                        background-color: lightgreen;
                    }
                    </style>
                     
                    <div id="div1">
                        <div id="div2"> 无论蓝色div高度如何变化,绿色div都会贴在下面
                        </div>
                    </div>

在这里插入图片描述

目录
相关文章
|
4天前
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么?
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时,需要对其基本原理和特性有深入的理解,同时结合具体的布局需求和场景,进行细致的调整和优化。通过合理的设置和注意事项的把握,才能实现理想的自适应效果,提升用户体验。还可以根据实际情况进行更深入的探索和实践,以不断提升 Flex 布局的应用能力。
|
25天前
|
前端开发 容器
使用 CSS Grid 布局实现响应式设计
【10月更文挑战第1天】使用 CSS Grid 布局实现响应式设计
36 4
|
25天前
|
前端开发 容器
前端技术分享:利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享:利用CSS Grid布局实现响应式设计
|
2月前
|
前端开发 容器
css布局-弹性布局学习笔记
这篇文章是关于CSS弹性布局的学习笔记,详细介绍了flex容器和元素的相关属性,包括flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content以及order、flex-grow、flex-shrink、flex-basis、flex和align-self等,解释了这些属性在弹性盒子布局中的作用和用法。
|
2月前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
3月前
|
前端开发 安全 容器
CSS如何优雅实现卡片多行排列布局?
【8月更文挑战第24天】CSS如何优雅实现卡片多行排列布局?
86 3
|
3月前
|
前端开发 开发者 容器
探索现代Web开发中的CSS Grid布局技术
【8月更文挑战第29天】在数字时代的浪潮中,网页设计不断进化以适应日新月异的用户需求。CSS Grid布局技术作为一项革新性的前端工具,为设计师和开发者提供了前所未有的布局能力。本文旨在通过深入浅出的方式介绍CSS Grid的核心概念、基本用法以及在实际项目中的应用,帮助读者快速掌握这一强大的网页布局工具。
52 3
|
3月前
|
前端开发 开发者 容器
【Web布局的革命】探索CSS Grid栅格系统,打造未来网页设计!
【8月更文挑战第25天】在网页设计领域,布局至关重要。传统的布局方法难以满足复杂需求,CSS Grid 栅格系统因此诞生。它是一种二维布局模式,能直接控制行和列,简化复杂网格的设计。通过定义 `display: grid;` 创建网格容器,并利用 `grid-template-columns` 和 `grid-template-rows` 设置行列尺寸,轻松实现响应式布局。此外,CSS Grid 支持高级功能,如网格区域划分和对齐设置,极大提升了布局的灵活性和创意空间。随着浏览器兼容性的增强,CSS Grid 必将成为未来网页设计的关键技术之一。
62 1
|
3月前
|
前端开发
CSS Grid 布局:span 关键字
CSS Grid 布局:span 关键字
57 0
|
3月前
|
前端开发 容器
css中弹性布局使用方法
css中弹性布局使用方法
47 0