前端学习CSS——margin合并以及塌陷、什么时候使用 margin什么时候使用padding、使用padding的几种情况、盒子模型、margin塌陷如何解决、选择器、css精灵技术

本文详细介绍了CSS中的z-index原理,盒子模型,何时使用margin和padding,以及padding的适用场景。深入讨论了margin合并和塌陷的现象及解决方案,包括触发BFC的方法。此外,还涵盖了选择器类型、定位方式如absolute、fixed和relative,以及CSS精灵技术在优化加载性能上的应用。
摘要由CSDN通过智能技术生成

一、z-index
数值大的压盖住数值小的
有定位了的元素,才能有z-index值
从父现象
二、盒子模型 由内到外 content padding border margin
什么时候使用 margin什么时候使用padding
简单的来说 margin 是外边距 也就是盒子与另一个盒子之间的距离
padding的话 是内边距 在一个盒子内 内容距离盒子border之间的距离
使用padding的几种情况
1、背景图
2、出现margin合并或者塌陷的情况
3、行内元素
4、padding不能有负值
简单的介绍一下margin合并以及塌陷的情况
1、塌陷是在同一个盒子内 大盒里面有小盒 包含的关系 当给他们同时设置margin-top:50px;的时候 实际距离只会距离上一个盒子或者顶部50px;而不是100px;
例子

//快速生成 (.big>.small)+.big1 +tab键 
<div class="big1"></div>
<div class="big">
    &l
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值