CSS笔记-定位Position 及 浮动清除

最新推荐文章于 2021-07-15 10:51:57 发布
最新推荐文章于 2021-07-15 10:51:57 发布
阅读量8k 收藏
点赞数
分类专栏： 笔记 文章标签： CSS 面试 CSS基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XyNiuBi/article/details/79717104
版权
本文介绍了CSS中的position属性，包括static、relative、absolute和fixed四种定位方式，详细解析了它们的工作原理和应用场景。同时，文章还探讨了浮动清除技术，帮助理解如何解决元素因浮动导致的布局问题。
摘要由CSDN通过智能技术生成
position属性 比较【转】

static：对象遵循常规流。此时4个定位偏移属性不会被应用。

relative：对象遵循常规流，并且参照自身在常规流中

最低0.47元/天 解锁文章
Handy____
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
清浮动的方法
weixin_60542090的博客
08-10 257
css精灵英文叫法 css sprites，通常被解释为“CSS 图像拼合”或“CSS 贴图定位”；其实就 是把网页中一些背景图片整合到一张图片文件中，再利用 CSS “background-image”， “background- repeat”，“background-position”的组合进行背景定位，background-position 精确的定位出背景图片的位置css精灵图可以实现特殊形状的背景自由拉伸滑动，能适应不同字数的内容。...
css清除定位影响,总结CSS的position定位属性在使用的一些重点
weixin_29437633的博客
08-04 2544
关于CSS定位，有人很多时候都是随便用用，符合自己的要求就行。但是CSS中的position等属性确实有很多需要认真考究的地方。1.position:staticstatic属性是position的默认值，也就是说，当一个元素没有为其设定position属性时，它的默认值就是static。2.position:absolute这是一个经常会被用到的position属性值。如果为某个元素设定了abs...
html消除绝对定位的影响,css定位常用属性 CSS清除定位position
weixin_35304632的博客
06-03 1470
css中定位position有哪几个属性值？absolute，生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位； 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定； fixed，生成绝对定位的元素，相对于浏览器窗口进行定位； 元素的位置通过 "left", "top",absolute 生成绝对定位的元素，相对于 stati...
清除浮动和定位
LXJRQJ的博客
12-26 824
清除浮动 clear属性可以用于清除元素周围的浮动对元素的影响。 也就是元素不会因为上方出现了浮动元素而改变位置。 可选值： left：忽略左侧浮动 right：忽略右侧浮动 both：忽略全部浮动 none：不忽略浮动，默认值 方法一： .clearfix:after{ content:" "; display: block; clear: both; } .clearfix{ z...
HTML5+CSS3-基础03-清除浮动&position
weixin_47402645的博客
04-27 545
HTML5+CSS3-基础03-清除浮动&position3种清除浮动方法Position定位 3种清除浮动方法 1. 添加新元素，使用clear:both; 这种方式优点就是代码少，容易理解，浏览器几乎都支持，出现的问题比较少，但缺点就是如果页面浮动浮动布局多的话，就要添加很多空div去清除浮动，不便优化。虽然这是常用的清除浮动方式，但不建议使用 2.父容器使用overfl...
css笔记2-position 定位
weixin_45145722的博客
03-18 161
又来了一个新比喻：HTML就像是我们买的毛坯房，把一个房子分成卧室，卫生间，客厅，厨房这些不同的结构部分，css就是做装饰，把一个灰秃秃的空房子，装饰成一个漂亮的，温馨的家 在css出现之前，咱们的网页搞纯html来构建，常用表格来构建网页（见到过了） 在书写css的时候，还要引入其他css文件，可以用@import来引入 /* 当然是一个css文件 它依赖其他的css文件 */ @import url('other.css'); 标签选择器：对元素进行选择 所以标签选择器的作用范围非常广啦，因为
2021-07-14-css浮动和定位课堂笔记
tubulvxing1的博客
07-15 472
7月14日课堂笔记 1. 浮动（float） 1.1 css布局的三种机制 网页布局的核心——就是用 CSS 来摆放盒子。CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中： 普通流（标准流） 块级元素会独占一行，从上向下顺序排列； 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行； 常用元素：span、a、i、em等 浮动 让盒子从普通流中浮起来,主
Web前端开发笔记-----13.float浮动、position定位
m0_51546204的博客
03-03 198
Web前端开发笔记-----13.float浮动、position定位 文章目录Web前端开发笔记-----13.float浮动、position定位一、float浮动1.float浮动概念和原理2.清除float浮动二、position定位1.relative相对定位2.absolute绝对定位3.fixed绝对定位4.sticky黏性定位5.z-index定位层级三、定位小练习实现下拉菜单 一、float浮动 1.float浮动概念和原理 文档流：   文档流是文档中可显示对象在排列时所占的位置。 f
前端基础笔记-CSS-05-定位
mkx2723的博客
08-07 267
定位基本概念static静态定位relative相对定位absolute绝对定位fixed固定定位拓展使绝对/固定定位的盒子居中堆叠顺序(z-index) 基本概念 css布局的三种机制分别为标准流、浮动、定位。 定位主要的作用是将盒子固定在浏览器某一固定位置。 设置了定位的盒子是漂浮在标准流和浮动盒子的上面的。 定位=定位模式+边偏移 边偏移用top bottom left right属性来表示。 定位模式 position:static(静态) || relative(相对定位) || absolut
定位
qq_43654065的博客
10-12 285
position：relative，相对定位，相对于盒子原来位置移动，元素设置此属性后仍然处于文档流中，不影响其他元素的布局。 position：absolute，绝对定位，元素脱离文档流，不占据文档位置，漂浮在文档流上方，相对于上一级设置了相对/绝对/固定定位的父级元素进行定位，如果找不到则相对于body定位。 position：fixed，固定定位，脱离文档，相对于浏览器窗口进行定位。 position：static，默认值，会忽略上、下、左、右设定的px和z-index。 position：inher
position与清除浮动
三羊的博客
11-20 4011
对于absolute与relative的理解 relative固定该元素的位置。 absolute是相对于它的父级元素来移动的，它会去找设置了position:relative的父级元素，没有父级元素有设置position:relative的话，它就会相对于body来相对移动。以left，right，top，bottom来设置移动。 关于清除浮动的方法 1.给浮动的元素的父级元素设置宽高。 2. ...
移动端唤起键盘时取消position:fixed定位
weixin_33911824的博客
06-17 869
当在移动端按钮position:fixed;底部bottom:0; 固定定位后，当唤起键盘输入数据时就会出现很头疼的问题： 固定在底部的按钮会被系统自带的键盘挤上去，占用输入框位置； 如图： 怎么样才能让按钮固定底部，后面找到了两种方式。 HTML <div class="submit"> <button t...
css样式--定位position
不积硅步，无以至千里，不积小流，无以成江海。
01-04 410
定位方式static：默认 fixed：固定 relative：相对定位 absolute：绝对定位 坐标：偏离目标元素的距离坐标的属性： left：数值 right：数值 top：数值 bottom：数值 固定定位 fixed 相对于浏览器端口进行的定位 如果不设置定位坐标，就在原来的位置 层级要比普通元素高 如果结合定位坐标，就是相对于目标位置的距离 设置固定定位后，一定是块级元素
html 去掉定位,css如何取消定位position？
weixin_33273250的博客
06-08 6957
在网页制作的过程中，经常会使用position来定位元素实现布局，那么，若想取消定位，应该怎么操作呢？下面本篇文章举例讲解CSS如何取消定位position。css如何取消定位position？1、新建一个html文件，命名为test.html，用于讲解CSS如何清除定位position。2、在test.html文件内，使用div标签创建一个模块，并设置其class为con，主要用于下面通过该cl...
CSS清楚浮动clear:both
typef的博客
11-12 399
今天给大家讲一下清楚浮动，在讲清除浮动前，需要了解什么是浮动，这里我就不给你大家详细介绍浮动了。 浮动也就是脱离文档流，脱离文档流了，那父级的宽高就不能被子集撑开，所以我们就需要清楚浮动，废话不多说，我们上代码。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
position定位去掉已设置的值
Norah_Yang的博客
11-24 692
项目中使用到了第三方库，他们提供的position是left，而我需要把它定位在右边，所以需要删除left和它的值 .box{ position:absolute; right:0.5em; bottom:0.5em; left:unset; }
background-position属性和清除浮动的方法
qq_41856605的博客
03-17 578
background-position属性如何定位背景图像：body{ background-image:url('bgimage.gif');background-repeat:no-repeat;background-attachment:fixed;background-position:center;}x% y% 第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 10...
如何清除浮动
前端精髓
03-22 767
css代码如下 <div>开始</div> <div class="parent"> <div class="first"> </div> </div> <div class="step"></div> <div class="last"&...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值