一、作业完成如下设计图的布局
二、作业需掌握知识点
1、理解模型盒子
1.1 <img src="../assets/boxModel.png" alt=" "
解释:img标签用来引入图片,src后面跟的是图片的地址。./为当前vue文件目录,../为返回上一层当前目录
1.2 模型盒子图
1.2.1 上图内容区域(width,height),padding(内边距),border(边框),margin(外边距)
1.2.2 padding,margin 都有四个值:
padding:10px; //上右下左分别为10px
padding:10px 0; //上下为10px,左右为0
padding:0 10px; //上下为0,左右为10;
padding:0 5px 10px //上为0 右左为5px 下为10px
padding:1px 2px 3px 4px; //顺序分别为上右下左
如果只想给一个方向设置不想写四个值:可以使用padding-top:10px;(top,bottom,left,right)
margin同理;
正常标准CSS盒子模型:
100*100的蓝色区域:是你设置的width,height区域
10*10的绿色区域:是你的padding
20*20的浅黄色区域:是你的border
30*30的浅橘色区域:是你的margin
如果设置margin,padding,boder那么你的四个方向都会增加相对应的值。所以你相对应的width会增加你设置的值的2倍;
1.2.3 图解
初始设定一个100*100的div。如果添加padding,那么你的width与height就各增加20,div就扩大到了绿色范围;
同理如果添加了border,那么你的width与height就各增加40.div就扩大到了浅黄范围。
同理margin div就扩大到了浅菊范围。
至此:你原先100*100的蓝色div现在增加到了浅菊的160*160
width需要设置一行显示几个,可以用calc(100%/一行几个)-(border+padding+margin)同理height
1.3、怪异盒子模型
1.3.1 box-sizing:border-box; //哪个div需要怪异给哪个div设置本元素
此处的怪异模式width与height包括border,padding且不会把div撑大。他会在调节内容元素的大小
2、定位
2.1 图解
2.1.1 红色边框为父元素,绿色边框为子元素(蓝色与橙色为实心圆点,为了看得清,画的大且是空心原点)
蓝色原点为红色边框的中心点,橙色为绿色边框中心点,如果是子元素居中定位,则蓝黄圆点重合。
首先,子元素设置left 50% top 50%(请注意,此设置的基点是以子元素的左上角定位,所以绿色边框会进入第二象限,右下)
此时蓝色与橙色没有重合。仅仅只是绿色左侧边框与纵向的红色辅助线重合,绿色上边框与横向红色辅助线重合,等于是绿色边框的左上角的那个点与红色边框的中心重合。是因为基于左上角的点的定位。
注意:此时蓝色点到横向的黑线,蓝色点到纵向的黑线各位绿色width,height的一半,因为黑线是从绿色边框中心点做出来的辅助线,那么50%减去width的一半,50%减去height的一半,蓝色与橙色的点就会重合,就可以子元素定位居中;
所以:
left:calc(50%-(width/2)) height:calc(50%-(height/2))就可以居中定位。
3、补充其它两个小知识点。
3.1 圆角
border-radius:10px;
3.2 阴影
box-shadow:8px 8px 8px gray; //第一个指向x轴偏移量;第二个是y轴的偏移量;第三个是影响的模糊半径 阴影颜色
三、完成作业代码
<template>
<div>
<!-- <img src="../assets/boxModel.png" alt="">-->
<div class="box">
<div class="absolute">配置页面</div>
<div class="title">
<b>西安讯飞研发协同办公智能平台</b>
</div>
<div class="child">
<div class="item" style="background: #1a8d86">
<div class="btitle">
OA自动化办公平台
</div>
<div class="pic">
<img src="../assets/office.png" alt="">
</div>
</div>
<div class="item" style="background: rgb(129 148 255)">
<div class="btitle">敏捷自动化研发平台</div>
<div class="pic">
<img src="../assets/dve2.png" alt="">
</div>
</div>
<div class="item" style="background:rgb(254 183 124)">
<div class="btitle">自动化测试平台</div>
<div class="pic">
<img src="../assets/test.png" alt="">
</div>
</div>
<div class="item" style="background:rgb(61 139 193)">
<div class="btitle">自动化一键部署平台</div>
<div class="pic">
<img src="../assets/bushu.png" alt="">
</div>
</div>
<div class="item" style="background:rgb(233 152 168)">
<div class="btitle">自动化在线监测平台</div>
<div class="pic">
<img src="../assets/jiance.png" alt="">
</div>
</div>
</div>
</div>
</div>
</template>
<script>
</script>
<style scoped>
.box{
background:#dbf0ef ;
height: 730px;
width:100%;
position: relative;
margin: 0px auto;
}
.absolute{
position: absolute;
left:50%;
top:50%;
background: #099885;
width: 112px;
height: 34px;
align-content: center;
line-height: 34px;
color: white;
}
.child{
display: flex;
align-items: center;
justify-content:flex-start;
flex-wrap: wrap;
width: 1284px;
margin:0 auto;
}
.item{
width: calc(100% / 3 - 34px);
height: 182px;
margin: 17px;
color: white;
display: flex;
justify-content: center;
align-items: center;
/*阴影:第一个指x轴的偏移量;第二个是y轴的偏移量;第三个影响的模糊半径*/
box-shadow: 8px 8px 8px gray;
/*圆角*/
border-radius: 10px;
}
.title{
font-size: 34px;
color: rgb(17 68 89);
padding-top: 95px;
padding-bottom: 120px;
}
.btitle{
font-size: 30px;
padding-right: 20px;
}
</style>
标签:flex,17,day6,height,padding,width,10px,边框,margin From: https://www.cnblogs.com/startingpoint-fly/p/16989825.html