前端学习第三天

爱吃橙子_
125 阅读4分钟

今日的学习内容是了解视口，分辨率 ，以及flex布局的一部分属性

视口

目标：使用meta标签设置视口宽度，制作适配不同设备宽度的网页

<meta name="viewport" content="width=device-width, initial-scale=1.0,
    maximum-scale-1.0, minimum-scale=1.0,user-scalable=no ">
  • viewport : 视口
  • width=device-width : 视口宽度 = 设备宽度
  • initial-scale=1.0 : 缩放一倍(不缩放)
  • maximum-scale-1.0 : 最大缩放比为1
  • minimum-scale=1.0 : 最小缩放比为1
  • user-scalable: 禁止用户缩放

百分比布局

  • 百分比布局，也称流式布局
  • 效果:宽度自适应,高度固定。

Flex布局

  • flex布局/弹性布局：

    • 是一种浏览器提倡的布局模型
    • 布局网页更简单、灵活
    • 避免浮动脱标的问题

  • 作用

    • 基于flex精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生
    • flex布局非常适合结构化布局

  • 设置方式

    • 给父元素添加display: flex ，子元素可以自动的挤压或者拉伸

  • 组成部分

    • 弹性容器(父盒子)
    • 弹性盒子(子盒子)
    • 主轴
    • 侧轴(交叉轴)

主轴对齐方式

目标：使用justify-content调节元素在主轴的对齐方式

  • 修改主轴对齐方式属性:justify-content
属性值作用
flex-start默认值, 起点开始依次排列
flex-end终点开始依次排列
center沿主轴居中排列(居中对齐盒子两边无空隙)
space-around弹性盒子沿主轴均匀排列, 空白间距平分在弹性盒子两侧
space-between弹性盒子沿主轴均匀排列, 两个盒子靠边，其他盒子平均分中间的距离
space-evenly弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等。（居中对齐盒子两边有空隙）

侧轴对齐方式

目的:使用 align-items调节元素在侧轴的对齐方式

  • 修改侧轴对齐方式属性:

    • align-items（添加到弹性容器）
    • align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）
属性值作用
flex-start默认值, 起点开始依次排列
flex-end终点开始依次排列
center沿侧轴居中排列(常用)
stretch默认值, 如果盒子不设置高度，则弹性盒子沿着主轴线被拉伸至铺满容器

伸缩比

目标：使用flex属性修改弹性盒子伸缩比

  • 属性

    • flex : 值;

  • 取值分类

    • 数值(整数)；

    • 注意 : 只占用父盒子剩余尺寸

    设置主轴的方向

根据使用的情况 我们需要设置主轴的方向到底是水平方向，还是垂直方向

  • flex-direction属性设置主轴方向

    • 根据我们实际使用需求去设置主轴的方向 语法是:
    • flex-direction:row；将主轴设置成水平方向上 默认值
    • flex-direction: column;将主轴设置成垂直方向上

今日案例小兔仙手机支付页面

  • 下面是html部分
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/zdc.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3214369_uf2k5idtgfj.css">

</head>

<body>
    <div class="container">

        <!-- 头部 模块 -->
        <div class="header">
            <span class="iconfont icon-arrow-left-bold"></span>
            <span>填写订单</span>
            <span>&nbsp;</span>
        </div>

        <!-- 内容部分 -->
        <div class="main">
            <!-- 地址栏 -->
            <div class="address">
                <div class="iconfont icon-map-filling"></div>
                <div class="address-main">
                    <span>林丽</span>
                    <span>123456789</span>
                    <p>
                        北京市 海淀区 中关村软件园 信息科技大厦1号
                        楼410#
                    </p>
                </div>
                <div class="iconfont icon-arrow-right"></div>
            </div>

            <!-- 商品栏 -->
            <div class="goods">
                <img src="./uploads/pic.png" alt="">
                <div class="title">
                    <div class="title-top">
                        <div class="desc twoLine">康尔贝 非接触式红外体温仪
                            领券立减30元 婴儿级材质 测温</div>
                        <div class="qua">x1</div>
                    </div>
                    <div class="sub">
                        <span>粉红</span>
                        <span>红外体温计</span>
                    </div>
                    <div class="price">
                        <span><i>￥</i>266</span>
                        <span><i>￥</i>299</span>
                    </div>
                </div>
            </div>
            <!-- 商品栏 -->
            <div class="goods">
                <img src="./uploads/pic.png" alt="">
                <div class="title">
                    <div class="title-top">
                        <div class="desc twoLine">康尔贝 非接触式红外体温仪
                            领券立减30元 婴儿级材质 测温</div>
                        <div class="qua">x1</div>
                    </div>
                    <div class="sub">
                        <span>粉红</span>
                        <span>红外体温计</span>
                    </div>
                    <div class="price">
                        <span><i>￥</i>266</span>
                        <span><i>￥</i>299</span>
                    </div>
                </div>
            </div>
            <!-- 商品栏 -->
            <div class="goods">
                <img src="./uploads/pic.png" alt="">
                <div class="title">
                    <div class="title-top">
                        <div class="desc twoLine">康尔贝 非接触式红外体温仪
                            领券立减30元 婴儿级材质 测温</div>
                        <div class="qua">x1</div>
                    </div>
                    <div class="sub">
                        <span>粉红</span>
                        <span>红外体温计</span>
                    </div>
                    <div class="price">
                        <span><i>￥</i>266</span>
                        <span><i>￥</i>299</span>
                    </div>
                </div>
            </div>

            <!-- 配送方式 -->
            <div class="box-one">
                <div>
                    <span>配送方式</span>
                    <span>顺风快递</span>
                </div>
                <div>
                    <span>买家备注</span>
                    <span>希望可以尽快发货,谢谢~</span>
                </div>
                <div>
                    <span>支付方式</span>
                    <p>支付宝<span class="iconfont icon-arrow-right"></span></p>
                </div>
            </div>

            <!-- 价格 -->
            <div class="box-two">
                <div>
                    <span>商品总价</span>
                    <span><i>￥</i>299.0</span>
                </div>
                <div>
                    <span>运费</span>
                    <span><i>￥</i>0.00</span>
                </div>
                <div>
                    <span>折扣</span>
                    <span>-<i>￥</i>30.00</span>
                </div>
            </div>
        </div>

        <!-- 底部固定栏 -->
        <div class="footer">
            <div class="price_one">
                <span>
                    合计: <span>
                        <i>￥</i>266.00
                    </span>
                </span>
            </div>
            <button>去支付</button>
        </div>
</body>

</html>

-这一块是css

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/zdc.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3214369_uf2k5idtgfj.css">

</head>

<body>
    <div class="container">

        <!-- 头部 模块 -->
        <div class="header">
            <span class="iconfont icon-arrow-left-bold"></span>
            <span>填写订单</span>
            <span>&nbsp;</span>
        </div>

        <!-- 内容部分 -->
        <div class="main">
            <!-- 地址栏 -->
            <div class="address">
                <div class="iconfont icon-map-filling"></div>
                <div class="address-main">
                    <span>林丽</span>
                    <span>123456789</span>
                    <p>
                        北京市 海淀区 中关村软件园 信息科技大厦1号
                        楼410#
                    </p>
                </div>
                <div class="iconfont icon-arrow-right"></div>
            </div>

            <!-- 商品栏 -->
            <div class="goods">
                <img src="./uploads/pic.png" alt="">
                <div class="title">
                    <div class="title-top">
                        <div class="desc twoLine">康尔贝 非接触式红外体温仪
                            领券立减30元 婴儿级材质 测温</div>
                        <div class="qua">x1</div>
                    </div>
                    <div class="sub">
                        <span>粉红</span>
                        <span>红外体温计</span>
                    </div>
                    <div class="price">
                        <span><i>￥</i>266</span>
                        <span><i>￥</i>299</span>
                    </div>
                </div>
            </div>
            <!-- 商品栏 -->
            <div class="goods">
                <img src="./uploads/pic.png" alt="">
                <div class="title">
                    <div class="title-top">
                        <div class="desc twoLine">康尔贝 非接触式红外体温仪
                            领券立减30元 婴儿级材质 测温</div>
                        <div class="qua">x1</div>
                    </div>
                    <div class="sub">
                        <span>粉红</span>
                        <span>红外体温计</span>
                    </div>
                    <div class="price">
                        <span><i>￥</i>266</span>
                        <span><i>￥</i>299</span>
                    </div>
                </div>
            </div>
            <!-- 商品栏 -->
            <div class="goods">
                <img src="./uploads/pic.png" alt="">
                <div class="title">
                    <div class="title-top">
                        <div class="desc twoLine">康尔贝 非接触式红外体温仪
                            领券立减30元 婴儿级材质 测温</div>
                        <div class="qua">x1</div>
                    </div>
                    <div class="sub">
                        <span>粉红</span>
                        <span>红外体温计</span>
                    </div>
                    <div class="price">
                        <span><i>￥</i>266</span>
                        <span><i>￥</i>299</span>
                    </div>
                </div>
            </div>

            <!-- 配送方式 -->
            <div class="box-one">
                <div>
                    <span>配送方式</span>
                    <span>顺风快递</span>
                </div>
                <div>
                    <span>买家备注</span>
                    <span>希望可以尽快发货,谢谢~</span>
                </div>
                <div>
                    <span>支付方式</span>
                    <p>支付宝<span class="iconfont icon-arrow-right"></span></p>
                </div>
            </div>

            <!-- 价格 -->
            <div class="box-two">
                <div>
                    <span>商品总价</span>
                    <span><i>￥</i>299.0</span>
                </div>
                <div>
                    <span>运费</span>
                    <span><i>￥</i>0.00</span>
                </div>
                <div>
                    <span>折扣</span>
                    <span>-<i>￥</i>30.00</span>
                </div>
            </div>
        </div>

        <!-- 底部固定栏 -->
        <div class="footer">
            <div class="price_one">
                <span>
                    合计: <span>
                        <i>￥</i>266.00
                    </span>
                </span>
            </div>
            <button>去支付</button>
        </div>
</body>

</html>

弹性盒子换行

使用flex-wrap:wrap;给弹性盒子换行显示

属性值作用
nowrap（默认）：不换行。
wrap换行，第一行在上方。
wrap-reverse换行，第一行在下方。

调整多行侧轴对齐方式

用align-content调整多行侧轴对齐方式

属性值作用
flex-start与交叉轴的起点对齐。
flex-end交叉轴的终点对齐
center与交叉轴的中点对齐
space-between交叉轴两端对齐，轴线之间的间隔平均分布
space-around每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）轴线占满整个交叉轴。

\

avatar
文章
阅读
粉丝