12月23日作业
1.手撕flex容器六大属性及功能
2.flex容器小案例
demo1示例
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex布局小案例</title>
<style>
.container{
border:1px dashed red;
/*只要盒子加了padding、border,就得加box-sizing*/
background-color:lightyellow;
box-sizing:border-box;
}
.item{
width:100px;
height:50px;
border:1px dashed lightblue;
}
.container{
/*转为弹性盒子*/
display:flex;
/*1.容器中的主轴方向*/
/* flex-direction:column; */
/* flex-direction:row; */
/*2.是否允许创建多行容器,一行排不下,是否允许换行*/
/* flex-wrap:nowrap; */
/* flex-wrap:wrap; */
/*3.上面两个属性缩写*/
flex-flow:row wrap;
/*4.项目在主轴上的对齐方式*/
/* justify-content:flex-start; */
/* justify-content:flex-end; */
/* justify-content:center; */
/*剩余空间分配方式*/
/* justify-content:space-between; */ /*两端对齐*/
/* justify-content:space-around; */ /*分散对齐*/
justify-content:space-evenly; /*平均对齐*/
/*5.项目在交叉轴上的对齐方式*/
height:300px;
/* align-items:flex-start; */
/* align-items:flex-end; */
/* align-items:center; */
/*6.项目在多行容器的交叉轴上的对齐方式*/
/* align-content:space-between; */
/* align-content:space-around; */
/* align-content:space-evenly; */
align-content:center;
/* align-content:flex-end; */
}
</style>
</head>
<body>
<div class="container">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
<span class="item">item4</span>
<span class="item">item5</span>
<span class="item">item6</span>
<span class="item">item7</span>
<span class="item">item8</span>
</div>
</body>
</html>
demo1运行截图
3.对于12月20日布局作业的总结
作为一个前端小司机,在这次布局练习中很多细节没有做到位,其中存在的问题如下:
1.很多地方缺少链接;比如,第一个logo部分,看到这,应该立马想到这个是可点击的,需要加链接;还有导航的链接等
2.图片的空隙问题,没有处理;
3.在写css更多的使用后代选择器,并没像老师那样精准定位使用子代选择器(ps:之前不熟悉,现在熟了),说明其他的选择器属性不熟悉,需要多看
4.整体结构虽相同,但感觉没老师的清晰;心里总觉得自己没有老师写的好,而且自己采用表格布局(不是很主流,应该使用定位)
5.语义化标签与简洁化标签的使用,什么原则,我还是不知道
总结一下:从和老师的代码对比中看出,虽然实现了同样效果,可是我对布局结构还是不是很深入,很多问题忽视掉了