css第六天 定位

一.为什么需要定位

二.定位组成

2674e947f2ba484483acefd7d4806ab2.png

 

1.定位模式

166863d414624ab89be96e473ac383d0.png

 

2.边偏移

这四个属性只能定位用,之前的标准流和浮动不能用

6ef2413350ce4df9ab754d64eed9dbd0.png

 3.静态定位(了解)

没有脱离标准流,有标准流所有特性

4b81fe611b824485808d929f7f72f5be.png 

 4.相对定位

d5c7a2008eda4652aad6c52974d9de04.png

 

人走位置留,下面盒子不会升上去占他的位置

c84dc9dab1c64ea9a1cbfc918ef18c73.png

 

限制绝对定位的

5.绝对定位

cb7cc628cfdc4210a8120241dd6279a1.png

 8d514f1c610f45ebbf7017daaf6d26ca.png

 所以可以飘起来,不影响下面的盒子的排布

三.子绝父相

小盒子不能挡住大盒子,所以要绝对定位,不占有位置。大盒子要添加相对定位,因为要添加定位才能让小盒子相对于大盒子来定位,而且不能添加绝对定位,因为大盒子要占地方

524aa139f4bf4ff19ee7bdc4aeefb8d8.png

 84d41a888c294d5293666f20dbb19910.png

 四.固定定位

41a07efb7f0840098f04074b4bce7466.png

 固定定位在版心右侧的方法

de5c61058ed24ef6af644453fabc249a.png

 a0b1156fcad14b6498e329a1d8b3213e.png

 五.粘性定位

87a26ee4a2ae4895b5c4889971b01317.png

 设置top 0

比如top到0是就是刚开始是随页面滚动的,到top=0是就固定了

六.总结

d617d2522e6b4f04a4685971f7cdc03b.png

 edd035f069ee490c9e24bf78b58976a3.png

 2.子绝父相

七.定位的堆叠顺序

标准流没有这个

fa413ee235734b18a8e868a7fcb42be5.png

 绝对定位的盒子水平居中

f5804060377f4402a5455eac7e5a3ae4.png

 5e43c2fe7348432abba3217c14837429.png

16218af639ab4294a5a923e41174c877.png

 d0c4b4e4b6414eb7b75b366b107ca284.png

 3ecec3c01e284858b0003e698f032868.png

 

 

 八.网页布局总结

2ea6e0e6082340c8bd8e2ff82524f8e2.jpg

 

九.元素的隐藏与显示

1.display属性

0c78cb019193450791ec9f6dac47f802.png

 ea1706a3f53a46e7987e308e3ecdc65b.png

 2.visibility可见

bd1875c7bda041dab5396431fd723155.png

 

2b2f9a53dc274b7481f1b4859a4f7558.png

 3.overflow

4c2e2e2799f9464a98eb04d8fe011364.png

 

visible都显示

f5424ae8501d4accbf7acf60a435dc10.png

 

hidden隐藏超出的

5911ebe2d9ca4ff2a1d3a7e9353c544a.png

 滚动条

70015e2978c049f1a30a4d695ce56147.png 

 b4fd420d91ef4941b704fab80dbab4aa.png

 

 

 

 

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值