web前端-CSS(display,position,overflow和浮动float)

简介: display(显示)display属性指定由元素生成的框的类型,通常用到display对应值有block、none、inline这三个值。下面我们来看看display的属性有哪些吧。

文章目录

display(显示)

内联元素

块级元素

行内块级元素

三者区别

position(定位)

position属性

static属性

relative属性

fixed属性

absolute属性

sticky属性

五个属性的实例讲解

overflow(溢出)

hidden

scroll

auto

overflow-x和overflow-y

float(浮动)

none

left

right

inherit

display(显示)

display属性指定由元素生成的框的类型,通常用到display对应值有block、none、inline这三个值。


下面我们来看看display的属性有哪些吧。


image.png

image.png

内联元素

比如:b、big、i、small、tt、abbr、acronym、cite、code、dfn、em、kbd、strong、samp、var、a、bdo、br、img、map、object、q、script、span、sub、sup、button、input、label、select、textarea等。


内联元素特点:


和其他元素都在一行上;


宽高只与内容有关;


行内元素只能容纳文本或者其他行内元素。


块级元素

比如:address、article、aside、audio、blockquote、canvas、dd、div、dl、fieldset、figcaption、figure、footer、form、h1、header、hgroup、hr、noscript、ol、 output、p pre、 section 、table、 tfoot、ul、video等。


块级元素特点:


总是在新行上开始,占据一整行;


宽高,行高以及外边距和内边距都可控制;


若不设置宽则宽为浏览器宽度,与内容无关;


它可以容纳内联元素和其他块元素。


行内块级元素

三者区别

90dcaff8ee304f5e929db0e44cfd8851.png

position(定位)

  • static
  • relative
  • fixed
  • absolute
  • sticky

position属性


image.png

static属性

HTML 元素默认情况下的定位方式为 static(静态)。静态定位的元素不受 top、bottom、left 和 right 属性的影响。position: static; 的元素不会以任何特殊方式定位;它始终根据页面的正常流进行定位.


relative属性

position: relative; 的元素相对于其正常位置进行定位。设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。


fixed属性

position: fixed; 的元素是相对于视口定位的,这意味着即使滚动页面,它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。固定定位的元素不会在页面中通常应放置的位置上留出空隙。


absolute属性

position: absolute; 的元素相对于最近的定位祖先元素进行定位(而不是相对于视口定位,如 fixed)。然而,如果绝对定位的元素没有祖先,它将使用文档主体(body),并随页面滚动一起移动。

注意:“被定位的”元素是其位置除 static 以外的任何元素。


sticky属性

粘性元素根据滚动位置在相对(relative)和固定(fixed)之间切换。起先它会被相对定位,直到在视口中遇到给定的偏移位置为止 ,然后将其“粘贴”在适当的位置


五个属性的实例讲解

1.static

image.png

image.png

3.fixed

fixed就是根据当前窗口来定位的,当滑动页面时,不随页面下拉而变动。10181090cc004ce19bd83ae5f7641eb1.gif

image.png

5.sticky

6b4e13c5b77c41f0a2dcbabda0230288.gif

css和html

a1ec4bce226148f6b3bcbe8a9b2fc634.png

image.png

hidden

如果使用 hidden 值,溢出会被裁剪,其余内容被隐藏。

7227878471ea46719ab055e0f624c471.png

scroll

如果将值设置为 scroll,溢出将被裁剪,并添加滚动条以便在框内滚动。请注意,这将在水平和垂直方向上添加一个滚动条。

dedd0b6613bb4f459b07eb1de7919b04.png

auto

auto 值类似于 scroll,但是它仅在必要时添加滚动条.


overflow-x和overflow-y

overflow-x 和 overflow-y 属性规定是仅水平还是垂直地(或同时)更改内容的溢出


overflow-x 指定如何处理内容的左/右边缘。

overflow-y 指定如何处理内容的上/下边缘。


image.png

float(浮动)

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

image.png

none

27c1b9f876c940699501beafb9788019.png

left

97814153784e430e8dd3b52ea773dce8.png

right

d0796d32fe27454cbe50644f50a3adcd.png

inherit

c3c7e56eb27f4f9ba33bab860e668dd4.png


目录
打赏
0
0
0
0
3
分享
相关文章
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
|
1月前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
55 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
《前端技术基础》第02章 CSS基础【合集】
层叠样式表(Cascading Style Sheets,简称CSS)是一种用于描述网页视觉表现的语言。该语言与HTML协同工作,其中HTML负责构建网页的结构,而CSS则负责定义网页的外观和格式。CSS通过一系列规则来实现样式的应用,这些规则由选择器(Selectors)和声明块(Declaration Blocks)构成。选择器的作用是明确指出哪些HTML元素将受到特定样式规则的影响,而声明块则包含了具体的样式声明,这些声明定义了元素的视觉属性和相应的值。
87 1
揭秘!前端大牛们如何巧妙利用CSS3,打造炫酷视觉效果!
【10月更文挑战第31天】前端开发面临复杂布局的挑战,本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求,而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局,帮助开发者构建高性能、用户友好的网页应用。
108 4
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
562 1
基于Flink CDC 开发,支持Web-UI的实时KingBase 连接器,三大模式无缝切换,效率翻倍!
TIS 是一款基于Web-UI的开源大数据集成工具,通过与人大金仓Kingbase的深度整合,提供高效、灵活的实时数据集成方案。它支持增量数据监听和实时写入,兼容MySQL、PostgreSQL和Oracle模式,无需编写复杂脚本,操作简单直观,特别适合非专业开发人员使用。TIS率先实现了Kingbase CDC连接器的整合,成为业界首个开箱即用的Kingbase CDC数据同步解决方案,助力企业数字化转型。
81 5
基于Flink CDC 开发,支持Web-UI的实时KingBase 连接器,三大模式无缝切换,效率翻倍!
Python 高级编程与实战:深入理解 Web 开发与 API 设计
在前几篇文章中,我们探讨了 Python 的基础语法、面向对象编程、函数式编程、元编程、性能优化、调试技巧以及数据科学和机器学习。本文将深入探讨 Python 在 Web 开发和 API 设计中的应用,并通过实战项目帮助你掌握这些技术。
|
5月前
|
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
324 3
如何在项目中高效地进行 Web 组件化开发
高效地进行 Web 组件化开发需要从多个方面入手,通过明确目标、合理规划、规范开发、加强测试等一系列措施,实现组件的高效管理和利用,从而提高项目的整体开发效率和质量,为用户提供更好的体验。
133 63
Django框架适合开发哪种类型的Web应用程序?
Django 框架凭借其强大的功能、稳定性和可扩展性,几乎可以适应各种类型的 Web 应用程序开发需求。无论是简单的网站还是复杂的企业级系统,Django 都能提供可靠的支持,帮助开发者快速构建高质量的应用。同时,其活跃的社区和丰富的资源也为开发者在项目实施过程中提供了有力的保障。
190 62

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等