CSS中的position和display通俗理解

背景:一直对CSS中的position和display懵懵懂懂,这几天查了一下,结合自己理解,通俗解释如下。


1、position属性:主要分为absolute和relative。

(其中好理解的static为默认值,按照在html文档中顺序显示;fixed为以浏览器为参照。)

我们知道<html>是所有元素的父节点。在一个html文档中,某一个节点(称为a节点)被设置为position:absolute时,“绝对位置”的“绝对”两字的参考点,是距离a节点最近的一个被设置为position:relative的父节点。


2、display属性:主要分为inline、block和inline-block。

inline:宽度高度与父节点的padding等属性有关,且与其他元素在同一行。

block:宽度高度与父节点的padding等属性无关,且单独一行。

inline-block:结合inlin和block的特点,宽度高度与父节点的padding等属性无关,且与其他元素在同一行。

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值