初学css(定位)

相对定位relative

  1. 相对定位最重要的一点是,它可以通过边偏移移动位置,但是原来的所占的位置,继续占有。

  2. 其次,每次移动的位置,是以自己的左上角为基点移动(相对于自己来移动位置)

就是说,相对定位的盒子仍在标准流中,它后面的盒子仍以标准流方式对待它。(相对定位不脱标)

绝对定位absolute

  绝对定位最重要的一点是,它可以通过边偏移移动位置,但是它完全脱标,完全不占位置。

子绝父相

子级是绝对定位,父亲只要是定位

固定定位fixed

  1. 固定定位的元素跟父亲没有任何关系,只认浏览器。

  2. 固定定位完全脱标,不占有位置,不随着滚动条滚动。

绝对定位的盒子水平/垂直居中

普通的盒子是margin 设置为 auto就可, 但是对于绝对定位就无效了

定位的盒子:1.首先left 50% 父盒子的一半大小

2.然后设置成宽度负的一半值就可以了 margin-left。

叠放次序(z-index)

  1. z-index的默认属性值是0,取值越大,定位元素在层叠元素中越居上。

  2. 如果取值相同,则根据书写顺序,后来居上。

  3. 后面数字一定不能加单位。

  4. 只有相对定位,绝对定位,固定定位有此属性,其余标准流,浮动,静态定位都无此属性,亦不可指定此属性。

元素的显示与隐藏

display 显示

display 设置或检索对象是否及如何显示。

display : none 隐藏对象 与它相反的是 display:block 除了转换为块级元素之外,同时还有显示元素的意思。

特点: 隐藏之后,不再保留位置。

visibility 可见性

设置或检索是否显示对象。

visible :  对象可视

hidden :  对象隐藏

特点: 隐藏之后,继续保留原有位置。(停职留薪)

overflow 溢出

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

visible :  不剪切内容也不添加滚动条。

auto :   超出自动显示滚动条,不超出不显示滚动条

hidden :  不显示超过对象尺寸的内容,超出的部分隐藏掉

scroll :  不管超出内容否,总是显示滚动条

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值