CSS基础知识汇总{主要内容:定位及特点}

一、定位
定位的分类:
◆静态定位
◆绝对定位【重点】
◆相对定位【重点】
◆固定定位
静态定位:position: static;
如果我们希望使用静态定位改变元素位置,是实现不了的。【静态定位无法改变元素位置】,因为静态定位的元素和标准流的元素默认显示方式是一样的。【静态定位元素就是标准流的元素】
绝对定位:position:absolute;
特点:
绝对定位的元素也是脱标的元素(不占位置)
使用绝对定位可以改变元素位置
如果父元素是一个标准流的元素,那么如果该父元中的子元素设置了绝对定位,那么该子元素是相对body标签左上角进行位置移动的。
如果父元素是一个除静态定位以外的其他定位元素【绝对定位的元素| 相对定位的元素 | 固定定位的元素】,那么该绝对定位的子元素是参照父元素左上角进行位置改变。
绝对定位的元素也可以实现模式转换的效果【脱标】
相对定位[自恋型元素]:position: relative;
特点:
◆相对定位的元素与父元素是否设置了定位无关
◆相对定位的元素只会相对元素本身原来的位置
◆相对定位的元素没有脱标【占位置】

相对定位的使用:
◆一般情况子绝父相: 子元素设置绝对定位,父元素设置相对定位
固定定位: position: fixed;
特点:
◆固定定位的元素始终是以body左上角为参照设置位置。
◆固定定位的元素也是脱标的元素【不占位置】
◆可以实现模式转换的效果
二、定位层级关系
元素只有定位的元素才有层级关系。
通过z-index属性设置元素的层级。
注意: 只有定位的元素才能设置z-index属性。【只有绝对定位,相对定位,固定定位】
☞总结:
◆如果z-index值相同,那么最后的定位元素层级就会比前面定位元素的层级高。【后来居上】
◆如果z-index值不相同,那么z-index值越大,层级越高。
◆如果父元素也存在层级关系,那么我们只需要看父元素的层级即可,父元素z-index值越大,层级越高。
三、绝对定位居中
margin:0 auto; 只能让标准流的盒子居中显示
如何实现绝对定位的元素居中?
在这里插入图片描述
四、Logo内容移除
☞ 网页中的logo应该是a标签的背景图片
☞ 在设置网页logo的时候,最好设置文字
☞ 在网页logo中我们最好将设置的文字进行隐藏
在这里插入图片描述
五、css可见性(元素隐藏)
☞overflow:hidden;【将超出父元素的部分隐藏】
☞display: none; ----隐藏元素
display:block; —显示元素的
☞visibility:hidden; ---- 隐藏元素
✔区别:
display:none 隐藏元素后不占位置
visibility:hidden;隐藏元素后占位置

六、vertical-align属性
☞ 插入图片底部默认会有3px的空白
☞ 在移动图片的时候,文字也会随着图片上下移动
☞ 由于行内块元素,有默认的属性:vertical-align:baseline;
☞ 解决图片底部3像素空白方式:
vertical-align: top| middle| bottom|
☞ 注意:
vertical-align属性只能用在行内块元素中或者table标签中。

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值