文章目录

一、顶部固定定位搜索栏
- 1、固定定位盒子居中对齐
- 2、设置最大宽度和最小宽度
- 3、使用 Flex 弹性布局管理宽度
- 4、二倍精灵图设置
- 5、CSS3 中的垂直居中对齐 - 行高 = 内容高度 ( 总高度 - 边框高度 - 内边距高度 )
二、代码示例
- 1、HTML 标签结构
- 2、CSS 样式
- 3、展示效果

一、顶部固定定位搜索栏

需求 : 制作如下搜索栏 ;

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、二倍精灵图设置

下图中的放大镜图片和头像图标都定义在精灵图中 ,

二倍精灵图设置步骤 :

缩小精灵图 : 在 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、展示效果

标签 css, 居中, 搜索栏

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