html开发核心display、overflow、position

最新推荐文章于 2024-06-04 09:42:38 发布
原创 最新推荐文章于 2024-06-04 09:42:38 发布 · 1.3w 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨HTML的display属性如何决定元素类型，overflow属性处理内容溢出，以及position属性的relative、absolute、fixed和sticky的不同用途。重点讲解了这些在前端开发中的关键作用和应用实例。

html开发核心display、overflow、position

在这里插入图片描述

display

在这里插入图片描述
在这里插入图片描述

说白了，就是决定你这个输入的，到底是行还是块，还是行内块等等···决定了你的这个div或者别的，是个什么样的形式存在于这个页面，block块占据了一整行，inline后设置的叫做内联元素，也就是一行一行的，空白的位置不占位置，但是block有空白的行【比如同一行或多行左边有图片，右边空白的，block全部占据，不让别人放置东西】，全部占据！inline-block可以设置长宽属性。

overflow

在这里插入图片描述
在这里插入图片描述

说白了，就是你的图片比你的div框架还大，咋办呢？设置属性就在于此，但是一般我都不希望我的图片比框架更大，然后超出去很难看，可以看一下我的另一篇文章，说css图片自适应怎么完成的

position

在这里插入图片描述
在这里插入图片描述

relative

在这里插入图片描述

relative不用多说

absolute

在这里插入图片描述

absolute和fix区别在这
在这里插入图片描述
展示一下 。

在这里插入图片描述
在这里插入图片描述

滚动到下面，看到了absolute可以滚动，只是绝对定位而已。

fixed

在这里插入图片描述
无法滚动！看不见了！

sticky

还有一个sticky属性

在这里插入图片描述

用的比较多就是用来做导航栏的

在这里插入图片描述

其次请看

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
说明指定position后，元素处于漂浮状态，不占据位置！

Day 42/100（网易笔试）position跟display，margin collapse叠加使用会怎么样
xinghuowuzhao的博客
09-11 445
写在前面的话 功不唐捐，努力不会白费 在面试的过程中，复习过的经常会碰到~ （一）题目： position跟display，margin collapse，overflow，float这些特性叠加使用会怎么样？ （二）分类讨论 1、position,display和float 1）如果一个元素的display属性被设置为none，那么就不会生成元素对应的box，这种情况下，float和position被忽略 2）否则（display非none），如果一个元素的position属性被.
CSS之㉔display/visibility/overflow元素隐藏和显示·总结
笔岸柳影
02-17 590
CSS之㉔display/visibility/overflow属性控制元素隐藏和显示·总结 QQ:3020889729 小蔡display属性（隐藏元素不会占用原位置）——用的比较多disp...
Html学习: position & overflow
weixin_30545285的博客
07-30 175
Position属性可以用来给元素定位. 它和left, right, top, bottom属性们一起确定元素的位置. 光指定left, right, top, bottom是不行滴, 不管是绝对还是相对都得有个参照物, position这个属性在我的理解就是指定用谁做参照物的. Positioning:position可以有四个值,static(默认), relative, fixed &am...
CSS中的Position属性 overflow 属性
QQ79054467(u014750697的博客)
06-03 1115
很重要，有以下几个值：static，relative，absolute，fixed。 Static：静态定位。如果你没有设置position属性，那么缺省就是static。top，left，bottom，right等属性，在static的情况下是无效的，要使用这些属性，必须把position设置为其他三个值之一。 Relative：相对定位。元素将按照静态定位时的位置进行调整，在静态定
position跟display、overflow、float这些特性相互叠加后会怎么样？
weixin_38167363的博客
09-17 741
display属性规定元素应该生成的框的类型；position属性规定元素的定位类型；float属性是一种布局方式，定义元素在哪个方向浮动。类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。 转载于:https://www.cnblo...
CSS学习总结（七）：静态定位、相对定位(relative)、绝对定位(absolute)、固定定位、 粘性定位、display 显示、overflow 溢出、visibility 可见性
weixin_62764364的博客
12-07 3241
我们先来看一个效果，同时思考一下用标准流或浮动能否实现类似的效果？场景1： 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子.场景2：当我们滚动窗口的时候，盒子是固定屏幕某个位置的。结论：要实现以上效果，标准流 或 浮动都无法快速实现所以：1.浮动可以让多个块级盒子一行没有缝隙排列显示， 经常用于横向排列盒子。2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。静态定位是元素的默认定位方式，无定位的意思。
HTML定位
weixin_52173610的博客
08-30 6971
在 HTML 中，可以使用 CSS 来对元素进行定位。常见的定位方式有相对定位(relative)，绝对定位(absolute)，固定定位(fixed)，和粘性定位(sticky)。- 相对定位(relative)：元素相对于其正常位置进行定位，通过 top、bottom、left、right 属性来指定偏移量。- 绝对定位(absolute)：元素相对于其最近的已定位祖先元素(非 static 定位)进行定位，或者相对于文档的初始坐标定位。
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 7792
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
「前端+鸿蒙」核心技术HTML5+CSS3（十三）
最新发布
拥抱AI Design
06-04 1296
（Media Queries）是CSS3中引入的一个功能，它允许根据不同的媒体类型和特性来应用不同的CSS样式。在响应式布局中，媒体查询用于创建不同屏幕尺寸下的布局规则。（Block Formatting Context，块级格式化上下文）是CSS中一个重要的布局概念。BFC为页面上的一个隔离区域，其中布局和定位不会受到外部环境的影响。在设计响应式布局时，通常会根据设备宽度设置一些关键的断点（阈值）。在产品网站中，BFC可以用于解决布局问题，如防止浮动元素与文本重叠、创建自适应两栏布局等。
文档流html开发中遇到的高度塌陷 浮动 定位产生的问题,.pptx
12-10
创建BFC的一个简单方法是将所有浮动元素放入一个容器`<div>`中，并给这个容器设置`overflow:hidden`或`display:flow-root`，这将使其内部形成一个新的BFC，从而避免高度塌陷问题。 另一种解决浮动导致的高度塌陷的...
overflow不一定能隐藏元素（position:absolute）
liufeng520的专栏
05-17 1万+
为了页面的健壮性，我们常常需要使用overflow:hidden。有时候是为了防止布局被撑开，有时候是为了配合其它规则实现文字截断，还有时候纯粹是为了创建块级上下文。但是，很多人对这个属性       为了页面的健壮性，我们常常需要使用overflow:hidden。有时候是为了防止布局被撑开，有时候是为了配合其它规则实现文字截断，还有时候纯粹是为了创建块级上下文。        但是，很
Position、overflow标签
weixin_30596735的博客
09-28 292
Position属性 　　position属性决定浏览器定位方式，有以下几种类型： 　　相对定位：relative。相对于文本框中对象的位置放置 　　绝对定位：absolute，相对于页面左上角的位置放置 　　静态定位：static。用于将层定位在文本自身的位置 overflow属性 　　overflow用于确定层的内容超出层的大小时的处理方式，有以下几种选项 　　 ...
HTML5中网页布局及display属性重点总结
热门推荐
妖精小狗的博客
08-25 2万+
常见网页布局：   标准文档流： 标准文档流：指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式   标准文档流组成： 块级元素（block）：&lt;h1&gt;…&lt;h6&gt;、&lt;p&gt;、&lt;div&gt;、列表 内联元素（inline）：&lt;span&gt;、&lt;a&gt;、&lt;img/&gt;、
position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？
stone10086的博客
07-29 869
这是寒冬大神提出的一个题目，刚开始看到这题的时候完全不知道从什么地方回答起好，题目内容比较广泛，找不到针对点。后来我觉得这个题目应该能拆成几个点来回答：1、’display’、’position’ 和 ‘float’ 的相互关系；2、position跟display、overflow、float下的margin collapse。一、’display’、’position’ 和 ‘float’ 的相
浅谈overflow的属性之间区别
m0_48056329的博客
06-14 1430
根据菜鸟网文档里面显示 overflow属性有四个值(除开继承inherit)：visible (默认), hidden, scroll, 和auto。下面先展示一下几个属性的效果。 visible (默认)：超出内容不会被隐藏，会呈现在元素框之外。 hidden：内容会被剪切，超出元素框的内容被隐藏。 scroll：超出元素框内容会被隐藏，但是浏览器会显示滚动条以便查看其余的内容（不管内容超没有超出元素框，滚动条都会存在）。 auto：如果有内容超出元素框时候，内容会被隐藏，但是浏览器会显示滚动条以
绝对定位display:absolute如何实现垂直居中？
Qlly
03-11 5136
首先设置一个父元素（.parent）和一个子元素（.child）的样式。 CSS代码： .parent { position: relative; width: 200px; height: 200px; background-color: #eee; } .child { width: 70px; height: 70px; position: absolute; back...
关于CSS中position属性和overflow属性的使用小结
学无止步的博客
08-18 3505
关于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
overflow 与 position定位之间的影响
hd07220的博客
12-07 2612
绝对定位元素不总是被父级 overflow 属性裁剪，尤其当 overflow 在绝对定位元素及其包含块之间的时候。 overflow 元素同时也是定位元素时，绝对定位的子元素会被裁切； overflow 元素和绝对定位元素之间有定位元素（relative），也会被裁切； 中间不论隔多少层，只要不存在定位元素，那个定位祖先的 overflow 始终可以裁切 absolute 子元素，即使中间元素也添加了 overflow，也只会被定位祖先裁切 ...
css position的定位与overflow.浮动
不起眼的小学生
12-09 897
static定位，即没有定位，元素正常的出现在流中,不会受到top,left,right,bottom的影响。 fixed定位：相对于浏览器窗口是固定位置，与文档流无关，因此不占据空间。即使窗口滚动也不会移动。 relative定位：相对定位元素的定位是相对其正常的位置。 absolute定位：绝对定位的元素的位置是相对于最近的已定位的父元素。 若没有已定位的父元素，则是相对于html ...
掌握HTML&CSS核心属性：display、visibility与overflow
在HTML与CSS的学习过程中，`display`属性是一个非常核心的属性，它用于定义元素的显示方式。`display`属性有多种不同的值，每种值控制元素以不同的方式展现： 1. **block**：表示元素将显示为块级元素，独占一行，...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

い风花の雪栎

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值