今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）
今天学习了flex的一些方式，比如说像flex上面有水平轴，垂直轴这样的，
明天计划的事情：（一定要写非常细致的内容）
明天继续完成任务五
遇到的问题：（遇到什么困难，怎么解决的）
遇到了，如果说是在背景图片上面再插入一个背景图片，然后它会随着背景图片的大小而放大缩小，怎么样才可以让他不动呢？
收获：（通过今天的学习，学到了什么知识）
flex布局就是弹性布局的意思，就是可以在盒状的模型里面进行自由，有弹性的布局
每一个盒子，每一个容器都可以进行这样的布局，更好的提供了垂直居中的布局，
那么它是怎么写的呢？是
display:flex这个是块级元素的写法
行内元素是：display:inline-flex,
是只能设置在父元素当中，而且一旦设置了以后，子元素的float，clear vertical-align垂直居中都要失效的
横向的是水平轴，纵向的是垂直轴，那么在flex的里面，水平轴是怎么表示的呢？从哪里开始到那里结束呢？
水平的主轴，main axis,那么垂直的交叉轴是怎么表示的呢？cross axis，
水平主轴是从main stat到main end这里结束的
垂直的交叉轴是由cross start到cross end
flex有六个属性分别是：
flex-direction
flex-wrap
flex-flow
justify-centent
align-items
align-centent
那么这些都是什么用的呢？
flex-direction:这个是决定了flex的主轴方向
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
它可能有4个值。
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
最后附上代码
html{
font-size: 62.5%;
}
body{
margin: 0;
}
header{
height:4.4rem;
background-color: #5FC0CD;
text-align: center;
}
/*.return{*/
/*width: 20px;*/
/*height: 20px;*/
/*border-top: 1px solid white;*/
/*border-right: 1px solid white;*/
/*transform:rotate(45deg);*/
/*}*/
.arrow{
width: 1.5rem;
height: 1.5rem;
border-top: 3px solid white;
border-left: 3px solid white;
transform:rotate(-45deg);
display: inline-block;
margin-left: 3.5rem;
margin-top: 1.2rem;
float: left;
}
header span{
font-size: 2rem;
color: white;
line-height: 4rem;
}
.box2{
background:url(./doctor.png) no-repeat;
height:16.3rem;
background-size: 100%;
}
.headportrait{
background: url(./head\ portrait.png) no-repeat;
height: 8.45rem;
background-size:cover;
display: inline-block;
width: 8.45rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="task5.css">
</head>
<body>
<header>
<a class="return"></a>
<a class="arrow"></a>
<span>个人主页</span>
</header>
<div class="box2">
<div class="doctor"></div>
<div class="headportrait"></div>
<span class="name">高素雅</span>
<span class="age">51岁</span>
<span class="site">北京.通州.果园</span>
</div>
<div class="box3">
<div class="skill">
<span>专业技能</span>
</div>
<div class="require">
<span class="require1">住家</span>
<span class="require2">不含餐</span>
</div>
<div class="experience">
<span class="experience1">工作年限</span>
<span class="experience2">0~3年</span>
</div>
<div class="time">
<span class="time1">工作时间</span>
<span class="time2">全天</span>
</div>
<div class="price">
<span class="price1">服务价格</span>
<span class="price2">25元/小时</span>
</div>
<div class="introduce">
<span class="introduce1">自我介绍</span>
<span class="introduce2">可以洗衣、做饭、照顾老人。在护
工方面有5年的经验，经验丰富。</span>
</div>
<div class="connection">
<a class="leave word">留言</a>
<a class="phone">电话联系</a>
</div>
</div>
</body>
</html>
.png)
返回列表
评论