CSS布局

最新推荐文章于 2022-08-02 21:49:53 发布
最新推荐文章于 2022-08-02 21:49:53 发布
阅读量303 收藏
点赞数
分类专栏： 前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lolhahahaha/article/details/116851741
版权
本文详细介绍了CSS布局的各种技巧，包括绝对定位、相对定位、浮动布局、显示方式（隐藏、块级、内联、内联-块级）、水平与垂直居中、左侧固定、贴于下方以及解决块之间空格的方法。重点讲解了如何通过position、float和display属性来实现各种布局效果。
摘要由CSDN通过智能技术生成

文章目录

1.绝对定位

1）

属性: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>

被定义了absolution的块相当于是被放进了一个新创建的界面中，但是与原本界面一同显示
在这里插入图片描述
如果在一个被定义absolution的块中添加了一个被定义了absolution的块，则被定义了absolution的块的基准定位就是这个父块

<style>
p.abs{
  position: absolute;
  left: 100px;
  top: 50px;
}
.absdiv{
  position: absolute;
  left: 150px;
  top: 50px;
  width:215px;
  border: 1px solid blue;
}
</style>
 
<div>
<p >正常文字a</p>
<p >正常文字b</p>
<p >正常文字c</p>
<p >正常文字d</p>
<p >正常文字e</p>
<p >正常文字f</p>
<p >正常文字g</p>
</div>
 
<div class="absdiv">
这是一个定位了的div
<p class="abs" >绝对定位的文字</p>
</div>

在这里插入图片描述

如果在一个未被定义absolution的块中添加了一个被定义了absolution的块，则被定义了absolution的块的基准定位就是最近的一个被定义了absolution的父块

<style>
p.abs{
  position: absolute;
  left: 100px;
  top: 50px;
}
 
</style>
 
<div>
<p >正常文字a</p>
<p >正常文字b</p>
<p >正常文字c</p>
<p >正常文字d</p>
<p >正常文字e</p>
<p >正常文字f</p>
<p >正常文字g</p>
</div>
 
<div>
这个div没有定位
<p class="abs" >绝对定位的文字</p>
</div>

在这里插入图片描述

2）元素重叠

对块进行absolution定义，就可以实现元素的重叠显示，在对块进行z-index定义，就可以定义块的显示优先级
属性：z-index
值：数值

<style>
img#i1{
  position: absolute;
  left: 60px;
  top: 20px;
  z-index:1;
}
   
  img#i2{
  position: absolute;
  left: 60px;
  top: 120px;
  z-index:-1;
}
  
</style>
  
<div>
<p >正常文字a</p>
<p >正常文字b</p>
<p >正常文字c</p>
<p >正常文字d</p>
<p >正常文字e</p>
<p >正常文字f</p>
<p >正常文字g</p>
</div>
 
<img id="i1" src="https://how2j.cn/example.gif" />
<img id="i2" src="https://how2j.cn/example.gif" />

在这里插入图片描述

2.相对定位

与绝对定位不同的是，相对定位并不会把这个块与原本的块分离，而是在原本的位置基础上进行移动，也不会改变其他块的位置
属性：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>

在这里插入图片描述

3.浮动

1）文字向右浮动

文字右顶格，就把原本的位置让出来了，下一排的文字就会占用原本的位置
属性：float
值：right

<style>
.f{
  float:right;
}
 
</style>
 
<div >正常文字1</div>
<div >正常文字2</div>
<div class="f">浮动的文字</div>
<div >正常文字4</div>
<div >正常文字5</div>

在这里插入图片描述

2）文字向左浮动

文字会左顶格，同时下一排的文字会跟随在原本这一排的文字的后面
属性：float
值：left

<style>
div.float{
float:left;
}
</style>
<div>正常文字1</div>
<div class=float>浮动的文字</div>
<div>正常文字4</div>
<div>正常文字5</div>

在这里插入图片描述

3)文字围绕图片

对图片进行float:left的设置，就可以使文字环绕

<style>
.f{
  float:left;
}
 
div{
  width:320px;
}
</style>
 
<div >
 <img src="https://how2j.cn/example.gif"/>
 
<p>  当图片不浮动时，文字就会换行出现在下面
  当图片不浮动时，文字就会换行出现在下面
  当图片不浮动时，文字就会换行出现在下面
  当图片不浮动时，文字就会换行出现在下面
  当图片不浮动时，文字就会换行出现在下面
  当图片不浮动时，文字就会换行出现在下面
</p>
</div>
 
<div >
 <img  class="f" src="https://how2j.cn/example.gif"/>
 
<p>  当图片浮动时，文字围绕着图片
 当图片浮动时，文字围绕着图片
 当图片浮动时，文字围绕着图片
 当图片浮动时，文字围绕着图片
 当图片浮动时，文字围绕着图片
</p>
</div>

在这里插入图片描述

3）在已经使图片左浮动了之后，使文字不环绕图片显示

可以对文字设置clear：left即达到不允许浮动元素出现在左边的效果

<style>
.f{
  float:left;
}
 
div{
  width:320px;
}
 
.clearp{
  clear:left;
}
 
</style>
 
<div >
 <img  class="f" src="https://how2j.cn/example.gif"/>
 
<p>  当图片浮动时，文字围绕着图片
 当图片浮动时，文字围绕着图片
 当图片浮动时，文字围绕着图片
 当图片浮动时，文字围绕着图片
 当图片浮动时，文字围绕着图片
</p>
</div>
 
<div >
 <img  class="f" src="https://how2j.cn/example.gif"/>
 
<p class="clearp">  当图片浮动时，文字却不想围绕图片
当图片浮动时，文字却不想围绕图片
当图片浮动时，文字却不想围绕图片
当图片浮动时，文字却不想围绕图片
 
</p>
</div>

在这里插入图片描述

4）水平排列div

默认情况下div是会换行排列的
使用float：left就可以实现水平排列
但是如果超出了父容器，还是会换行

<style>
div#floatingDiv{
  width:200px;
}
div#floatingDiv div{
   float:left;
}
</style>
默认的div排列是会换行的
 
 <div>
       菜单1
 </div>
 <div>
       菜单2
 </div>
 <div>
       菜单3
 </div>
 
如果使用float就可以达到水平排列的效果，通常会用在菜单，导航栏等地方
 
如果超出了父容器，还会有自动换行的效果
 
<div id="floatingDiv">
  <div>
       菜单1
 </div>
 <div>
       菜单2
 </div>
 <div>
       菜单3
 </div>
 <div>
       菜单4
 </div>
 <div>
       菜单5
 </div>
 <div>
       菜单6
 </div>
</div>

在这里插入图片描述

3.显示方式

1）隐藏

display：none
使得元素被隐藏并且不占用位置

<style>
div.d{
  display:none;
}
 
</style>
  
<div>可见的div1</div>
<div class="d">隐藏的div2,使用display:none隐藏</div>
<div>可见的div3</div>

在这里插入图片描述

2）块级

display：block；使这个元素转换为块级元素
块级元素会自动顶格，自动换行，并且可以设定width和height
内联元素不会默认换行，也不能设置width和height
div默认为块级元素
span默认为内联元素
可以通过display：block；强制使span转换为块级元素

<style>
div,span{
   border: 1px solid lightgray;
   margin:10px;
   width:200px;
   height:100px;
}
 
.d{
  display:block;
}
</style>
  
<div>普通的div块</div>
<span>这是普通span</span> <span>这是普通span</span> <span>这是普通span</span>
<span class="d">这是span,被改造成了块级元素</span>

在这里插入图片描述

3）内联

display：inline
内联元素前后没有换行，并且在其上的width和height也无效。 其大小由其中的内容决定

<style>
div,span{
  boder: 1px solid lightgray;
  margin:10px;
  width:200px;
  height:100px;
}
.s{
  display:inline;
}
</style>
<span>这是个普通的span</span>
<span>这是个普通的span</span>
<span>这是个普通的span</span>
<div class=s>这是内联化的div</div>

在这里插入图片描述

4）内联-块级

内联默认不换行，但是不能设定大小
块级默认换行，但是可以设定大小
有时候，需要元素处于同一行，同时还能指定大小，这个时候，就需要用到内联-块级 inline-block

<style>
span{
   display:inline-block;
   border: 1px solid lightgray;
   margin:10px;
   width:100px;
}
</style>
像这样 ，每个都能设置宽度 ，同时还能在同一行。
<br>
 
<span>盖伦</span>
<span>蒙多医生</span>
<span>奈德丽</span>
<span>蒸汽机器人</span>

在这里插入图片描述

4.水平居中

1）内容居中

可以通过设置属性 align=“center”
也可以通过style=“text-align：center”设置

<style>
div{
  border:1px solid lightgray;
  margin:10px;
}
</style>
<div align="center">
通过设置属性align="center" 居中的内容
</div>
 
<div  style="text-align:center">
通过样式style="text-align:center" 居中的内容
</div>

在这里插入图片描述

2）元素居中

默认情况下div是占满宽度的，所以无法设置居中，可以先设置div宽度，再通过设置margin：0 auto；使div元素居中
span是不能通过margin: 0 auto;居中

<style>
  div{
     border: solid 1px lightgray;
     margin: 10px;
  }
  span{
     border: solid 1px lightskyblue;
  }
</style>
<div> 默认情况下div会占用100%的宽度,所以无法观察元素是否居中</div>
 
<div style="width:300px;margin:0 auto">
  设置本div的宽度，然后再使用样式 margin: 0 auto来使得元素居中</div>
 
<span style="width:300px;margin:0 auto">
  span 是内联元素，无法设置宽度，所以不能通过margin:0 auto居中</span>
 
<div style="text-align:center">
  <span>span的居中可以通过放置在div中，然后让div text-align实现居中</span>
</div>

在这里插入图片描述

5.左侧固定

对一个div设置float：left，那么它就会左顶格，并且下一个div会在他的右侧显示，但是，如果下个div的宽度和高度与这个div不一致，那么就无法在右侧显示，这里我们就需要用到overflow：hidden
给一个元素中设置overflow:hidden，那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。

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

在这里插入图片描述

6.垂直居中

1）line-height

适合单独一行垂直居中

<style>
#d {
line-height: 100px;
}
div{
  border:solid 1px lightskyblue;
}
</style>
 
<div id="d">line-height 适合单独一行垂直居中</div>

在这里插入图片描述

2）内边距方式

<style>
#d {
    padding: 30 0;
}
div{
    border:solid 1px lightskyblue;
}
</style>
 
<div id="d">多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容  </div>

在这里插入图片描述

3）table方式

先通过display:table-cell；将div用单元格显示，然后借助单元格的垂直居中vertical-align：middle
这样图片也可以居中

<style>
#d {
display: table-cell;
vertical-align: middle;
height:200px;
}
 
div{
  border:solid 1px lightskyblue;
}
</style>
  
<div id="d">
<img src="https://how2j.cn/example.gif">
</div>

在这里插入图片描述

7.贴于下方

将父div设置为relative，子div设置absolution的同时设置bottom：0

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

在这里插入图片描述

8.块之间的空格

1）块之间空格

如果在编写span的时候使用了换行，那么生成的span之间就会存在空格

<style>
span{
border-bottom:2px solid lightgray;
}
</style>
 
<div class="continue">
<span>连续的span</span><span>连续的span</span><span>连续的span</span><span>连续的span</span>
</div>
<div class="nocontinue">
<span>有换行的span</span>
<span>有换行的span</span>
<span>有换行的span</span>
</div>

在这里插入图片描述

2）解决办法

使用float：left解决
float使用完毕之后，记得在下面加上 *<div style=“clear:both” /div>*用于使得后续的元素，不会和这些span重复在一起

<style>
div.nocontinue span{
border-bottom:2px solid lightgray;
  float:left;
}
</style>
  
<div class="nocontinue">
<span>有换行的span</span>
<span>有换行的span</span>
<span>有换行的span</span>
</div>
 
<div style="clear:both"></div>
 
<div>后续的内容</div>

在这里插入图片描述

new一个对象()
关注
专栏目录
页面html背景图片居中显示文字,DIV+CSS中让布局、背景图片、文字内容居中的方法...
weixin_42172204的博客
06-03 2495
在DIV CSS布局的页面里，从布局内容到页面里文章文字居中都是非常重要的，而css来设置居中也是非常简单的。1、首先介绍使用css属性让整体布局的居中：设置对象的父级内容居中，这里一个页面的为父级是什么呢？我们可以想象整个页面的内容是由和这两个包含，那根据较近父级我们就设置body的CSS来实现居中问题，可以向在内容里居中有text-align:center;具体css的居中代码为：body{t...
CSS布局示例 1 - 页面色块布局
weixin_43734992的博客
04-13 1383
index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/index.css" /> </head> <body> <!-- 页头 --> <div c..
css文字定位最右边,css 靠右但是不要顶在右边 有点距离 怎么写
weixin_39898150的博客
08-03 7368
可以使用“文本－对齐：对；”把文字向右对齐。1、新建一个DUHTML文档，在body标签中添加div标签，为div设置一个ID，以Demo为例：2、在div标签中添加文本，然后设置div标签的宽度、高度和边框。此时，默认情况下文本应该向右对齐：3、添加“text－align：right；”，其中“文本对齐”指的是文本对齐，“右”指的是右对齐。在这种情况下，网页中的文本将向右对齐。扩展资料：关于CS...
html5边框顶格,CSS 三种定位方式以及格式化上下文详解 》 html5jscss
weixin_31704137的博客
06-15 577
常规流( Normal flow )之称之为常规流，是因为这是相对于后面的浮动和绝对定位的一个概念，浮动和绝对定位元素都脱离了当前的常规流。在 CSS2.1中，常规流包括块框( block boxes )的块格式化( block formatting )， 行内框( inline boxes )的行内格式化( inline formatting )，块框或行内框的相对定位，以及插入框的定位。在 C...
html字段两边顶格换行,css布局，文字换行对齐问题
weixin_28703451的博客
05-30 621
试试用flex吧*{margin: 0;padding: 0;}.rule{width:200px;}.text{display: -webkit-flex;display: flex;}.rule h5{color: #326a9e;font-size:14px;-webkit-flex: 1;flex: 1;line-height: 20px;}.tip{background-color:#3...
如何让网页顶格显示?
weixin_30538029的博客
06-13 1059
只需要在css中添加一个有关body的样式 body{ margin: 0 0 0 0; } top right bottom left 都设置为 0，上右下左　　本质上 让body标签的边距为0，不设置的话，会有个默认的边距 转载于:https://www.cnblogs.com/2bjiujiu/p/69994...
高效学习CSS布局之道
11-26
高效学习CSS布局之道：通过244个范例掌握网页样式与布局技术
div+css布局大全
03-22
下面，我们将深入探讨div+css布局的相关知识点。 1. **Div元素**：HTML中的`<div>`（division）元素是一个通用容器，用于组合HTML元素，为页面提供结构。通过设置`<div>`的类或ID属性，我们可以对多个元素进行分组...
Div_CSS.rar_DIV css布局_css大全_css布局
09-23
**Div+CSS布局详解** Div（Division）+CSS（Cascading Style Sheets）布局是网页设计中的核心概念，它能够帮助开发者实现灵活、高效的页面结构和样式控制。本资料包包含"Div_CSS.pdf"，是一份全面的学习Div+CSS布局...
DIV+CSS布局基本流程及实例介绍
01-20
都说用DIV+CSS布局来设计网站便于优化，容易被收录，那么你对DIV+CSS布局的用法是否了解？CSS布局是网页html通过DIV标签+CSS样式表代码开发制作的（html）网页的统称。DIV+CSS布局是现在非常流行的布局方法，替代了...
html字段两边顶格换行,HTML DIV中文字自动换行 , 顶部对齐
weixin_32824725的博客
05-30 1337
demo.box {position: relative;width: 500px;height: 300px;border: 1px solid #FFF;background-color: #999;display: table;}.wrap{display: table-cell;vertical-align: middle;*position:absolute;*top: 50%;*lef...
css 顶端对齐
热门推荐
lingongheng
03-30 1万+
vertical-align: top;
【前端面试之CSS】元素水平垂直居中以及两栏、三栏布局
阿卡内的博客
08-02 352
元素水平垂直居中以及两栏、三栏布局
html设置div顶格,为什么div里放一个图片会不顶格？
weixin_42466518的博客
06-10 847
天涯强荐：30天学会流利英语的秘密http://www.xxj8.com<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""ahref=".w3/TR/xhtml1/DTD/xhtml1-transitional.dtd"target="_blank".w3/TR/xhtml1/DTD/xhtml1-tran...
css学习---文字居中并显示顶部边边
css33的专栏
02-14 2216
效果：   .section__title{ width: 100%; margin: 0,auto; /*文字顶部边边*/ border-top: 1rpx solid #e3e3e3; /*行高*/ line-height: 100rpx; height: 100rpx; /*文字居中*/ text-align: center; }...
CSS布局大全：掌握纯CSS布局的秘诀
CSS布局大全 CSS布局大全是一本详细介绍CSS布局的电子书籍，从HTML结构化到CSS布局的实现，都被涵盖在内。本书的主要内容包括HTML结构化、CSS布局入门、CSS选择器、CSS布局技巧等。 一、HTML结构化 在学习CSS布局...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值