首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

大屏页面按需解决适配问题

魔术师 - 巴兹尔·霍金斯前言最近在做一个大屏项目,里面包含整页静态背景图,静态效果图,动态图等内容填充,产品出个思路,UI出个静态设计稿,最终做出来的某大屏页效果大概如下,开发完第一版后,测试发现最大的问题是笔记本屏幕上的效果兼容问题...页面结构一个整页的静态背景图,一个头部标题图,中间六形图,和下面会动的光圈(代码实现的旋转效果),六形左右是四个树形图初版实现方式页面的头部很简单,背景图和标题水平居中,两个条件区域使用绝对定位靠左靠右分别处理根据...UI提供的切图,先把六形图和下面的一个静态背景图和动态光圈位置固定为水平居中,调整上下边,实现整体在屏幕中的位置相对合适基于六形图的位置,把左右四个树形图定位上去最后把文字基于图片位置定位写上去就行了遇到的问题...,解决方案位置异常刚开始做完以后在PC屏幕上看着正常,在浏览器 tab 页签下看的效果,由于是大屏项目,使用F11全屏看了一下效果后,发现六形这部分固定设置的 top 值,在全屏模式下导致整体内容太靠上了由于使用的绝对定位...把中间部分的内容全部放到 div 中,然后设置整个 div 水平垂直居中,这样整体效果不管是电脑屏幕,还是全屏模式看着都在中间位置了内容重叠笔记本上浏览右上角内容重叠了由于中间部分图片都是静态宽高,图片和文字的内容都是根据相对定位进行的处理

16211

深入学习下 CSS 间距相关的知识

因此,在本文中,我将分享关于 CSS 中的间距、实现该间距的不同方法以及何时使用填充的所有信息。 现在,让我们开始吧。 间距类型 CSS 中的间距有两种类型,一种在元素外,另一种在元素内。...具有较大边的元素获胜。 为避免此类问题,建议根据本文使用单向。 更重要的是,CSS Tricks 在 margin-bottom 和 margin-top 之间进行了投票。...负 它可以四个方向的一起使用,在某些用例中非常有用。 让我们假设以下内容: 父级有 padding: 1rem,这导致子级从顶部、左侧和右侧偏移。 但是,子元素应该紧贴其父元素的边缘。...内容卡在边缘! 为了解决这个问题,应该从左右边缘对内容进行填充(哦,看起来填充是一个新词)。...由于文章内容来自 CMS(内容管理系统)无法为元素添加类的降价文件自动生成。 考虑以下包含标题、段落和图像的混合示例。

13.4K40
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    揭示不为人知的CSS

    在这种情况下,它似乎可以感觉到在内容上田间的填充,但实际上,是重新计算宽度以确保一切都适合。 通过比较,设置宽度为“100%”时,不管填充和边框的大小是多少,内容区域都将填充可用空间。...很多人喜欢这个属性,如果你正在建立一个网格系统,任何其他需要水平对齐类型的布局项目,这可以是更直观的工作方式。 重叠意外重叠当时候,真的令人很困惑,因为你不知道发生了什么。...当两个多个相邻的垂直接触时,有时会发生重叠,并且不会用填充边框分隔。如果子元素的边缘扩展到父元素的边缘,并且不会被填充分隔开,那么就会出现重叠的现象。...您需要知道的主要事情是当元素没有填充边框时,垂直可能会重叠。 如果你想了解的更详细, CSS Tricks 有一篇很好的 重叠释义的文章推荐你看一下。...正是这种行为允许多种文本、标题和其他元素对浮动内容进行流式包裹。但有时这是有问题的。清除浮动和建立一个新的块格式化上下文将使容器清除其浮动的子元素。

    1.6K30

    Web 前端 | 面试题 | 笔记

    固定定位 fixed: 元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动。Fixed 定 位使元素的位置文档流无关,因此不占据空间。 Fixed 定位的元素和其他元素重叠。...(脱离文档流) 相对定位 relative: 如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直 水平位置,让这个元素“相对于”它的起点进行移动。...在使用相对定位时,无论是 否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。...important 声明 > 其它 2.3 CSS 盒子模型 CSS 盒模型本质上是一个盒子,它包括:,边框,填充和实际内容。...的值不为visible BFC的使用场景 去除重叠现象 清除浮动(让父元素的高度包含子浮动元素) 避免某元素被浮动元素覆盖 避免多列布局由于宽度计算四舍五入而自动换行 3.

    74740

    使用CSS实现底部固定广告Banner自适应内容区域

    技术博客:使用CSS实现底部固定广告Banner自适应内容区域在网页设计中,经常需要处理底部固定元素(如广告Banner)页面内容之间的布局问题。...本篇文章将详细介绍如何使用纯CSS(不依赖JavaScript)来实现一个高度自适应的页面内容区域和一个始终固定在页面底部的广告Banner,同时确保两者不会重叠。...分配空间内容区域:使用flex: 1;属性,这会使内容区域自动扩展以填充所有可用空间(除了底部广告Banner所占用的空间)。底部广告Banner:不需要特别设置高度,因为它将根据其内容自动调整大小。...修正position: absolute;的副作用使用position: absolute;会将元素从文档流中移除,这可能导致内容区域广告Banner重叠。...为了解决这个问题,我们需要为内容区域设置一个明确的底部边界,这可以通过为内容区域添加一个内边(padding-bottom)来实现,该内边广告Banner的高度相匹配(尽管广告Banner的高度是未知的

    16610

    网页元素定位的详细解读

    元素会根据top、right、bottom、left属性进行位置偏移,并且也会脱离文档流,具有绝对定位类似的影响。 不同的包含块:固定定位的元素的包含块绝对定位不同。...可以通过设置具体的像素值使用相对单位来确定宽度高度。 设置距离为 0:将元素的左右(上下,如果是垂直方向上的居中)距离设置为 0。...当z-index为负数时,如果遇到常规流元素浮动元素,这个定位元素会被覆盖。 五、补充说明 绝对定位固定定位的元素类型:绝对定位和固定定位的元素一定是块盒。...这意味着它们会像块级元素一样占据一行空间,可以设置宽度、高度、内外边等属性。 浮动的关系:绝对定位和固定定位的元素一定不是浮动。它们不会参与浮动布局,也不会受到浮动元素的影响。...外边合并问题:绝对定位和固定定位的元素没有外边合并的情况。这与常规流中的块盒和行盒不同,在常规流中,块盒之间可能会发生外边合并。

    18210

    CSS3入门

    : 外边(margin):是元素元素之间的距离,或者是元素外面留出的一段空白 内边(padding):元素里的内容元素边框之间的距离 边框(border):元素本身 内容(content):元素中放置的东西...) 内边 内边(padding):设置内容边框之间的距离 外边 外边(margin):设置元素之外的距离 盒子大小计算 box-sizing box-sizing:指定计算盒子宽高的方式,...clear:both进行浮动清除 双伪元素法 双伪元素是after伪元素的升级方法 核心原理:利用CSS3的新特性自动创建before和after两个伪元素,再使用clear:both进行浮动清处...、静态定位 偏移:top、left、fight、bottom 静态定位(static) 就是无定位,无法使用便宜来调整盒子的位置。...固定定位 固定定位就是将盒子定位到页面的固定位置 固定定位也是投标,只认浏览器的可视窗口 { position: fixed; } 堆叠 定位会让盒子重叠,后面的盒子会压住前面的盒子 z-index

    1.6K10

    web前端技术讲解之CSS中position的定位技术

    绝对定位:position:absolute (1) 绝对定位是将元素依据已经定位(绝对、固定相对定位)的离他最近的祖先元素进行定位,祖先元素没有定位没有祖先元素则默认依据body浏览器窗口定位。...绝对定位必须用left、right、top、bottom属性之一激活,用于指定元素左、右、上、下外边距离已定位祖先元素(浏览器)左、右、上、下内边框的距离。...绝对定位元素定位后相对祖先元素的位置不在变化,若页面内容较多拖动页面滚动时,定位元素会随页面一起滚动。 绝对定位元素重叠覆盖其他元素时可用z-index属性设置他们的叠放次序。 ? 2....固定定位:position:fixed 固定定位绝对定位absolute相似,定位后元素也生成为新块级盒框、覆盖新位置原有元素,在正常文档流中所占的原空间关闭被后续元素使用。 ?...固定定位绝对定位absolute的区别是定位的元素无论父元素是否定位都会直接在浏览器窗口中定位,不会随滚动条拖动页面而滚动,固定定位用left、right、top、bottom指定浏览器左、右、上、下各向中心的偏移量作为定位元素外边位置

    86710

    css负之详解

    10px;} 但是当你将负设置为相对bottom/right时,它并不会把元素向下右拉,相反,它会把后面的元素往里面拉,从而覆盖自己。...比如有一列宽度100%,另一列有固定的宽度,比如说100px。...如果负和宽度一样大的话,它就会被完全覆盖掉。因为外边,内边,边框和内容加起来等于元素的宽度。如果负外边等于元素的宽度的话,那么该元素的宽度就会变成0px。...使用会比使用相对定位好很多,因为你只需要给新的一列的第一个元素添加负即可。酷吧,哈哈哈 重叠来强调 ? 故意重叠元素也是一种很好地设计隐喻。重叠效果可以增强深度感从而为突出特定元素。...就不需要浪费很多贷款来加载大的图片来实现这个效果啦 简单的两列布局 负也是在流式布局中创建简单一列宽度固定,一列内容为宽度的100%的两列布局的好方法。

    1.9K80

    css负之详解

    10px;} 但是当你将负设置为相对bottom/right时,它并不会把元素向下右拉,相反,它会把后面的元素往里面拉,从而覆盖自己。...比如有一列宽度100%,另一列有固定的宽度,比如说100px。...如果负和宽度一样大的话,它就会被完全覆盖掉。因为外边,内边,边框和内容加起来等于元素的宽度。如果负外边等于元素的宽度的话,那么该元素的宽度就会变成0px。...使用会比使用相对定位好很多,因为你只需要给新的一列的第一个元素添加负即可。酷吧,哈哈哈 重叠来强调 ? 故意重叠元素也是一种很好地设计隐喻。重叠效果可以增强深度感从而为突出特定元素。...就不需要浪费很多贷款来加载大的图片来实现这个效果啦 简单的两列布局 负也是在流式布局中创建简单一列宽度固定,一列内容为宽度的100%的两列布局的好方法。

    2.2K40

    前端课程——盒子模型

    相关概念 内容区(content) 用于显示文本和图像 内边(padding) 内容区至边框的 边框(border) 内容区的边界 外边(margin) 两个元素的之间的距离...内边 内边不能设置颜色 颜色元素的背景颜色保持一致....使用margin即可. div{ margin:0 auto; } 固定写法,其中0表示上下 auto表示左右....盒子模型的类型 块级元素 可以设置宽高 内联元素 水平方向的内边有效的 - 控制文本内容在水平方向的位置 垂直方向的内边有效的 - 文本内容的位置没有变化,内边向上和向下进行扩展 垂直方向的外边无效的...该模型设置元素在HTML页面中所占区域为盒子的大小+外边。. ? 外边常见的问题 外边重叠 外边重叠的问题只出现在上外边和下外边中 左外边和右外边之间不存在外边重叠 ?

    1.1K10

    前端成神之路-定位

    结论:要实现以上效果,标准流浮动都无法快速实现 pink老师一句话说出定位: 将盒子定在某一个位置 自由的漂浮在其他盒子(包括标准流和浮动)的上面 所以,我们脑海应该有三种布局机制的上下顺序...父元素要有定位 将元素依据最近的已经定位(绝对、固定相对定位)的父元素(祖先)进行定位。 ?...哈根达斯分析 一个大的 div 中包含 3 张图片; 大的 div 水平居中; 2 张小图片重叠在广告图片上方 —— 脱标,不占位置,需要使用绝对定位; 2 张小图片分别显示在左上角和右下角 —— 需要使用偏移确定准确位置...案例小结: 子绝父相 —— 子元素使用绝对定位,父元素使用相对定位; 浮动的对比: 绝对定位:脱标,利用偏移指定准确位置; 浮动:脱标,不能指定准确位置,让多个块级元素在一行显示。...案例小结: 固定定位的应用场景:固定在浏览器可视窗口某个位置的布局; 在使用固定和绝对定位时,如果盒子中没有内容,需要指定宽度(稍后就讲)。

    1.9K20

    CSS 面试要点:盒模型

    (dom).width/height 取得最终渲染后的宽高 dom.getBoundClientRect().width/height 取得最终渲染后的宽高,还可以取得相对于视窗的上下左右的距离 # 重叠...只有普通文档流中的垂直外边才会发生折叠,行内元素、浮动元素绝对定位之间的外边不会发生折叠。...# 使用 BFC 解决重叠问题 块格式化上下文(Block Formatting Context,BFC) (opens new window) 是 Web 页面的可视 CSS 渲染的一部分,是块级盒子的布局过程发生的区域...BFC 决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。当设计到可视化布局的时候,BFC 提供了一个环境,HTML 元素在这个环境中按照一定的规则进行布局。...# BFC 渲染规则 BFC 元素垂直方向的会发生重叠,属于不同 BFC 外边不会发生重叠 BFC 的区域不会与浮动元素的布局重叠 BFC元素是一个独立的容器,外面的元素不会影响里面的元素,里面的元素也不会影响外面的元素

    57460

    CSS简单入门

    目录 一、css的介绍 CSS引入 CSS选择器 CSS选择器-浮动 布局-盒子 布局-相对定位 布局-固定定位和重叠 布局-CSS练习 最近视频看的差不多了,就是一直没总结,这几天在上班之余,偷偷地总结吧...边框用于将边缘和其他框分开 margin:外边,表示框的边缘相邻框之间的距离,也称为页空白 padding:内边,表示框内容和边框之间的空间 一 边框的三种定义: 然后就是内边 和外边...会相对于游览器进行定位。 一般父元素,要开启相对定位,若父元素开启定位,会相对于父元素进行定位 通常都是配合left,right,botton,top使用。...只需要使用两个就可以对一个元素进行定位,一个水平,一个竖直。...固定定位 position:fixed 相对于浏览器窗口进行定位 固定定位的元素,将脱离文档流,不占用空间 当页面滚动时,元素始终出现在浏览器的固定位置上 <title

    60240

    定位(position)

    在静态定位状态下,无法通过偏移属性(top、bottom、leftright)来改变元素的位置。...父级有定位 绝对定位是将元素依据最近的已经定位(绝对、固定相对定位)的父元素(祖先)进行定位。 子绝父相 这个“子绝父相”太重要了,是我们学习定位的口诀,时时刻刻记住的。...首先, 绝对定位是将元素依据最近的已经定位绝对、固定相对定位)的父元素(祖先)进行定位。...四种定位总结 定位模式 是否脱标占有位置 是否可以使用偏移 移动位置基准 静态static 不脱标,正常模式 不可以 正常模式 相对定位relative 不脱标,占有位置 可以 相对自身位置移动(自恋型...块级元素添加绝对定位后固定定位后,如果不给宽高,默认是内容的大小**

    1.3K30

    css布局使用

    上一种方法相比,本种方法是通过定位来实现侧栏的位置固定。 如果中间栏含有最小宽度限制,或是含有宽度的内部元素,则浏览器窗口小到一定程度,主面板侧栏会发生重叠。...通过负将浮动的侧栏拉上来,左侧栏的负为100%,刚好是窗口的宽度,因此会从主面板下面的左边跑到主面板对齐的左边,右侧栏此时浮动在主面板下面的左边,设置负为负的自身宽度刚好浮动到主面板对齐的右边...由于侧栏的负margin都是相对主面板的,两个侧栏并不会像我们理想中的停靠在左右两,而是跟着缩小的主面板一起向中间靠拢。此时使用相对布局,调整两个侧栏到相应的位置。...主面板部分优先渲染(一般主面板会比侧栏内容重要)。 当面板的main内容部分比两的子面板宽度小的时候,布局就会乱掉。可以通过设置main的min-width属性使用双飞翼布局避免问题。...设置 负,sub设置负左边为100%,extra设置负左边为负的自身宽度。 设置main的margin值给左右两个子面板留出空间。

    1.9K90

    HTMLCSS 常见面试题汇总

    ; :定义独立的内容; :定义页面主区域之外的内容,比如侧边栏; :定义元素的标题,一般被放置在元素内的第一个最后一个位置处...9、请写出多种等高布局 假等高布局:使用背景图片,在列的父元素上使用这个背景图进行Y轴的铺放,从而实现一种等高列的假象 给容器div使用单独的背景色(固定布局、流体布局):用元素中的最大高度撑大其他的容器高度...javascript控制DOM去改变样式的时候,只能使用link方式,因为@import只有CSS才能识别,DOM无法控制; 12、position的absolutefixed共同点不同点?...外部样式表,使用 标签引入一个外部CSS样式 内部样式表,将CSS代码放在 标签内部 内联样式,将CSS样式直接定义在HTML元素内部 24、什么是外边重叠?...重叠的结果是什么? 外边重叠就是margin-collapse; 在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边可以结合成一个单独的外边

    1.6K20
    领券