发表于： 2019-03-16 18:18:57
1 786
今天完成的事情：
一，理解了
CSS3 弹性盒子(Flex Box)
它是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html>
二，学会了利用度量单位和百分比为盒子添加数值，从而使其自适应不同设备和屏幕。
三，提交了任务一，任务二。
明天要做的事：运用布局知识进行更复杂的布局；让布局更好地适应移动端；合理使用rem作长度单位；使用photoshop切图。
遇到的问题：暂无；
收获：学会了盒子自适应的某种写法
返回列表
评论