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

这篇具有很好参考价值的文章主要介绍了【移动端网页布局】Flex 弹性布局案例 ② ( 顶部固定定位搜索栏 | 固定定位盒子居中对齐 | 二倍精灵图设置 | CSS3 中的垂直居中对齐 )。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。





一、顶部固定定位搜索栏



需求 : 制作如下搜索栏 ;

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


1、固定定位盒子居中对齐


首先 , 设置固定定位 , 固定定位盒子始终显示在浏览器中指定的位置 , 与父容器或其它容器无关 ;

    /* 固定定位盒子始终显示在浏览器中指定的位置 与父容器或其它容器无关 */
    position: fixed;

然后 , 设置固定定位盒子垂直方向位置 , 设置为 top: 0; 紧贴顶部 ;

    /* 固定定位盒子位置紧贴顶部 */
    top: 0;

再后 , 设置 left: 50% 样式 , 将盒子左侧设置到中心位置 , 这个 50% 是相对于父容器的 比例 , 也就是浏览器 ;

    /* 将固定定位的盒子在页面中居中对齐
       先将盒子左侧设置到中心位置
       注意 : 这个 50% 是相对于父容器的 也就是浏览器 */
    left: 50%;

最后 , 整个盒子模型向左走自身宽度的一半 , 此处还要配置兼容老版本浏览器的样式 ;

    /* 兼容老版本浏览器 */
    -webkit-transform: translateX(-50%);
    /* 向左走盒子自身宽度的一半 */
    transform: translateX(-50%);

2、设置最大宽度和最小宽度


在移动端网页中 , 一般都要设置一个 最大宽度最小宽度 ;

  • 当浏览器的宽度超过最大宽度 , 则网页布局最大就是该 最大宽度 , 继续放大网页不再随着页面一起放大 ;
  • 当浏览器的宽度小于最小宽度 , 则网页布局最小就是该 最小宽度 , 继续缩小显示布局布局 ;
    /* 设置最大和最小宽度 */
    min-width: 320px;
    max-width: 640px;

3、使用 Flex 弹性布局管理宽度


在搜索框中 , 左侧是搜索栏 , 右侧是搜索按钮 ;

  • 右侧的搜索按钮始终都是 44x44 像素大小 ;
  • 左侧的搜索栏随着网页布局的宽度变化而变化 ;

此处 使用 Flex 弹性布局管理宽度 , 右侧的按钮直接设置一个固定大小 , 左侧的搜索框设置 flex: 1; 样式 , 也就是 自动占据剩余空间 ;

Flex 子项目的 flex 样式默认都为 0 , 只要有一个子项目设置了 flex: 1; 样式 , 那么该子项目就会自动占据剩余的所有空间 ;


4、二倍精灵图设置


下图中的 放大镜图片 和 头像图标 都定义在精灵图中 ,
【移动端网页布局】Flex 弹性布局案例 ② ( 顶部固定定位搜索栏 | 固定定位盒子居中对齐 | 二倍精灵图设置 | CSS3 中的垂直居中对齐 )

二倍精灵图设置步骤 :

  • 缩小精灵图 : 在 Firework 中 , 将精灵图缩小一半 ;
  • 测量坐标 : 在缩小一半的精灵图中测量坐标 ;
  • 设置代码 : 将代码中的 background-size 缩小一半 , 也就是精灵图缩小一半 ;

插入的放大镜精灵图 :

.search::before {
    /* 使用伪元素方式 插入 搜索栏放大镜图片 */
    content: "";
    /* 绝对布局 */
    position: absolute;
    /* 令该图片放置在中间偏上位置 */
    top: 5px;
    left: 5px;
    /* 设置图片宽高 */
    width: 15px;
    height: 15px;
    /* 设置二倍精灵图 : 该图片在缩小一倍的精灵图的 59, 279 位置, 
       设置背景时将精灵图
            向左移动 59 像素 
            向上移动 279 像素 */
    background: url(../images/sprite.png) no-repeat -59px -279px;
    /* 这里涉及到了精灵图缩放 原图 208 像素 此处设置为 104 像素 */
    background-size: 104px auto;
}

插入的头像精灵图 :

.user::before {
    /* 使用伪元素方式 插入 用户栏头像图片 */
    content: "";
    /* 设置显示样式 流式布局 块级元素 上方设置按钮 会自动将文字挤到下面显示 */
    display: block;
    /* 设置图标的宽高 */
    width: 23px;
    height: 23px;
    /* 设置二倍精灵图 : 该图片在缩小一倍的精灵图的 59, 194 位置, 
       设置背景时将精灵图
            向左移动 59 像素 
            向上移动 194 像素 */
    background: url(../images/sprite.png) no-repeat -59px -194px;
    /* 这里涉及到了精灵图缩放 原图 208 像素 此处设置为 104 像素 */
    background-size: 104px auto;
    /* 设置用户信息按钮外边距 */
    margin: 4px auto -2px;
}

5、CSS3 中的垂直居中对齐 - 行高 = 内容高度 ( 总高度 - 边框高度 - 内边距高度 )


普通盒子模型中 , 设置垂直居中对齐时 , 直接设置 内容高度 = 行高 即可 ;

由于采用的是 CSS3 样式 , 该模式下 , 设置的 height 高度 = 内容高度 + 边框高度 + 内边距 ;

如果要设置垂直居中 , 只能设置其中的 行高 = 内容高度 , 要把 2 像素的边框去掉 ;

因此在该 CSS3 样式中 , 高度设置为 26 像素 , 其中包括了 24 像素的内容高度 , 2 像素的边框高度 ( 上下边框各 1 像素 ) ;

    /* 设置 高度 = 26 行高 = 24 像素 垂直居中
       设置行高 = 26 会偏下
       上面的设置 高度 不等于 行高 原因是 这是 CSS3 模型
       CSS3 中的垂直居中是在 边框 + 内边距 + 尺寸 的总高度中垂直居中 */
    height: 26px;
    line-height: 24px;

完整代码示例 :

.search {
    /* 搜索框样式 */
    /* 子绝父相 放大镜图标子元素设置绝对定位 父容器需要设置相对定位 */
    position: relative;
    /* 设置 高度 = 26 行高 = 24 像素 垂直居中
       设置行高 = 26 会偏下
       上面的设置 高度 不等于 行高 原因是 这是 CSS3 模型
       CSS3 中的垂直居中是在 边框 + 内边距 + 尺寸 的总高度中垂直居中 */
    height: 26px;
    line-height: 24px;
    border: 1px solid #ccc;
    /* 设置该搜索框占据除右侧固定大小按钮之外的剩余父容器空间 */
    flex: 1;
    /* 设置文字大小和颜色 */
    font-size: 12px;
    color: #666;
    /* 设置搜索框的内外边距 */
    margin: 7px 10px;
    padding-left: 25px;
    /* 设置搜索框圆角矩形半径 */
    border-radius: 5px;
    /* 设置盒子模型阴影 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}




二、代码示例




1、HTML 标签结构


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <title>Flex 弹性布局案例</title>
</head>

<body>
    <!-- 顶部固定定位搜索栏 - 不随着页面滑动而消失 -->
    <div class="search-index">
        <!-- 搜索栏提示内容 -->
        <div class="search">输入搜索信息</div>
        <!-- 搜索栏右侧按钮 -->
        <a href="#" class="user">我 的</a>
    </div>
</body>

</html>

2、CSS 样式


body {
    /* 网页布局宽度 = 设备宽度 */
    width: 100%;
    /* 最小宽度 320 像素 */
    min-width: 320px;
    /* 最大宽度 640 像素 */
    max-width: 640px;
    /* 居中对齐 */
    margin: 0 auto;
    /* 字体大小 14 像素 */
    font-size: 14px;
    /* 如果是苹果就是用苹果默认字体 
       如果不是苹果手机 就使用后啊面的字体 */
    font-family: -apple-system, Helvetica, sans-serif;
    /* 字体颜色 */
    color: #000;
    /* 行高 */
    line-height: 1.5;
    /* 水平方向超出隐藏 */
    overflow-x: hidden;
}


/*点击高亮我们需要清除清除  设置为transparent 完成透明*/

* {
    -webkit-tap-highlight-color: transparent;
}


/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/

input {
    -webkit-appearance: none;
}


/*禁用长按页面时的弹出菜单*/

img,
a {
    -webkit-touch-callout: none;
}

a {
    color: #000;
    /* 取消链接的下划线样式 */
    text-decoration: none;
}

ul {
    /* 设置列表的默认样式 */
    margin: 0;
    padding: 0;
    /* 去掉小圆点 */
    list-style: none;
}

img {
    /* 图片与文字对齐样式 默认是与文字基线对齐 */
    vertical-align: middle;
}

div {
    /* css3 盒子模型 */
    box-sizing: border-box;
}

.clearfix:after {
    /* 清除浮动样式 */
    content: "";
    display: block;
    line-height: 0;
    visibility: hidden;
    height: 0;
    clear: both;
}


/* 上面是 CSS 的默认样式, 每个 CSS 文件都有上述样式, 下面开始就是正式样式 */


/* 顶部固定定位搜索栏样式 */

.search-index {
    /* 将其内部设置成 弹性布局 
       右侧的按钮设置固定大小 
       左侧搜索栏设置成 flex: 1 样式 自动占据剩余空间 */
    display: flex;
    /* 固定定位盒子始终显示在浏览器中指定的位置 与父容器或其它容器无关 */
    position: fixed;
    /* 固定定位盒子位置紧贴顶部 */
    top: 0;
    /* 将固定定位的盒子在页面中居中对齐
       先将盒子左侧设置到中心位置
       注意 : 这个 50% 是相对于父容器的 也就是浏览器 */
    left: 50%;
    /* 兼容老版本浏览器 */
    -webkit-transform: translateX(-50%);
    /* 向左走盒子自身宽度的一半 */
    transform: translateX(-50%);
    /* 固定的盒子模型必须设置宽度 */
    width: 100%;
    /* 设置最大和最小宽度 */
    min-width: 320px;
    max-width: 640px;
    /* 设置高度 */
    height: 44px;
    /* 设置盒子背景颜色 */
    background-color: #F6F6F6;
    /* 设置上下边框 */
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.search {
    /* 搜索框样式 */
    /* 子绝父相 放大镜图标子元素设置绝对定位 父容器需要设置相对定位 */
    position: relative;
    /* 设置 高度 = 26 行高 = 24 像素 垂直居中
       设置行高 = 26 会偏下
       上面的设置 高度 不等于 行高 原因是 这是 CSS3 模型
       CSS3 中的垂直居中是在 边框 + 内边距 + 尺寸 的总高度中垂直居中 */
    height: 26px;
    line-height: 24px;
    border: 1px solid #ccc;
    /* 设置该搜索框占据除右侧固定大小按钮之外的剩余父容器空间 */
    flex: 1;
    /* 设置文字大小和颜色 */
    font-size: 12px;
    color: #666;
    /* 设置搜索框的内外边距 */
    margin: 7px 10px;
    padding-left: 25px;
    /* 设置搜索框圆角矩形半径 */
    border-radius: 5px;
    /* 设置盒子模型阴影 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}

.search::before {
    /* 使用伪元素方式 插入 搜索栏放大镜图片 */
    content: "";
    /* 绝对布局 */
    position: absolute;
    /* 令该图片放置在中间偏上位置 */
    top: 5px;
    left: 5px;
    /* 设置图片宽高 */
    width: 15px;
    height: 15px;
    /* 设置二倍精灵图 : 该图片在缩小一倍的精灵图的 59, 279 位置, 
       设置背景时将精灵图
            向左移动 59 像素 
            向上移动 279 像素 */
    background: url(../images/sprite.png) no-repeat -59px -279px;
    /* 这里涉及到了精灵图缩放 原图 208 像素 此处设置为 104 像素 */
    background-size: 104px auto;
}

.user {
    /* 用户栏样式 */
    width: 44px;
    height: 44px;
    /* 设置文字大小为 12 像素 */
    font-size: 12px;
    /* 设置文本居中 */
    text-align: center;
    /* 设置文本颜色 */
    color: #2eaae0;
}

.user::before {
    /* 使用伪元素方式 插入 用户栏头像图片 */
    content: "";
    /* 设置显示样式 流式布局 块级元素 上方设置按钮 会自动将文字挤到下面显示 */
    display: block;
    /* 设置图标的宽高 */
    width: 23px;
    height: 23px;
    /* 设置二倍精灵图 : 该图片在缩小一倍的精灵图的 59, 194 位置, 
       设置背景时将精灵图
            向左移动 59 像素 
            向上移动 194 像素 */
    background: url(../images/sprite.png) no-repeat -59px -194px;
    /* 这里涉及到了精灵图缩放 原图 208 像素 此处设置为 104 像素 */
    background-size: 104px auto;
    /* 设置用户信息按钮外边距 */
    margin: 4px auto -2px;
}

3、展示效果


【移动端网页布局】Flex 弹性布局案例 ② ( 顶部固定定位搜索栏 | 固定定位盒子居中对齐 | 二倍精灵图设置 | CSS3 中的垂直居中对齐 )文章来源地址https://www.toymoban.com/news/detail-449736.html

到了这里,关于【移动端网页布局】Flex 弹性布局案例 ② ( 顶部固定定位搜索栏 | 固定定位盒子居中对齐 | 二倍精灵图设置 | CSS3 中的垂直居中对齐 )的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • web前端之使用弹性和外边距进行网页布局、非常有用的小技巧、flex、margin、auto

    图中效果只需要flex和margin便可以实现。 1、d_f: display: flex; 2、fw_w: flex-wrap: wrap; 3、m_a: margin: auto; 4、ml_a: margin-left: auto; 5、mr_a: margin-right: auto; 3、item类名比较特殊,所以单独定义,涉及到变量,不属于公共样式 4、其他类名基本是见名知意,不做过多叙述

    2024年02月20日
    浏览(55)
  • Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影

    目录 CSS盒子模型 概念 弹性盒模型(flex box) 内容 父元素上的属性 display属性 flex-direction属性 justify-content属性 align-items属性 子元素上的属性 flex 文档流(标准流) 浮动 定义 浮动的原理 清除浮动 浮动的副作用 父元素设置高度 overflow清除浮动 伪对象方式 定位 定义 相对定位

    2024年02月11日
    浏览(62)
  • 【移动端网页布局】流式布局 ① ( 流式布局简介 | 百分比布局 / 非固定像素布局 | 根据屏幕尺寸 / 设备类型自动调整网页布局 )

    流式布局 又称为 百分比布局 / 非固定像素布局 ; 为 流式布局 中 盒子模型 设置 百分比宽度 , 其大小可以根据屏幕宽度自适应伸缩 , 该盒子没有像素限制 , 内容自动向左右两边填充 ; 流式布局 可以 根据 设备屏幕尺寸 和 设备类型 自动调整 网页布局 和 标签元素大小 , 以适应

    2024年02月03日
    浏览(46)
  • flex 弹性布局

    任何一个容器都可以指定为 Flex 布局。 行内元素也可以使用 Flex 布局。 注意 :设为 Flex 布局以后,子元素的 float 、 clear 和 vertical-align 属性将失效。 采用 Flex 布局的元素,称为 Flex 容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为 Flex 项目(

    2024年02月14日
    浏览(45)
  • Flex 弹性盒子布局

    可以少去理解一些不必要的概念,而多去思考为什么会有这样的东西,它解决了什么问题,或者它的运行机制是什么? Flex 是 Flexible Box 的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。比如: 容器、项目的理解? 采用

    2024年01月17日
    浏览(56)
  • flex弹性布局详细介绍

    这里提供一个可以边学习边玩的flex学习网站:弹性盒青蛙 Flex布局是指弹性布局,其中Flex是Flexible Box的缩写,用来为盒状模型提供最大的灵活性。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文将介绍几种常见属性使用方法,以后也将不断更新补充(也欢迎

    2023年04月15日
    浏览(46)
  • flex布局(弹性盒子)–详谈2

    这是小编接着flex布局(弹性盒子)–详谈进行续写,帮助各位快速上手熟悉flex布局! flex 属性用于指定弹性子元素如何分配空间。 flex:none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ] 各个值解析: none:none的计算值为: 0 0 auto [ flex-grow ]:定义弹性盒子元素的扩展比率。

    2024年03月20日
    浏览(47)
  • 9-web前端 flex弹性布局

    1、flex弹性布局 设置方式:给父元素设置 display: flex,子元素可以自动挤压或拉伸   组成部分:     弹性容器     弹性盒子     主轴:默认在水平方向     侧轴 / 交叉轴:默认在垂直方向   例如:   2、主轴对齐方式   属性名:justify-content     属性值 效果 flex

    2024年02月08日
    浏览(45)
  • html中的flex是什么?——弹性布局

    在HTML中,flex是一种布局方式,用于处理容器中的子元素的布局。它是CSS3的一部分,也被称为弹性布局。 通过使用flex布局,可以将容器中的子元素进行灵活的定位和扩展,以适应不同的屏幕尺寸和设备。它提供了一种简单而强大的方法来创建响应式的网页布局。 使用flex布局

    2024年01月17日
    浏览(42)
  • 前端弹性布局神器display:flex【转】

    本文内容摘自博文 :https://www.cnblogs.com/qingchunshiguang/p/8011103.html、https://blog.csdn.net/ababab12345/article/details/119612918 在进行网页前端设计时,需要垂直居中显示文本,但CSS似乎没有明确的垂直居中的代码方法,由于目前的页面不再考虑以前的浏览器了,因此采用CSS3的display:flex方法

    2024年02月08日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包