网页布局和定位:绝对定位和浮动布局

最新推荐文章于 2023-09-24 01:51:21 发布
最新推荐文章于 2023-09-24 01:51:21 发布
阅读量1.4k 收藏 2
点赞数
分类专栏： HTML与CSS 文章标签： css html 网页 定位 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qhdzj87/article/details/122876668
版权
       在本CSS教程中，实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项(absolute 、static、relative和fixed)中的绝对定位(absolute positioning)，它可以将文档中的某个元素从其原本位置上移除，并重新定位在期望的任何地点之上。第二种则是使用CSS中的浮动(float)概念。
      绝对定位或浮动都能够用来实现分栏效果。二者可以独立使用，也可以结合在一起，相辅相成。
      1、绝对定位
        绝对定位的优势在于，我们可以丝毫不差地精确控制任何元素的位置—这里面没有什么需要猜测或者运气的成分。由于应用了绝对定位的元素被不留痕迹地从常规文档流中完全移除，所以它也不会为其他元素带来任何的影响。
最低0.47元/天 解锁文章
qhdzj87
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
06-CSS布局-浮动布局
冰霜的博客
08-31 478
1.CSS布局 - 什么是网页的布局方式? ​ 网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的 - 标准流(文档流/普通流)排版方式 ​ 标准流(文档流/普通流) ​ -标准流(文档流/普通流)处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都 处在标准流(文档流/普通流)中。 ​ -元素在标准流(文档流/普通流)中的特点 ​ 块元素 ​ 1.块元素在标准流(文档流/普通流)中会独占一行，块元
定位的概念（HTML）
原地起飞
07-31 1483
文章目录前言HTML中为什么需要定位？一、定位1.定位的组成2.定位模式1、static 静态定位 (默认)2、relative 相对定位3、absolute 绝对定位4、fixed 固定定位5、粘性定位sticky （了解）总结 前言 HTML中为什么需要定位？ 1、浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子 2、定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子 一、定位 1.定位的组成 定位=定位模式+边偏移 &nbs
网页的基础布局：标准流、浮动、定位
weixin_42667972的博客
06-22 255
详细介绍标准流（块标签、行内标签、行内块标签）、浮动、定位的网络基本布局
HTML的浮动与定位
weixin_65905274的博客
03-14 986
元素的浮动属性float，属性值有：元素向左（left）、元素向右（right）和元素不浮动（none）。 清除浮动有clear，常用的属性值有：不允许向左浮动（left）、不允许向右浮动（right）和同时清除左右浮动（none）。 overflow属性是清除浮动，对元素应用“overflow：hidden；”样式，也可以清除浮动对该元素的影响，该方法弥补了空标记清除浮动的不足；常用的属性值有：内容不会被修剪（visble）、溢出来的内容会被修剪，并且被修剪的内容是不可见（hidden）、在需要时生产
HTML5+CSS3学习笔记（九）前端页面六大布局（文档流布局、浮动布局、定位布局、表格布局、弹性布局、网格布局）
Yeee_F
03-30 3406
前端页面六大布局（文档流布局、浮动布局、定位布局、表格布局、弹性布局、网格布局）
Web开发常用布局方式总结
青春木鱼的博客
11-08 6021
无论是前端还是客户端开发都离不开页面的展示，而页面是由布局和各种组件构成的。布局好比是建筑里的框架，而组件则相当于建筑里的砖瓦。组件按照布局的要求依次排列，就组成了用户所看见的界面。研究布局的目的是让我们的页面尽可能的还原UI设计给我们的设计图，适配各种尺寸的屏幕，使其在各种尺寸屏幕上能很好地显示出我们的视图。
CSS实现网页分栏布局的方法：绝对定位和浮动
09-27
网页制作Webjx文章简介：在CSS中...第一种方法是使用四种CSS定位选项（absolute 、static、relative和fixed）中的绝对定位（absolute positioning），它可以将文档中的某个元素从其原本位置上移除，并重新定位在期望的
CSS分栏布局的方法:绝对定位和浮动
12-01
在创建带页脚的布局时，浮动布局通常比绝对定位更灵活，因为它允许元素在文档流中自然堆叠。浮动布局的页脚可以通过设置`clear:both`来确保它位于所有浮动元素之后。 综合来看，绝对定位和浮动都有其适用范围。...
CSS实现网页分栏布局的方法：绝对定位和浮动.pdf
11-26
本文主要探讨CSS如何实现网页的分栏布局，重点集中在绝对定位和浮动这两种方法。 1. **绝对定位** 绝对定位是一种强大的布局工具，它允许开发者精确控制元素的位置，不受其他元素影响。在CSS中，有四种定位选项：`...
CSS实现网页分栏布局的方法：绝对定位和浮动.docx
11-26
在CSS中，实现多栏布局通常有多种方法，而绝对定位和浮动是两种常见的技术。这两种方法各有特点，适用于不同的场景，且可以相互结合以达到更复杂的布局效果。 **1. 绝对定位** 绝对定位允许开发者精确地控制元素的...
H5布局阶段四（定位）
CSDN_GMC的博客
04-06 317
H5布局阶段--定位一. 定位相对定位 relative绝对定位固定定位二. auto三. z-index四. overflow 一. 定位 定位分为相对定位(relative)，绝对定位(absolute)，固定定位(fixed)和默认状态(没有定位,static) 相对定位 relative 语法：开启：position:relative; 修改位置:left:xxpx;top:xxpx; ...
CSS页面布局（浮动+定位）详解
最新发布
Asitwas的博客
09-24 1407
CSS有三种基本定位机制：普通文档流、浮动、定位。 普通文档流中元素的位置由元素在HTML中的位置决定。
css页面布局三大核心（盒子模型、浮动、定位）
qq_40460454的博客
09-21 1648
浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）但是绝对定位（固定定位）会压住下面标准流所有的内容。由于父级盒子很多情况下，不方便给高度，当时盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的盒子，对后面元素排版产生影响。这个“子绝父相”太重要了，是我们学习定位的口诀，是定位中最常用的一种方式这句话的意思是：子级是绝对定位的话，父级要用相对定位。当上下相邻块元素相遇时，若上面的元素有下外边距，下面的元素有上外边距，则他们之间的垂直间距不是。
HTML&CSS2.1基础利用浮动、定位实现圣杯布局、双飞翼布局、伪等高布局、黏连布局，解决浮动元素高度塌陷问题，解决相邻垂直外边距重叠问题
donghe_z的博客
05-02 286
###定位 1.定位元素参照于包含块来定位（均会覆盖原来文档流的元素） 相对定位relative：相对与原来自身位置移动，元素并没有脱离文档流，原来的位置让仍然保持 绝对定位absolute：相对于其自身相邻的开启了定位的祖先元素进行定位的，如果其祖先元素均没有开启定位，则相对浏览器进行定位。 脱离文档流 固定定位fixed：相对于浏览器窗口定位，固定定位不随滚动条滚动。 脱离文档流。 2.什么是...
CSS之定位、居中、浮动及利用浮动设计网页布局和导航
pleasecallme_522的博客
07-21 5090
一：定位： 1.相对定位：如果对一个元素进行相对定位，它将出现在它所在的位置上。然后利用属性position:relative，接着可以通过选择设置left、right、top 、bottom的值，让这个元素“相对于”它的起点进行移动。接下来用w3c网站上的一张图片来解释这个概念： 如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像
html如何设置绝对定位,css教程之绝对定位使用详解
weixin_29635155的博客
06-07 5784
一.基本概念:如果说相对定位没有脱离文档流，相对于对象本身进行偏移有点拖泥带水的话，那么绝对定位绝对是快刀斩乱麻，因为绝对定位可以使一个对象脱离正常的文档流，好像是漂浮在正常文档流的上空,并相对于包含此对象的元素进行定位，当然这个定位相对元素在不同的情况下也有所不同。二.如何将一个元素设置为绝对定位:为对象添加如下属性即可将对象设置为绝对定位:复制代码代码如下:position:absolute;...
html5绝对定位案例,如何使用css定位html元素？（附示例）
weixin_30542979的博客
06-07 410
在页面上定位内容时，可以使用少量属性来帮助操作元素的位置。本文将给你介绍一些使用CSS position 属性包含不同定位元素类型的示例。要在元素上使用定位，必须首先声明其位置property，该位置指定用于元素的定位方法的类型。使用position属性值，使用top，bottom，left和right属性定位元素。它们的位置也取决于它们的位置值。(推荐课程：css视频教程)定位值有五种类型：st...
网页中什么时候用相对定位，什么时候用绝对定位
domino的专栏
05-12 5955
今天有同事问层定位不是很清楚从概念讲相对定位是相对于父对象定位，绝对定位是相对于当前位置定位先说相对定位，大家只要看看比特搜网站（www.bitsoo.com）里有个小贴士就是典型的相对定位的做法，小贴士这个层是在版权区，他就是想对于版权区的定位绝对定位是用的比较多的，它相对于一个“元素”的定位，比如我们平时用到的绝对定位默认都是相对于BODY，如果你想定义为相对于上一级元素，你的办法就是
DivCSS布局绝对定位和浮动详细代码
05-05
绝对定位布局代码： ```html <!DOCTYPE html> <html> <head> <title>Absolute Positioning</title> <style type="text/css"> .container { position: relative; border: 1px solid #000; height: 300px; width: 500px; margin: 20px auto; } .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #ccc; border: 1px solid #000; padding: 20px; box-sizing: border-box; } </style> </head> <body> <div class="container"> <div class="box"> <h1>Absolute Positioning</h1> <p>This is an example of absolute positioning.</p> </div> </div> </body> </html> ``` 浮动布局代码： ```html <!DOCTYPE html> <html> <head> <title>Float Layout</title> <style type="text/css"> .container { border: 1px solid #000; height: 300px; width: 500px; margin: 20px auto; } .box { float: left; width: 33.33%; background-color: #ccc; border: 1px solid #000; padding: 20px; box-sizing: border-box; } .clearfix::after { content: ""; display: table; clear: both; } </style> </head> <body> <div class="container clearfix"> <div class="box"> <h1>Float Layout</h1> <p>This is an example of float layout.</p> </div> <div class="box"> <h1>Float Layout</h1> <p>This is an example of float layout.</p> </div> <div class="box"> <h1>Float Layout</h1> <p>This is an example of float layout.</p> </div> </div> </body> </html> ``` 注意：为了清除浮动，我们在容器的类名中加入了 "clearfix"，并在 CSS 中添加了相应的样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值