web前端css定位position和起浮float

简介: div、h1或p元素常常被称为块级元素。这意味着这些元素显现为一块内容,即“块框”。与之相反,span和h3等元素称为“行内元素”,这是由于它们的内容显现内行中,即“行内框”。

div、h1或p元素常常被称为块级元素。这意味着这些元素显现为一块内容,即“块框”。与之相反,span和h3等元素称为“行内元素”,这是由于它们的内容显现内行中,即“行内框”。

         在这种状况下,这个框称为无名块框,由于它不与专门界说的元素相关联。

        块级元素的文本行也会发作相似的状况。假设有一个包括三行文本的阶段。每行文本构成一个无名框。无法直接对无名块或行框运用款式,由于没有能够运用款式的地方(留意,行框和行内框是两个概念)。可是,这有助于了解在屏幕上看到的全部东西都构成某种框。

CSS定位机制

        CSS有三种基本的定位机制:普通流、起浮和肯定定位。

        除非专门指定,不然全部框都在普通流中定位。也就是说,普通流中的元素的方位由元素在X(HTML)中的方位决议。

        块级框从上到下一个接一个地摆放,框之间的笔直间隔是由框的笔直外边距计算出来。

        行内框在一行中水平安置。能够运用水平内边距、边框和外边距调整它们的间隔。可是,笔直内边距、边框和外边距不影响行内框的高度。由一行构成的水平框称为行框(LineBox),行框的高度总是足以包容它包括的全部行内框。不过,设置行高能够添加这个框的高度。

        在下面,咱们会为您详细解说相对定位、肯定定位和起浮。

CSS position特点

        经过运用position特点,咱们能够挑选4中不同类型的定位,这会影响元素框生成的方法。

position特点值的意义:

 static

        元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创立一个或多个行框,置于其父元素中。

 relative

        元素框偏移某个间隔。元素仍坚持其未定位前的形状,它本来所占的空间仍保留。

  absolute

        元素框从文档流完全删去,并相对于其包括块定位。包括块可能是文档中的另一个元素或者是初始包括块。元素原先在正常文档流中所占的空间会封闭,就好像元素本来不存在相同。元素定位后生成一个块级框,而不管本来它在正常流中生成何种类型的框。

  fixed

        元素框的体现相似于将position设置为absolute,不过其包括块是视窗自身。

        提示:相对定位实际上被看作普通流定位模型的一部分,由于元素的方位相对于它在普通流中的方位。

   CSS定位特点

        CSS定位特点答应你对元素进行定位。

    特点描绘

        position把元素放置到一个静态的、相对的、肯定的、或固定的方位中。

        top界说了一个定位元素的上外边距鸿沟与其包括块上鸿沟之间的偏移。

        right界说了定位元素右外边距鸿沟与其包括块右鸿沟之间的偏移。

        bottom界说了定位元素下外边距鸿沟与其包括块下鸿沟之间的偏移。

        left界说了定位元素左外边距鸿沟与其包括块左鸿沟之间的偏移。

        overflow设置当元素的内容溢出其区域时发作的工作。

        clip设置元素的形状。元素被剪入这个形状之中,然后显现出来。

        vertical-align设置元素的笔直对齐方法。

        z-index设置元素的堆叠次序。

        CSS为定位和起浮供给了一些特点,运用这些特点,能够树立列式布局,将布局的一部分与另一部分堆叠,还能够完结多年来一般需求运用多个表格才干完结的使命。

        定位的基本思想很简单,它答应你界说元素框相对于其正常方位应该呈现的方位,或者相对于父元素、另一个元素乃至浏览器窗口自身的方位。明显,这个功用十分强壮,也很让人吃惊。要知道,用户署理对CSS2中定位的支撑远胜于对其它方面的支撑,对此不该感到奇怪。

        另一方面,CSS1中初次提出了起浮,它以Netscape在Web开展初期添加的一个功用为根底。起浮不完满是定位,不过,它当然也不是正常流布局。咱们会在后边的章节中清晰起浮的意义。

全部皆为框

        p、h1或p元素常常被称为块级元素。这意味着这些元素显现为一块内容,即“块框”。与之相反,span和h3等元素称为“行内元素”,这是由于它们的内容显现内行中,即“行内框”。

        您能够运用display特点改动生成的框的类型。这意味着,经过将display特点设置为block,能够让行内元素(比方元素)体现得像块级元素相同。还能够经过把display设置为none,让生成的元素底子没有框。这样的话,该框及其全部内容就不再显现,不占用文档中的空间。

        可是在一种状况下,即便没有进行显式界说,也会创立块级元素。这种状况发作在把一些文本添加到一个块级元素(比方p)的最初。即便没有把这些文本界说为阶段,它也会被当作阶段对待

 

  

目录
相关文章
|
9天前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
20 2
|
6天前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
10天前
|
前端开发 JavaScript
Bootstrap Web 前端 UI 框架
Bootstrap 是快速开发 Web 应用程序的前端工具包。
24 3
|
10天前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
16 3
|
10天前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
25 2
|
11天前
|
开发框架 前端开发 JavaScript
Web前端框架
Web前端框架等名词
15 2
|
21天前
|
人工智能 前端开发
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
|
24天前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
122 1
|
23天前
|
存储 前端开发 JavaScript
从 Web 2.0 到 Web 3.0:前端开发的历史与未来
【10月更文挑战第4天】本文探讨了从 Web 2.0 到 Web 3.0 的前端开发演变过程。Web 2.0 时代,前端开发者从静态网页设计走向复杂交互,技术框架如 jQuery、React 和 Vue 带来了巨大的变革。而 Web 3.0 以区块链技术为核心,带来了去中心化的互联网体验,前端开发者面临与区块链交互、去中心化身份验证、分布式存储等新挑战。文章总结了 Web 2.0 和 Web 3.0 的核心区别,并为开发者提供了如何应对新技术的建议,帮助他们在新时代中掌握技能、设计更安全的用户体验。
48 0
从 Web 2.0 到 Web 3.0:前端开发的历史与未来
|
24天前
|
前端开发 JavaScript 开发者
web前端需要学什么
web前端需要学什么
下一篇
无影云桌面