CSS常用属性(一)-position和float

整理一些常用的css属性以及详细理解

//消除body默认的margin和padding
*{
	margin:0;
	padding:0;
}

//div在整个网页水平居中
*{
      margin: 0 auto;
      padding: 0;
 }

div水平垂直居中
只要给div加个margin-top,值为(父元素高度-div宽度)/2

position

absolute(绝对定位):元素将不再占用原来元素的空间,相对于其最接近的一个具有定位属性父级元素进行定位

相对于网页

  • div绝对定位前,body和html高度为div高度;
  • div绝对定位后,body和html高度为0;

相对于父级元素

  • div1和div2都绝对定位,div2(子)的定位相对于div1(父)来改变;
  • div1没有绝对定位,div2相对于body改变。

两个兄弟关系的div:

  • 默认div占据一行,上下排开;
    https://img-blog.csdnimg.cn/20210329150457261.png

  • 只给div1加了绝对定位,div1不占空间,两个div重合,div1在上;
    在这里插入图片描述

  • 只给div2加了绝对定位,div1占据空间,div2不占空间;
    在这里插入图片描述

  • div1和div2都加了绝对定位:两个div都不再占据空间,两者重合,并且div2在div1上方(后绝对定位的在最顶层,与书写顺序有关)
    在这里插入图片描述

relative(相对定位):div会以自己原来的位置为中心进行偏移,仍会占据空间。

两个兄弟关系的div:
https://img-blog.csdnimg.cn/20210329150457261.png

  • div1相对定位,进行偏移,占据位置,div2也没有取代div1之前的位置。
    在这里插入图片描述
  • div1相对定位也一样
    在这里插入图片描述
  • 都相对定位
    在这里插入图片描述

fixed(固定定位),相当于直接定在浏览器窗口的某个位置。

与absolute定位类型类似,

但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。

由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,

除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,

因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响

div1不占据原来的空间,即浮起来了,并且div1在空中占据的空间只有div1的大小,所以div2和div3向上移动。
在这里插入图片描述

三者区别:

position:不在占据原来的空间,浮起来,现在占据的空间大小是div的大小,是相对于离这个div最近的加了position的父级元素。
relative:占据原来的空间,现在占据的空间大小宽度为现在div的位置离网页右边的宽度,高度为div高度,是相对于自己。
fixed:不占据原来的空间浮起来,现在占据的空间大小是div的大小,是相对于整个网页。

注意:在使用z-index属性的时候,只有元素使用了position属性的,才具有z-index属性。

float

让元素浮起来,不再占据原来的空间

原图:

在这里插入图片描述

div2左浮动:

div2浮起来,不占据原来的位置,div3到了div2原来的位置,,div2在div3上方。
在这里插入图片描述
div2右浮动:

div2浮动到右边,div3到div2原来的位置。
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值