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)的最初。即便没有把这些文本界说为阶段,它也会被当作阶段对待

 

  

目录
相关文章
|
4月前
|
并行计算 前端开发 JavaScript
Web Worker:让前端飞起来的隐形引擎
在现代 Web 开发中,前端性能优化是一个至关重要的课题,尤其是对于计算密集型的应用,如图像处理、视频处理、大规模数据分析等任务。单线程的 JavaScript 引擎常常成为性能瓶颈,导致应用变得迟缓。Web Worker,作为一种强大的技术,使得前端能够在后台进行并行计算,从而实现高效的任务处理,不影响主线程的运行和用户的交互体验。
456 108
|
2月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
position定位(核心) 我们讲盒模型的时候,提到了3个属性可以用来控制页面排版。 三大属性:position属性,display属性,float属性。 position 属性控制页面上元素间的位置关系。 display 属性控制页面元素是否显示或者是堆叠还是并排显示。 float 属性提供控制方法。 通过float这种控制方法,可以实现多栏布局,导航菜单等等。 position属性是干嘛用的?怎么用?有哪些属性值? position属性控制页面上元素间的位置关系,也就是排版。 怎么用?要知道怎么用
408 0
|
6月前
|
Web App开发 编解码 移动开发
零基础音视频入门:你所不知道的Web前端音视频知识
本文回顾了Web端音视频的发展历程,同时还介绍了视频的编码、帧率、比特率等概念,提到了Canvas作为视频播放的替代方案,以及FFmpeg在音视频处理中的重要作用等知识。
207 1
|
10月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
298 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
284 6
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
197 5
|
2月前
|
算法 Java Go
【GoGin】(1)上手Go Gin 基于Go语言开发的Web框架,本文介绍了各种路由的配置信息;包含各场景下请求参数的基本传入接收
gin 框架中采用的路优酷是基于httprouter做的是一个高性能的 HTTP 请求路由器,适用于 Go 语言。它的设计目标是提供高效的路由匹配和低内存占用,特别适合需要高性能和简单路由的应用场景。
272 4
|
6月前
|
缓存 JavaScript 前端开发
鸿蒙5开发宝藏案例分享---Web开发优化案例分享
本文深入解读鸿蒙官方文档中的 `ArkWeb` 性能优化技巧,从预启动进程到预渲染,涵盖预下载、预连接、预取POST等八大优化策略。通过代码示例详解如何提升Web页面加载速度,助你打造流畅的HarmonyOS应用体验。内容实用,按需选用,让H5页面快到飞起!
|
6月前
|
JavaScript 前端开发 API
鸿蒙5开发宝藏案例分享---Web加载时延优化解析
本文深入解析了鸿蒙开发中Web加载完成时延的优化技巧,结合官方案例与实际代码,助你提升性能。核心内容包括:使用DevEco Profiler和DevTools定位瓶颈、四大优化方向(资源合并、接口预取、图片懒加载、任务拆解)及高频手段总结。同时提供性能优化黄金准则,如首屏资源控制在300KB内、关键接口响应≤200ms等,帮助开发者实现丝般流畅体验。
|
前端开发 JavaScript Shell
鸿蒙5开发宝藏案例分享---Web页面内点击响应时延分析
本文为鸿蒙开发者整理了Web性能优化的实战案例解析,结合官方文档深度扩展。内容涵盖点击响应时延核心指标(≤100ms)、性能分析工具链(如DevTools时间线、ArkUI Trace抓取)以及高频优化场景,包括递归函数优化、网络请求阻塞解决方案和setTimeout滥用问题等。同时提供进阶技巧,如首帧加速、透明动画陷阱规避及Web组件初始化加速,并通过优化前后Trace对比展示成果。最后总结了快速定位问题的方法与开发建议,助力开发者提升Web应用性能。

热门文章

最新文章