CSS中的position和display通俗理解

最新推荐文章于 2024-07-26 22:49:01 发布
最新推荐文章于 2024-07-26 22:49:01 发布
阅读量663 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Enarm/article/details/50817411
版权

背景：一直对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等属性无关，且与其他元素在同一行。

Enarm
关注
CSS 显示、定位、布局、浮动
corlin6688的博客
11-07 314
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。两者的区别：visibility:hidden可以隐藏某个元素，但隐藏的元素仍占用之前的空间，即该元素虽然被隐藏，但仍然会影响布局；relative定位元素的定位是相对其正常的位置。absolute定位的元素的位置相对于最近的已定位父元素。如果元素没有已定位的父元素，那它的位置相对于。Fixed定位：元素的位置相对于浏览器窗口是固定位置，即窗口是滚动的，元素是不会移动的。
【CSS布局】详解display，position， float属性！
Sixstar_yanxin的博客
08-14 569
页面布局，或者是在页面上做些小效果的时候经常会用到 display,position和float 属性，如果对它们不是很了解的话，很容易出现一些莫名其妙的效果，痛定思痛读了《CSS Mastery》后总结一下。 让我们从基础的CSS知识谈起，相信很多初学者和小弟一样不明白CSS原理，一味追求效果，结果页面漏洞百出，错误匪夷所思，关于盒模型我就不多说了，网上很多，注意一下IE和其他浏览器（W3C规范）的区别就好了。 块级元素与行内元素 首先谈谈人们经常提及的块级元素和行内(内联)元素 p, ..
position 和 display 的取值和各自的意思和用法
splendid_can的博客
11-26 8311
position     1、position属性取值：static(默认)、relative、absolute、fixed、inherit。     2、postision：static；始终处于文档流给予的位置。看起来好像没有用，但它可以快速取消定位，让top，right，bottom，left的值失效。在切换的时候可以尝试这个方法。     3、除了static值，在其他三个值的设置下
CSS（十二）——CSS Display（显示）和Position(定位）
最新发布
m0_62701594的博客
07-26 966
display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。
css的display和position属性
qq_42804737的博客
08-13 1209
css的positon和display属性positon属性position：static；position：relative；position：absolute;position：fixed；position：inherit；display属性display：none；display：inline；display:block;display:inline-block;display:flex;f...
css有两个重要的基本属性display和position，是前端开发必需掌握的。
weixin_71087234的博客
04-19 673
css有两个重要的基本属性display和position，是前端开发必需掌握的。
CSS中position和display理解
潇潇的博客
09-16 4466
Display理解 1、display常见属性解释 block 默认为block，宽度默认为100%。块状元素有：div、p、h1、form、ul、li。 inline 宽度就是它的文字或图片的宽度，不可改变。行内元素有：span、a、label、input、img、strong、em。 inline-block 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被
CSS BFC原理和定位position
m0_51207602的博客
02-05 380
1.BFC概念 BFC为块级格式化上下文，具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。 2.BFC特性及应用 只要元素满足下面任一条件即可触发 BFC 特性： body 根元素 浮动元素：float 除 none 以外的值 绝对定位元素：position (absolute、fixed) display 为
CSS基础-position: absolute绝对定位的默认位置
m0_51757444的博客
05-13 1393
绝对定位position的值为absolute时的默认位置 前言 今天上午练习定位时发现了这么一个东西： 元素设置为绝地定位后不给它添加top时是正常的我想要的结果； 添加top后还需要精确的计算。 正文 感觉你也应该开始好奇默认值是啥了，来一起看看吧： 比如这是我想要的效果 很简陋，但是调试嘛，就先这样吧，不要嫌弃~ 当我鼠标放上去时“阳阳”两个字的下面出现红色的块块， html代码是这样的： <body> <ul> <li class="it
深入理解CSS中的层叠上下文和层叠顺序
qq_37204849的博客
06-18 365
零、世间的道理都是想通的 在这个世界上，凡事都有个先后顺序，凡物都有个论资排辈。比方说食堂排队打饭，对吧，讲求先到先得，总不可能一拥而上。再比如说话语权，老婆的话永远是对的，领导的话永远是对的。 在CSS届，也是如此。只是，一般情况下，大家歌舞升平，看不出什么差异，即所谓的众生平等。但是，当发生冲突发生纠葛的时候，显然，是不可能做到完全等同的，先后顺序，身份差异就显现出来了。例如，杰克
【前端知识之CSS】对BFC的理解
weixin_44337386的博客
05-11 340
本系列主要整理前端面试中需要掌握的知识点。本节介绍对BFC的理解。
CSS Position
03-15
NULL 博文链接：https://sugongqing.iteye.com/blog/323093
【css】display与position
miao5995的博客
02-20 360
position display
CSS定位布局display/float/position属性之间的关系/区别和如何使用取值行为机制
weixin_34405557的博客
10-26 358
float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动;display: inline-block; 有些时候可以替代float实现相同的效果.position: absolute|relative; 要配合top,left等定位; position: absolute会导致元素脱离文档流，被定位的元素等于在文档中不占据任何位置，在另一个层呈现，可以设置z-...
CSS（八） display和position
Oliver尹的博客
07-01 833
display，指元素呈现框的类型 常见的有，display:none|inline|block|inline-block|table... 块级元素block：会新开始一行并且尽可能的撑满容器，并且此元素的前后默认带有换行符，可设置宽高并且显示 例如p,h1,div 行内元素：只占据它对应标签的边框内所包含的空间，此元素强制设置成行内元素，不可设置宽高并同行显示，例如：span bu...
css中的display以及position属性
weixin_34061555的博客
08-30 125
我们都知道,元素分为行内元素和块级元素,在页面布局中,我们常常需要让行内元素具有块级元素的特性,或者使块级元素转换成行内元素,这就要使用我们的display属性了. 　　　我们先定义三个div: 以上的三个div都是块级元素,输出的结果为: 块级元素的特征就是各占一行. 接下来用display将第二个div转换成行内元素:(先看一下几个现象) 1. 结果变成了: ...
CSS Position（定位）
qq_37881565的博客
09-02 232
CSSPosition（定位） position属性指定了元素的定位类型。 position属性的五个值: static relative fixed absolute sticky 元素可以使用的顶部，底部，左侧和右侧属性定位。 static定位 HTML元素的默认值，即没有定位，遵循正常的文档流对象。 静态定位的元素不会受到top，bottom，left，right影响。 <!DOCTYPE html> <html> <head> <m.
关于前端position属性和display属性，这篇文章已足够
岩浆李的游鱼
06-30 6537
在我初学前端的时候，对position和display，尤其是flex特别的混乱，故总结一套，希望能帮助到有需要的同学。这里我想特别告诫一下移动端学习web的同学，例如position:relative，web端叫相对定位，意思是这个属性加在一个元素上，这个元素就使用相对定位的规则在ui上去渲染；而不是和移动端那样设置了相对布局，子布局里都按相对布局去排列，和移动前端还是有很大的差别的，只要记住相对定位和相对布局是有区别的。 一、关于position属性 1.1、position:static 默认值，没
关于CSS中position属性和overflow属性的使用小结
学无止步的博客
08-18 3268
关于CSS中position属性和overflow属性的使用小结 position属性 用于设置某个元素的位置类型。取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这里sticky是CSS3新发布的一个属性。 1、position: static static(没有定位)是position的默认值，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性。 2、position: relative relativ
css position 和 display
09-20
CSS中的position属性用于指定元素的定位方式，常见的取值有relative、absolute和fixed。relative表示相对定位，元素相对于其正常位置进行偏移；absolute表示绝对定位，元素相对于最近的非static定位祖先元素进行定位...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值