发表于: 2018-09-08 23:55:44

1 685


今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了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>



返回列表 返回列表
评论

    分享到