学习web前端历程（十二）

最新推荐文章于 2022-11-26 17:39:34 发布

l123zmj

最新推荐文章于 2022-11-26 17:39:34 发布

阅读量233

点赞数 1

文章标签：怪异盒子弹性盒子弹性盒子的应用

本文链接：https://blog.csdn.net/l123zmj/article/details/98645949

版权

怪异盒子、弹性盒子、弹性盒子的应用

一、怪异盒子
盒子的模型有两种：
（1）符合w3c规范的标准例子模型
（2）IE的盒子模型（怪异盒子）
IE盒子包括：margin、border、padding、content
但是不同的是 IE盒子的宽度包含了border和padding（width+margin）

Box-sizing属性：
允许以W3C的盒模型和IE的盒子模型来定义元素，当前元素适用哪种模型，有Box-sizing决定。

content-box（标准模式）
border和padding不包含在width和height中，元素实际大小：宽高+border和padding
border-box（怪异）
border和padding被包含在width和height中，元素实际大小为你定义多宽就多宽

练习：
1.小米菜单部分列表：（怪异盒子）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>怪异盒子练习</title>
    <link rel="stylesheet" href="css/reset.css"/>
    <style>
      div{
          width: 234px;
          height: 460px;
          background-color: #2e233e;
          padding: 20px 0px;
          box-sizing: border-box;
      }
        div li{
            font-size: 14px;
            height: 42px;
            line-height: 42px;
            padding-left: 30px;
        }
        a{
            /*font-size: 14px;*/
            color: white;
        }
        li:hover{
            background-color: #ff6700;
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li><a href="">手机 电话卡</a></li>
        <li><a href="">电视 盒子</a></li>
        <li><a href="">笔记本 平板</a></li>
        <li><a href="">家电</a></li>
        <li><a href="">出行 穿戴</a></li>
        <li><a href="">智能 路由器 </a></li>
        <li><a href="">电源 配件</a></li>
        <li><a href="">健康 儿童</a></li>
        <li><a href="">耳机 音箱</a></li>
        <li><a href="">生活 箱包</a></li>
    </ul>
</div>
</body>
</html>

页面显示：
在这里插入图片描述
2.魅族的官网

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魅族官网</title>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/meizuStyle.css"/>
</head>
<body>
<div class="phone">
    <div class="phone_top">
        <div class="left">
            <p class="goods-name">魅族 16Xs</p>
            <p class="goods-desc">4800W AI三摄 | 屏幕下指纹</p>
            <p class="goods-price"><i>￥</i>1499<em></em><s></s></p>
            <img src="images/1.jpg" width="460px" height="460px"/>
        </div>
        <div class="right">
            <p class="goods-name">魅族 16s</p>
            <p class="goods-desc">骁龙855 4800W光学防抖</p>
            <p style="color:" class="goods-price"><i>￥</i>2699<em></em><s></s></p>
            <img src="images/2.jpg"/>
        </div>
    </div>
    <div class="phone_bottom">
        <div>
            <img src="images/3.png "/>
            <p class="goods-name1">魅族 Note9</p>
            <p class="goods-desc1">骁龙675 后置4800万</p>
            <p class="goods-price1"><i>￥</i>1199<em></em><s></s></p>
        </div>
        <div>
            <img src="images/4.png"/>
            <p class="goods-name1">魅族 16th</p>
            <p class="goods-desc1">骁龙845 屏幕下指纹</p>
            <p class="goods-price1"><i>￥</i>2298<em></em><s></s></p>
        </div>
        <div>
            <img src="images/5.png">
            <p class="goods-name1">魅族 16th Plus</p>
                <p class="goods-desc1">骁龙845 屏幕下指纹</p>
                <p class="goods-price1"><i>￥</i>2698<em></em><s></s></p>
        </div>
        <div class="four">
            <img src="images/6.png"/>
            <p class="goods-name1">魅族 X8</p>
                <p class="goods-desc1">骁龙710 旗舰双摄</p>
                <p style="color:" class="goods-price1"><i>￥</i>1298<em></em><s></s></p>
        </div>
        <div></div>
        <div></div>
        <div></div>
        <div class="eight"></div>
    </div>
</div>
</body>
</html>

css文件

meizuStyle.css:

body{
    background-color: #f4f4f4;
}
.phone{
    width: 1240px;
    height: 1000px;
    margin: 0px auto;
}
.phone_top{
    height: 610px;

}
.phone_top>div{
    width: 615px;
    height: 610px;
    background-color:#ffffff;
    float: left;
    text-align: center;
}
.left{
    margin-right: 10px;
}
.goods-name{
    color: #333;
    font-size: 28px;
    margin-bottom: 0;
}
.goods-desc{
    color: #333;
    font-size: 18px;
    margin-bottom: 3px;
}
.goods-price{
    color: #c00;
    font-size: 22px;
    padding-left: 14px;
}
.phone img{
    width: 460px;
    height: 460px;
}
.phone_bottom>div{
    width: 303px;
    height: 375px;
    background-color: white;
    float: left;
    margin-right: 9px;
    margin-top: 10px;
    text-align: center;
}
.phone_bottom .four{
    margin-right: 0px;
}
.phone_bottom .eight{
    margin-right: 0px;
}
.phone_bottom img{
    width: 230px;
    height: 230px;
}
.goods-name1{
    color: #333;
    font-size: 16px;
    margin-bottom: 2px;
}
.goods-desc1{
    color: #999;
    font-size: 14px;
}
.goods-price1{
    color: #c00;
    font-size: 22px;
    padding-left: 14px;
}
reset.css
a{
    text-decoration: none;
}
ol,dl,li,ul{
    list-style: none;
          }
ol,dl,li,ul,div{
    margin: 0px;
    padding: 0px;
    text-align: center;
    color: #333;
    font-size: 14px;
    font-family: "宋体";

}

页面显示：
在这里插入图片描述

二、弹性盒子
伸缩盒模型（flexbox ）也叫弹性盒模型（针对移动端布局）

其决定了一个盒子在其他盒子中的分布，以及如何处理可用的空间，使用该模型，可以轻松创建“自适应”浏览器窗口的流动布局

Flexbox
传统模型基于html文档的流排列，使用弹性盒模型可以规定特点和顺序，要开启他，只需设置属性flex
目的：
在浏览器窗口变化时，盒子相应改变大小
（设置弹性盒模型后分float、clear、vertical-align在flex中不起作用）

Flexbox的基础知识：
（1）由于Flexbox是一个整体的模块，他们有一些属性是在父容器上设置的，而一些在子容器上设置
（2）最外层为父容器，且定义此容器为弹性盒子

.box{ 
display:flex;
}

注意：
（1）首先规定那个是父容器，父容器中包含很多个项目，项目可以在父容器中弹性布局
（2）其次还可以规定父容器中要怎么显示里边的项目，是否换行、排列等

父容器常用的属性：

1.display:flex
定义一个flex容器
设置父元素为弹性盒子，子元素会自动水平排列

2.justify-content（水平）
设置或检索盒子元素在主轴（横轴）方向上的对齐方式（水平方向）
（子容器在父容器里边）

属性	属性值
flex-start	默认值，项目位于容器开头
flex-end	项目容器位于结尾
center	项目容器位于结中间
space-between	项目位于各行之间留有空白的容器内（项目分开）
space-around	项目位于各行之前、之间、之后都留有空白的容器内（周围）

3.align-item （垂直）
定义了flex子项在flex的容器的当前行的侧轴（纵轴）方向上对齐方式

属性	属性值
stretch	默认值，项目被拉伸一适应容器
center	位于容器中心
flex-start	位于容器开始
flex-end	位于容器结束

子容器属性：
1.flex-grow:number
一个数字，规定项目将相对于其他灵活项目进行扩展的量（默认为0）

（1）flex-grow: 1;      每个项目占一份(统一设置)
（2）要是想成 1:2:1 在每一个里边设置（单独设置）
        .item1{background-color: white; flex-grow:1;}
        .item2{background-color: lavenderblush; flex-grow: 2;}
        .item3{background-color: pink; flex-grow: 1;}

弹性盒子的完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性盒子</title>
    <style>
        .box{
            width:100%;
            height: 600px;
            background-color: #cc0000;
            display: flex;  /*这个属性默认是弹性盒子*/
            flex-direction: column; /*垂直布局*/
        }
        .parent{
            width: 400px;
            height: 400px;
            background-color:cadetblue;
            display: flex;
            justify-content:space-around;
             align-items: center;
        }
        .parent>div{
            width: 100px;
            height: 100px;
            background-color:orange;
            /*margin: 0px auto;*/
        }
        .box>div{
            /*width: 33.33%;*/
            height: 600px;
            /*float: left;*/
            /*flex-grow: 1;  !*每个项目占一份(统一设置)*!*/
        }  /*要是想成 1:2:1 在每一个里边设置（单独设置）*/
        .item1{background-color: white; flex-grow:1;}
        .item2{background-color: lavenderblush; flex-grow: 2;}
        .item3{background-color: pink; flex-grow: 1;}
    </style>
</head>
<body>
<!--
弹性盒子
父容器属性：
display：flex  ; 声明为弹性盒子  子容器默认水平布局
flex-direction   子容器垂直布局排列
justify-content  子项目水平对齐方式
align-item       子项目垂直对齐方式
子容器属性：
flex-grow:number;  每一个项目占的比例
-->
<div class="box">
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3"></div>
</div>
<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
</div>
</body>
</ht

弹性盒子的练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性盒子的练习</title>
    <style>
        .top{
            width: 80%;
            height: 50px;
            background-color:#f4f4f4;
            display: flex;
            margin: 0px auto;
            justify-content:space-around;
            align-items: center;
        }
        .top>div{
       color: black;
        }
        .bottom{
            width: 80%;
            height: 50px;
            background-color:#f4f4f4;
            margin: 0px auto;
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }
        .bottom>div{
            color: black;
            margin-right: 70px;
        }
    </style>
</head>
<body>
<div class="top">
    <div >首页</div>
    <div>咨询</div>
    <div>图片</div>
    <div>师资力量</div>
    <div>专业方向</div>
    <div>联系电话</div>
</div><br/><br/>
<div class="bottom">
    <div>a</div>
    <div>b</div>
    <div>c</div>
    <div>d</div>
</div>
</body>
</html>

页面显示

在这里插入图片描述
三、弹性盒子的应用（重要）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性盒子的应用</title>
    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="stylesheet" href="css/baiduStyle.css"/>
</head>
<body>
<div class="nav">
    <div class="arrow"></div>
    <div class="title">
        <img src="images/dingwei.jpg" width="65px" height="65px" />
        <span>发现周边服务</span>
    </div>
    <div class="search"></div>
</div>
<div class="food">
    <div >
        <img src="images/meishi.jpg" width="100px" height="100px"/><br/>
        <span>美食</span>
    </div>
    <div >
        <img src="images/meishi.jpg" width="100px" height="100px"/><br/>
        <span>美食</span>
    </div> <div >
        <img src="images/meishi.jpg" width="100px" height="100px"/><br/>
        <span>美食</span>
    </div>
    <div >
        <img src="images/meishi.jpg" width="100px" height="100px"/><br/>
        <span>美食</span>
    </div>
    <div >
        <img src="images/meishi.jpg" width="100px" height="100px"/><br/>
        <span>美食</span>
    </div>
    </div>
<div class="menu">
   <div class="up">
       <div>
           <img src="images/xiaochi.jpg"/>
           <span>小吃</span>
       </div> <div>
           <img src="images/xiaochi.jpg"/>
           <span>小吃</span>
       </div> <div>
           <img src="images/xiaochi.jpg"/>
           <span>小吃</span>
       </div> <div>
           <img src="images/xiaochi.jpg"/>
           <span>小吃</span>
       </div> <div>
           <img src="images/xiaochi.jpg"/>
           <span>小吃</span>
       </div>
   </div>
    <div class="down">
        <div>
            <img src="images/xiaochi.jpg"/>
            <span>小吃</span>
        </div> <div>
            <img src="images/xiaochi.jpg"/>
            <span>小吃</span>
        </div> <div>
            <img src="images/xiaochi.jpg"/>
            <span>小吃</span>
        </div> <div>
            <img src="images/xiaochi.jpg"/>
            <span>小吃</span>
        </div> <div>
        <img src="images/xiaochi.jpg"/>
        <span>小吃</span>
    </div>
    </div>
</div>
</body>
</html>


baiduStyle.css

body{
    background-color: #f4f4f4;
}
.nav{
    width: 100%;
    height: 75px;
    background-color: red;
    display: flex;
}
.arrow,.search{
    width: 75px;
    height: 75px;
}
.arrow{
    background: url("../images/jiantou.jpg") no-repeat center;
}
.search{
    background: url("../images/sousuo.jpg") no-repeat center;
}
.title{
    height: 75px;
    flex-grow: 1;
    font-size: 20px;
    color:#f2f4f5;
    line-height: 75px;
}
.food{
    height: 200px;
    background-color: #ffffff;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.food div{
    width: 40%;
}
.menu{
    background-color: #ffffff;
    margin-top: 30px;
}
.menu>div{
    display: flex;
    align-items: center;
}
.menu>div>div{
    flex-grow: 1;
    border-right: 1px solid #f2f4f5;
    margin: 30px 0px;
}
.menu>div:first-child{
    border-bottom: 1px solid #f2f4f5;
}
.menu>div>div:last-child{
    border-right: none;
}

reset.css

a{
    text-decoration: none;
}
ol,dl,li,ul{
    list-style: none;
          }
ol,dl,li,ul,div{
    margin: 0px;
    padding: 0px;
    text-align: center;
    color: #333;
    font-size: 14px;
    font-family: "宋体";

}