【移動(dòng)端網(wǎng)頁布局】Flex 彈性布局案例 ② ( 頂部固定定位搜索欄 | 固定定位盒子居中對齊 | 二倍精靈圖設(shè)置

這篇具有很好參考價(jià)值的文章主要介紹了【移動(dòng)端網(wǎng)頁布局】Flex 彈性布局案例 ② ( 頂部固定定位搜索欄 | 固定定位盒子居中對齊 | 二倍精靈圖設(shè)置 | CSS3 中的垂直居中對齊 )。希望對大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

一、頂部固定定位搜索欄

需求 : 制作如下搜索欄 ;

【移動(dòng)端網(wǎng)頁布局】Flex 彈性布局案例 ② ( 頂部固定定位搜索欄 | 固定定位盒子居中對齊 | 二倍精靈圖設(shè)置 | CSS3 中的垂直居中對齊 )

1、固定定位盒子居中對齊

首先 , 設(shè)置固定定位 , 固定定位盒子始終顯示在瀏覽器中指定的位置 , 與父容器或其它容器無關(guān) ;

    /* 固定定位盒子始終顯示在瀏覽器中指定的位置 與父容器或其它容器無關(guān) */
    position: fixed;

然后 , 設(shè)置固定定位盒子垂直方向位置 , 設(shè)置為 top: 0; 緊貼頂部 ;

    /* 固定定位盒子位置緊貼頂部 */
    top: 0;

再后 , 設(shè)置 left: 50% 樣式 , 將盒子左側(cè)設(shè)置到中心位置 , 這個(gè) 50% 是相對于父容器的比例 , 也就是瀏覽器 ;

    /* 將固定定位的盒子在頁面中居中對齊
       先將盒子左側(cè)設(shè)置到中心位置
       注意 : 這個(gè) 50% 是相對于父容器的 也就是瀏覽器 */
    left: 50%;

最后 , 整個(gè)盒子模型向左走自身寬度的一半 , 此處還要配置兼容老版本瀏覽器的樣式 ;

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

2、設(shè)置最大寬度和最小寬度

在移動(dòng)端網(wǎng)頁中 , 一般都要設(shè)置一個(gè) 最大寬度和最小寬度 ;

當(dāng)瀏覽器的寬度超過最大寬度 , 則網(wǎng)頁布局最大就是該最大寬度 , 繼續(xù)放大網(wǎng)頁不再隨著頁面一起放大 ;
當(dāng)瀏覽器的寬度小于最小寬度 , 則網(wǎng)頁布局最小就是該最小寬度 , 繼續(xù)縮小顯示布局布局 ;

    /* 設(shè)置最大和最小寬度 */
    min-width: 320px;
    max-width: 640px;

3、使用 Flex 彈性布局管理寬度

在搜索框中 , 左側(cè)是搜索欄 , 右側(cè)是搜索按鈕 ;

右側(cè)的搜索按鈕始終都是 44x44 像素大小 ;
左側(cè)的搜索欄隨著網(wǎng)頁布局的寬度變化而變化 ;

此處使用 Flex 彈性布局管理寬度 , 右側(cè)的按鈕直接設(shè)置一個(gè)固定大小 , 左側(cè)的搜索框設(shè)置 flex: 1; 樣式 , 也就是自動(dòng)占據(jù)剩余空間 ;

Flex 子項(xiàng)目的 flex 樣式默認(rèn)都為 0 , 只要有一個(gè)子項(xiàng)目設(shè)置了 flex: 1; 樣式 , 那么該子項(xiàng)目就會(huì)自動(dòng)占據(jù)剩余的所有空間 ;

4、二倍精靈圖設(shè)置

下圖中的放大鏡圖片和頭像圖標(biāo) 都定義在精靈圖中 ,
【移動(dòng)端網(wǎng)頁布局】Flex 彈性布局案例 ② ( 頂部固定定位搜索欄 | 固定定位盒子居中對齊 | 二倍精靈圖設(shè)置 | CSS3 中的垂直居中對齊 )

二倍精靈圖設(shè)置步驟 :

縮小精靈圖 : 在 Firework 中 , 將精靈圖縮小一半 ;
測量坐標(biāo) : 在縮小一半的精靈圖中測量坐標(biāo) ;
設(shè)置代碼 : 將代碼中的 background-size 縮小一半 , 也就是精靈圖縮小一半 ;

插入的放大鏡精靈圖 :

.search::before {
    /* 使用偽元素方式 插入 搜索欄放大鏡圖片 */
    content: "";
    /* 絕對布局 */
    position: absolute;
    /* 令該圖片放置在中間偏上位置 */
    top: 5px;
    left: 5px;
    /* 設(shè)置圖片寬高 */
    width: 15px;
    height: 15px;
    /* 設(shè)置二倍精靈圖 : 該圖片在縮小一倍的精靈圖的 59, 279 位置, 
       設(shè)置背景時(shí)將精靈圖
            向左移動(dòng) 59 像素 
            向上移動(dòng) 279 像素 */
    background: url(../images/sprite.png) no-repeat -59px -279px;
    /* 這里涉及到了精靈圖縮放 原圖 208 像素 此處設(shè)置為 104 像素 */
    background-size: 104px auto;
}

插入的頭像精靈圖 :

.user::before {
    /* 使用偽元素方式 插入 用戶欄頭像圖片 */
    content: "";
    /* 設(shè)置顯示樣式 流式布局 塊級元素 上方設(shè)置按鈕 會(huì)自動(dòng)將文字?jǐn)D到下面顯示 */
    display: block;
    /* 設(shè)置圖標(biāo)的寬高 */
    width: 23px;
    height: 23px;
    /* 設(shè)置二倍精靈圖 : 該圖片在縮小一倍的精靈圖的 59, 194 位置, 
       設(shè)置背景時(shí)將精靈圖
            向左移動(dòng) 59 像素 
            向上移動(dòng) 194 像素 */
    background: url(../images/sprite.png) no-repeat -59px -194px;
    /* 這里涉及到了精靈圖縮放 原圖 208 像素 此處設(shè)置為 104 像素 */
    background-size: 104px auto;
    /* 設(shè)置用戶信息按鈕外邊距 */
    margin: 4px auto -2px;
}

5、CSS3 中的垂直居中對齊 - 行高 = 內(nèi)容高度 ( 總高度 - 邊框高度 - 內(nèi)邊距高度 )

普通盒子模型中 , 設(shè)置垂直居中對齊時(shí) , 直接設(shè)置內(nèi)容高度 = 行高即可 ;

由于采用的是 CSS3 樣式 , 該模式下 , 設(shè)置的 height 高度 = 內(nèi)容高度 + 邊框高度 + 內(nèi)邊距 ;

如果要設(shè)置垂直居中 , 只能設(shè)置其中的行高 = 內(nèi)容高度 , 要把 2 像素的邊框去掉 ;

因此在該 CSS3 樣式中 , 高度設(shè)置為 26 像素 , 其中包括了 24 像素的內(nèi)容高度 , 2 像素的邊框高度 ( 上下邊框各 1 像素 ) ;

    /* 設(shè)置 高度 = 26 行高 = 24 像素 垂直居中
       設(shè)置行高 = 26 會(huì)偏下
       上面的設(shè)置 高度 不等于 行高 原因是 這是 CSS3 模型
       CSS3 中的垂直居中是在 邊框 + 內(nèi)邊距 + 尺寸 的總高度中垂直居中 */
    height: 26px;
    line-height: 24px;

完整代碼示例 :

.search {
    /* 搜索框樣式 */
    /* 子絕父相 放大鏡圖標(biāo)子元素設(shè)置絕對定位 父容器需要設(shè)置相對定位 */
    position: relative;
    /* 設(shè)置 高度 = 26 行高 = 24 像素 垂直居中
       設(shè)置行高 = 26 會(huì)偏下
       上面的設(shè)置 高度 不等于 行高 原因是 這是 CSS3 模型
       CSS3 中的垂直居中是在 邊框 + 內(nèi)邊距 + 尺寸 的總高度中垂直居中 */
    height: 26px;
    line-height: 24px;
    border: 1px solid #ccc;
    /* 設(shè)置該搜索框占據(jù)除右側(cè)固定大小按鈕之外的剩余父容器空間 */
    flex: 1;
    /* 設(shè)置文字大小和顏色 */
    font-size: 12px;
    color: #666;
    /* 設(shè)置搜索框的內(nèi)外邊距 */
    margin: 7px 10px;
    padding-left: 25px;
    /* 設(shè)置搜索框圓角矩形半徑 */
    border-radius: 5px;
    /* 設(shè)置盒子模型陰影 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}

二、代碼示例

1、HTML 標(biāo)簽結(jié)構(gòu)

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

<head>
    <meta charset="UTF-8">
    <!-- 設(shè)置 meta 視口標(biāo)簽 -->
    <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>
    <!-- 頂部固定定位搜索欄 - 不隨著頁面滑動(dòng)而消失 -->
    <div class="search-index">
        <!-- 搜索欄提示內(nèi)容 -->
        <div class="search">輸入搜索信息</div>
        <!-- 搜索欄右側(cè)按鈕 -->
        <a href="#" class="user">我 的</a>
    </div>
</body>

</html>

2、CSS 樣式

body {
    /* 網(wǎng)頁布局寬度 = 設(shè)備寬度 */
    width: 100%;
    /* 最小寬度 320 像素 */
    min-width: 320px;
    /* 最大寬度 640 像素 */
    max-width: 640px;
    /* 居中對齊 */
    margin: 0 auto;
    /* 字體大小 14 像素 */
    font-size: 14px;
    /* 如果是蘋果就是用蘋果默認(rèn)字體 
       如果不是蘋果手機(jī) 就使用后啊面的字體 */
    font-family: -apple-system, Helvetica, sans-serif;
    /* 字體顏色 */
    color: #000;
    /* 行高 */
    line-height: 1.5;
    /* 水平方向超出隱藏 */
    overflow-x: hidden;
}


/*點(diǎn)擊高亮我們需要清除清除  設(shè)置為transparent 完成透明*/

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


/*在移動(dòng)端瀏覽器默認(rèn)的外觀在iOS上加上這個(gè)屬性才能給按鈕和輸入框自定義樣式*/

input {
    -webkit-appearance: none;
}


/*禁用長按頁面時(shí)的彈出菜單*/

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

a {
    color: #000;
    /* 取消鏈接的下劃線樣式 */
    text-decoration: none;
}

ul {
    /* 設(shè)置列表的默認(rèn)樣式 */
    margin: 0;
    padding: 0;
    /* 去掉小圓點(diǎn) */
    list-style: none;
}

img {
    /* 圖片與文字對齊樣式 默認(rèn)是與文字基線對齊 */
    vertical-align: middle;
}

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

.clearfix:after {
    /* 清除浮動(dòng)樣式 */
    content: "";
    display: block;
    line-height: 0;
    visibility: hidden;
    height: 0;
    clear: both;
}


/* 上面是 CSS 的默認(rèn)樣式, 每個(gè) CSS 文件都有上述樣式, 下面開始就是正式樣式 */


/* 頂部固定定位搜索欄樣式 */

.search-index {
    /* 將其內(nèi)部設(shè)置成 彈性布局 
       右側(cè)的按鈕設(shè)置固定大小 
       左側(cè)搜索欄設(shè)置成 flex: 1 樣式 自動(dòng)占據(jù)剩余空間 */
    display: flex;
    /* 固定定位盒子始終顯示在瀏覽器中指定的位置 與父容器或其它容器無關(guān) */
    position: fixed;
    /* 固定定位盒子位置緊貼頂部 */
    top: 0;
    /* 將固定定位的盒子在頁面中居中對齊
       先將盒子左側(cè)設(shè)置到中心位置
       注意 : 這個(gè) 50% 是相對于父容器的 也就是瀏覽器 */
    left: 50%;
    /* 兼容老版本瀏覽器 */
    -webkit-transform: translateX(-50%);
    /* 向左走盒子自身寬度的一半 */
    transform: translateX(-50%);
    /* 固定的盒子模型必須設(shè)置寬度 */
    width: 100%;
    /* 設(shè)置最大和最小寬度 */
    min-width: 320px;
    max-width: 640px;
    /* 設(shè)置高度 */
    height: 44px;
    /* 設(shè)置盒子背景顏色 */
    background-color: #F6F6F6;
    /* 設(shè)置上下邊框 */
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.search {
    /* 搜索框樣式 */
    /* 子絕父相 放大鏡圖標(biāo)子元素設(shè)置絕對定位 父容器需要設(shè)置相對定位 */
    position: relative;
    /* 設(shè)置 高度 = 26 行高 = 24 像素 垂直居中
       設(shè)置行高 = 26 會(huì)偏下
       上面的設(shè)置 高度 不等于 行高 原因是 這是 CSS3 模型
       CSS3 中的垂直居中是在 邊框 + 內(nèi)邊距 + 尺寸 的總高度中垂直居中 */
    height: 26px;
    line-height: 24px;
    border: 1px solid #ccc;
    /* 設(shè)置該搜索框占據(jù)除右側(cè)固定大小按鈕之外的剩余父容器空間 */
    flex: 1;
    /* 設(shè)置文字大小和顏色 */
    font-size: 12px;
    color: #666;
    /* 設(shè)置搜索框的內(nèi)外邊距 */
    margin: 7px 10px;
    padding-left: 25px;
    /* 設(shè)置搜索框圓角矩形半徑 */
    border-radius: 5px;
    /* 設(shè)置盒子模型陰影 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}

.search::before {
    /* 使用偽元素方式 插入 搜索欄放大鏡圖片 */
    content: "";
    /* 絕對布局 */
    position: absolute;
    /* 令該圖片放置在中間偏上位置 */
    top: 5px;
    left: 5px;
    /* 設(shè)置圖片寬高 */
    width: 15px;
    height: 15px;
    /* 設(shè)置二倍精靈圖 : 該圖片在縮小一倍的精靈圖的 59, 279 位置, 
       設(shè)置背景時(shí)將精靈圖
            向左移動(dòng) 59 像素 
            向上移動(dòng) 279 像素 */
    background: url(../images/sprite.png) no-repeat -59px -279px;
    /* 這里涉及到了精靈圖縮放 原圖 208 像素 此處設(shè)置為 104 像素 */
    background-size: 104px auto;
}

.user {
    /* 用戶欄樣式 */
    width: 44px;
    height: 44px;
    /* 設(shè)置文字大小為 12 像素 */
    font-size: 12px;
    /* 設(shè)置文本居中 */
    text-align: center;
    /* 設(shè)置文本顏色 */
    color: #2eaae0;
}

.user::before {
    /* 使用偽元素方式 插入 用戶欄頭像圖片 */
    content: "";
    /* 設(shè)置顯示樣式 流式布局 塊級元素 上方設(shè)置按鈕 會(huì)自動(dòng)將文字?jǐn)D到下面顯示 */
    display: block;
    /* 設(shè)置圖標(biāo)的寬高 */
    width: 23px;
    height: 23px;
    /* 設(shè)置二倍精靈圖 : 該圖片在縮小一倍的精靈圖的 59, 194 位置, 
       設(shè)置背景時(shí)將精靈圖
            向左移動(dòng) 59 像素 
            向上移動(dòng) 194 像素 */
    background: url(../images/sprite.png) no-repeat -59px -194px;
    /* 這里涉及到了精靈圖縮放 原圖 208 像素 此處設(shè)置為 104 像素 */
    background-size: 104px auto;
    /* 設(shè)置用戶信息按鈕外邊距 */
    margin: 4px auto -2px;
}

3、展示效果

【移動(dòng)端網(wǎng)頁布局】Flex 彈性布局案例 ② ( 頂部固定定位搜索欄 | 固定定位盒子居中對齊 | 二倍精靈圖設(shè)置 | CSS3 中的垂直居中對齊 ) 文章來源地址http://www.zghlxwxcb.cn/news/detail-449736.html

到了這里，關(guān)于【移動(dòng)端網(wǎng)頁布局】Flex 彈性布局案例 ② ( 頂部固定定位搜索欄 | 固定定位盒子居中對齊 | 二倍精靈圖設(shè)置 | CSS3 中的垂直居中對齊 )的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！