文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

【移动端网页布局】Flex 弹性布局案例 ② ( 顶部固定定位搜索栏 | 固定定位盒子居中对齐 | 二倍精灵图设置 | CSS3 中的垂直居中对齐 )

一、顶部固定定位搜索栏 需求 : 制作如下搜索栏 ; 1、固定定位盒子居中对齐 首先 , 设置固定定位 , 固定定位盒子始终显示在浏览器中指定的位置 , 与父容器或其它容器无关 ; /* 固定定位盒子始终显示在浏览器中指定的位置...top: 0; 再后 , 设置 left: 50% 样式 , 将盒子左侧设置到中心位置 , 这个 50% 是相对于父容器的 比例 , 也就是浏览器 ; /* 将固定定位的盒子在页面中居中对齐...先将盒子左侧设置到中心位置 注意 : 这个 50% 是相对于父容器的 也就是浏览器 */ left: 50%; 最后 , 整个盒子模型向左走自身宽度的一半 , 此处还要配置兼容老版本浏览器的样式...左侧搜索栏设置成 flex: 1 样式 自动占据剩余空间 */ display: flex; /* 固定定位盒子始终显示在浏览器中指定的位置 与父容器或其它容器无关 *.../ position: fixed; /* 固定定位盒子位置紧贴顶部 */ top: 0; /* 将固定定位的盒子在页面中居中对齐 先将盒子左侧设置到中心位置

7.3K20

HTML & CSS页面布局之定位

绝对定位的偏移量是相对于其有定位属性的第一个祖先元素的。 d) fixed 固定定位，固定定位和绝对定位相似，但它的偏移量固定的相对于浏览器窗口。...在使用绝对定位时有两个注意点：第一个是如果网页宽高较大时（大于浏览器可视区宽高），并且元素最终相对于body定位了，实际上它只是相对浏览器首屏的宽高进行偏移，而不是整个网页的宽高。...div{ position:fixed; top:100px; left:50px; } 固定定位的元素相对于浏览器视口偏移，和绝对定位的元素一样，它会脱离标准文档流，并且浏览器把他们一致视作块级元素。...两列布局 左侧定宽右侧自适应宽度的两列布局常用方式有下面几种： 1，左边脱离标准流，右边使用margin属性使其偏移 .left{ width:200px; float:left;...圣杯布局和双飞翼布局的区别：除了HTML代码结构不同外，圣杯布局的center宽度即为内容区宽度，left和right靠在其两边。双飞翼布局的center宽度等于内容区宽度加left和right宽度。

7.3K10
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    CSS实用技巧（中）

    ，具有以下特性： 计算BFC高度时，浮动元素也参与计算 属于同一BFC容器的元素垂直方向的margin会合并 BFC容器是独立容器，不会影响外部元素的布局 利用BFC的特性，我们可以实现以下功能： 清除浮动...div class="blue"> red inner 自适应布局 左侧固定...left/top/right/bottom都有值的定位 当对立位置（left与right，top与bottom）都设置值且元素没用固定宽高 此时元素的宽高是根据元素位置决定的，张鑫旭大佬在《CSS世界》...style> 这种行为特性对于我们做自适应布局非常有用，而且兼容性非常好，比如我们要做左侧固定宽度...这个时候你会发现，元素的宽高时以width/height为准，上述说的格式化宽度、高度并没有生效。

    2.4K40

    【移动端网页布局】流式布局案例 ④ ( Banner 栏制作 | 固定定位 | 标准流 | 百分比宽度设置 )

    , 搜索栏还需要保持 不管如何进行滚动 , 始终悬浮在最上方 ; 搜索栏 必须是同 固定定位 , 才能实现上述效果 ; 搜索栏 父容器 样式如下 : /* 下面是搜索栏样式 */ .search-wrap.../* 清除浮动的固定样式 如果要为某个容器清除浮动 为其设置 class="clearfix" 样式 */ content: ""; display: block...nth-child(2) img { /* 在 10% 宽度的 Logo 盒子中 图片的宽度是 30 像素 高度没有给出 但是 宽高等比例缩放 高度也是 30 像素 */...44px; } .search-btn::before { /* 在 指定的标签元素内部的 前面 插入内容 */ /* 左侧按钮盒子中 插入 三 图片 */ content:...垂直居中 */ line-height: 44px; } .search { /* 中间部位搜索栏盒子内容 */ /* 子绝父相 该容器的子容器需要绝对定位 因此父容器设置为相对定位

    4.3K20

    10.HarmonyOS Next布局进阶：嵌套Flex容器与空间分配策略

    ： 宽度占满父容器（100%） 有内边距（16px） 浅灰色背景（#F5F5F5） 子项均匀分布（SpaceEvenly） 方向和对齐方式根据状态变化 4.3 内层容器（导航项Flex） 每个导航项都是一个垂直方向的...(24) .height(24) Text('首页') .fontSize(12) } 这些内层容器的特点： 固定垂直方向（Column） 没有显式设置对齐方式，...5.1 容器尺寸设置 .width('100%') .height(200) 通过设置容器的宽度和高度，我们可以控制容器在父容器中占用的空间。...常见的设置方式包括： 设置方式 描述 示例 固定像素 设置固定的像素值 .width(200) 百分比 相对于父容器的百分比 .width('50%') 自适应 根据内容自动调整 不设置宽高 填充剩余空间...： 外层容器：通过width('100%')占满可用宽度 内边距：通过padding(16)控制内容与容器边缘的距离 子项间距：通过space属性控制导航项之间的间距 子项大小：图标尺寸固定为24x24

    1.2K10

    仓颉布局系统深度解析：从基础机制到工程化实践

    从工程实践角度看，开发者需要理解约束传递的单向性。子组件不能突破父容器施加的约束，这意味着如果父容器设置了固定宽度，子组件无论如何设置都无法超出这个范围。...Row { // 左侧固定宽度 Sidebar().width(200) // 中间弹性区域，添加最大宽度约束 Expanded(flex: 1) {...绝对定位则允许精确控制子组件的位置，通过top、left、right、bottom属性指定相对于Stack容器的偏移量。但绝对定位会脱离正常的布局流，不参与约束传递，这意味着父容器无法感知其尺寸。...自适应网格的算法实现 固定列数的网格实现相对简单，但在跨设备场景下，固定列数会导致手机和平板显示效果差异巨大。仓颉提供的GridAdaptive模式通过设置最小列宽，让系统自动计算最佳列数。...这种自适应算法的核心思想是：在满足最小列宽约束的前提下，最大化利用可用空间。 从性能角度看，自适应网格的布局计算成本高于固定网格，因为需要在每次容器尺寸变化时重新计算列数和列宽。

    41010

    css基础样式2

    positionx = (容器的宽度-图片宽度)*percentx positiony = (容器的高度-图片高度)*percenty [left center right] [top center bottom...参数 fixed 此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。 local 此关键字表示背景相对于元素的内容固定。...scroll 此关键字表示背景相对于元素本身固定， 而不是随着它的内容滚动（对元素边框是有效的）。...二，display：inline-block 1.即呈现出inline的特性（不占据一整行，宽度由内容决定） 2.又呈现出block的特性（可以设置宽高，内外边距） 3.还有缝隙问题 两个行内元素并排放时...必须使用vertical-align: top;才能让inlineblock元素垂直方向能对齐 基线对齐的内容，比较复杂。

    2.1K40

    【CSS】绝对定位元素设置 水平 垂直 居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 )

    : auto; 样式的方式 令盒子水平居中 ; 举例说明 : 绝对定位 的元素 需要居中对齐的地方很多 , 如下图所示 , 右侧的 固定定位 按钮 , 需要在浏览器中居中对齐 , 轮播图中的 五个小圆点...的容器需要居中对齐 ; 二、绝对定位 居中设置 ---- 1、设置固定尺寸 使 绝对定位 元素 水平 / 垂直 居中 最简单的方法就是 使用标尺测量父容器的宽高 , 通过设置四个边的边偏移量 , 设置元素...水平 / 垂直 居中 ; 2、先偏移50%再回退固定值 父容器 盒子 如果尺寸发生了改变 , 使用上述固定边偏移的方式设置的居中就会出现问题 ; 先设置 50% 的 宽度 / 高度 偏移量 , 然后再往回退...盒子一半 宽度 / 高度 的偏移量 ; 以 水平居中为例 : 200 x 200 大小的盒子 , 通过设置 首先 , 设置 left 左边偏移为 50% , 让子元素的左侧 移动到 父容器水平中心位置...; left: 50%; 然后 , 设置 负数的 左外边距 , 令 子元素 向左移动 自身 宽度的一半 , 需要提前测量 子元素的宽度 ; margin-left: -100px; 三、绝对定位元素

    5.8K40

    【CSS】CSS 总结 ⑦ ( 定位 | 静态定位 | 相对定位 | 绝对定位 | 子绝父相 | 固定定位 | 使用绝对定位设置水平垂直居中 | 堆叠顺序 | 显示模式 | 元素隐藏 ) ★

    , 则相对于父容器的坐标进行定位 ; 如果 父容器没有定位 , 则相对于浏览器左上角位置进行定位 ; 再次引申 , 如果父容器没有定位 , 则查找父容器的父容器 是否有定位 , 如果有则相对于爷爷容器进行定位...按钮 , 需要在浏览器中居中对齐 , 轮播图中的 五个小圆点 的容器需要居中对齐 ; 1、设置固定尺寸 使 绝对定位 元素 水平 / 垂直 居中 最简单的方法就是 使用标尺测量父容器的宽高 , 通过设置四个边的边偏移量..., 设置元素 水平 / 垂直 居中 ; 2、先偏移50%再回退固定值 父容器 盒子 如果尺寸发生了改变 , 使用上述固定边偏移的方式设置的居中就会出现问题 ; 先设置 50% 的 宽度 / 高度 偏移量..., 然后再往回退 盒子一半 宽度 / 高度 的偏移量 ; 以 水平居中为例 : 200 x 200 大小的盒子 , 通过设置 首先 , 设置 left 左边偏移为 50% , 让子元素的左侧 移动到...父容器水平中心位置 ; left: 50%; 然后 , 设置 负数的 左外边距 , 令 子元素 向左移动 自身 宽度的一半 , 需要提前测量 子元素的宽度 ; margin-left: -100px

    4.2K10

    17个场景，带你入门CSS布局

    又如这样的布局：两个元素在一行，左侧元素固定宽200px，右侧元素撑满剩余空间。固定宽200px，撑满剩余空间是大小。两个元素在一行是位置。 下面，我们从大小和位置两个方面，结合场景来看CSS布局。...场景01 元素的宽高是固定值 给元素设置固定的宽高，只需设置。如: width: 100px; height: 100px; 注意：给行内元素设置宽高值不会生效。...场景03 撑满父元素的剩余可用宽度 撑满父元素的剩余可用宽度的常见的具体场景是：页面左右结构，左侧是固定宽度的菜单导航，右侧是撑满剩余部分的主题内容。如下图： ? 下面列举2种实现方法。...绝对定位元素水平居中时，距定位元素左侧的值为 50%*定位元素宽度 - 50%*元素宽度。...多个元素占一行(或列)或多行(或列)，居中对齐，居右对齐，弹性的宽度或高度。都可以用Flex布局来实现。 元素相对父元素定位或相对页面定位。可以用Position来实现。 实现宽高和设备宽度有关。

    4.1K20

    【移动端网页布局】流式布局案例 ③ ( 实现搜索栏功能 | 伪元素选择器 | 子绝父相 | 外边距塌陷处理 | 二倍精灵图处理方案 )

    , 如果 拉长浏览器的宽度 , 搜索栏也会跟着拉长 ; 实现自动伸缩的效果 : HTML 标签结构如下 : 最外层的父容器 父容器内部两个半圆形的子容器 ; 中间部分可自动伸缩的子容器盒子 半圆子容器...390 x 44 像素 , 该父容器的高度是 44 像素 ; 由于设备宽度不同 , 这里不设置宽度 , 让宽度自适应即可 ; css 样式实例 : .search-btn { /* 左侧按钮布局...垂直居中 */ line-height: 44px; } 5、搜索栏盒子 搜索栏盒子 高度是 44 像素 , 宽度一定不要设置 , 让该盒子自适应自动缩放宽度 ; 该容器中 , 只需要利用中间部分内容即可.../* 中间部位搜索栏盒子内容 */ /* 子绝父相 该容器的子容器需要绝对定位 因此父容器设置为相对定位 */ position: relative; /* 搜索框高度 30 像素.../* 清除浮动的固定样式 如果要为某个容器清除浮动 为其设置 class="clearfix" 样式 */ content: ""; display: block

    4.8K30

    Web-CSS

    text-align 并不控制块元素自己的对齐，只控制它的行内内容的对齐。...：相对于包含块的宽度，以百分比值为外边距。...content-box：是默认值，设置border和padding均会增加元素的宽高。 border-box：设置border和padding不会改变元素的宽高，而是挤占内容区域。...取值： flex-start：元素向主轴起点对齐。 flex-end：元素向主轴终点对齐。 center：元素在侧轴居中。 stretch：弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。...center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的垂直轴起点边和第一行的距离相等于容器的垂直轴终点边和最后一行的距离。 stretch：拉伸所有行来填满剩余空间。

    10.5K20

    【移动端网页布局】流式布局案例 ⑤ ( 连续排列的链接图片 | 设置盒子圆角 | 超出部分隐藏 | 设置浮动布局 | 精确计算浮动元素宽度避免换行 | 设置图片宽度自适应 )

    /* 清除浮动的固定样式 如果要为某个容器清除浮动 为其设置 class="clearfix" 样式 */ content: ""; display: block.../ 设备宽度 的 8% */ width: 8%; } .app ul li:nth-child(1) img { /* 设置关闭按钮的图像宽度 该图片自动水平 / 垂直对齐 */...nth-child(2) img { /* 在 10% 宽度的 Logo 盒子中 图片的宽度是 30 像素 高度没有给出 但是 宽高等比例缩放 高度也是 30 像素 */...44px; } .search-btn::before { /* 在 指定的标签元素内部的 前面 插入内容 */ /* 左侧按钮盒子中 插入 三 图片 */ content:...垂直居中 */ line-height: 44px; } .search { /* 中间部位搜索栏盒子内容 */ /* 子绝父相 该容器的子容器需要绝对定位 因此父容器设置为相对定位

    6K20

    【移动端网页布局】流式布局案例 ⑥ ( 多排按钮导航栏 | 设置浮动及宽度 | 设置图片样式 | 设置文本 )

    /* 清除浮动的固定样式 如果要为某个容器清除浮动 为其设置 class="clearfix" 样式 */ content: ""; display: block.../ 设备宽度 的 8% */ width: 8%; } .app ul li:nth-child(1) img { /* 设置关闭按钮的图像宽度 该图片自动水平 / 垂直对齐 */...nth-child(2) img { /* 在 10% 宽度的 Logo 盒子中 图片的宽度是 30 像素 高度没有给出 但是 宽高等比例缩放 高度也是 30 像素 */...44px; } .search-btn::before { /* 在 指定的标签元素内部的 前面 插入内容 */ /* 左侧按钮盒子中 插入 三 图片 */ content:...垂直居中 */ line-height: 44px; } .search { /* 中间部位搜索栏盒子内容 */ /* 子绝父相 该容器的子容器需要绝对定位 因此父容器设置为相对定位

    7.6K40

    冷门布局方法 tabel-cell 的可行性研究

    ，虽然它们在不同的容器中，且不用管当前列容器设置的 padding 是多少，它们在水平方向上是绝对对齐的。...两栏自适应布局 即左侧宽度固定，右侧自动分配剩余空间：        * {            box-sizing: border-box;        }        ...             左侧宽度固定，右侧宽度自适应。...下面说一说关于百分比宽高的结论：1. 高度设置百分比无效，只与内容的实际高度有关 2. 宽度设置百分比分两种情况， * 一种是父容器设置 display:table;，这种情况下分两种情况 1....在其前面有其他元素时，其宽度可以按照 display:inline-block 的元素来计算，也就是宽度会小于等于其百分比计算值的宽度的 * 在父容器未设置 table时，width 的百分比值可以理解为内容区宽度加上

    1.5K20

    掌握组件锚点布局：打造灵活精准的UI定位系统

    每个组件可以相对于容器边界或其他组件进行定位，从而实现复杂的布局效果。...2.1 锚点布局的核心概念 锚点(Anchor): 用于定位的参考点，可以是容器本身或其他组件 对齐规则(AlignRules): 定义组件如何相对于锚点对齐 组件ID: 为组件分配唯一标识，使其可以被其他组件作为锚点引用...具体来说： 顶部对齐左上按钮的底部，实现垂直方向的相对定位 左侧对齐右上按钮的左侧，实现水平方向的相对定位 右侧对齐父容器右侧，确保按钮宽度能够延伸到容器右边界 4....与__container__等效，代表父容器 组件ID 引用具有特定ID的其他组件 4.2 对齐方式 对齐方式定义了组件如何相对于锚点对齐： 方向 对齐方式 说明 水平方向 HorizontalAlign.Start...实际应用场景 锚点布局在以下场景中特别有用： 复杂表单布局：标签和输入框的精确对齐 自适应卡片设计：内容根据容器大小自动调整位置 悬浮按钮定位：相对于屏幕边缘或其他UI元素定位 动态内容布局：当某些内容可能显示或隐藏时

    75010

    【Web前端】深入CSS 布局

    inline-block：结合了​​block​​和​​inline​​的特性，元素本身是行内元素，但可以设置宽高等属性。 none：完全隐藏元素，元素不占据任何空间。...通过设置​​float: left;​​或​​float: right;​​​，可以使元素分别浮动到父容器的左侧或右侧。... 在这个例子中，图片浮动到左侧，文本则环绕在图片右侧。 需要注意的是，浮动元素之后的内容通常会出现“塌陷”问题，即元素的父容器高度会变为0。...固定定位（Fixed） 固定定位的元素相对于浏览器窗口进行定位，即使页面滚动，元素也会保持在固定位置。...题1：创建一个三栏布局 使用Flexbox创建一个响应式三栏布局，其中左栏和右栏固定宽度，中间栏自适应剩余空间。

    3.1K10
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券