完成css3的盒模型流式布局事例分享
在进修css3的过程中，发现一些新界说的内容和属性老是一知半解，无法很好的把握，之后就进修做这个流掉结构，发现若是运用好很轻易完当作比力纪律的盒子结构，所以这里分享一下本身做流式结构的过程；
东西/原料
- 电脑
- Sublime text 2
方式/步调
- 1
既然是纪律的节制盒子模子，那么年夜量的 div 是不错的例子应用 元素，初始做的时辰，就分为了 年夜 中 小，由中 div 作为父元素容器，之后节制下面的子元素 div 实现结果；
- 2
我们先节制 年夜 div 的样式，完当作根本的页面结构，不仅要有用果，必然的美不雅也是需要的，如图二，就是我们存放和展示 流式结构 的容器；样式代码可以看图一；
- 3
这里 span 标签零丁拿出来是为做标识表记标帜，三个中 div 中的 小 div 个数分歧，以span作为距离和标识表记标帜
- 4
然后我们节制 中 div ，需要的样式就不做诠释了；
display：flex；将元素作为弹性伸缩盒；
flex-flow;伸缩流偏向与换行；
align-content;多行子项在容器内垂直对齐体例；
- 5
节制 小 div，高度 height，边框 border，布景色 background-color；
关头的
box-sizing：border；（ 感受就是把宽度和高度设置为不异的数值，可是还有良多细节，大师最好查资料）
flex：0 0 25%；（节制该元素的伸缩性）
注重事项
- 仅作分享；
- 发表于 2018-04-10 00:00
- 阅读 ( 1054 )
- 分类：电脑网络
admin
0 篇文章
作家榜 »
-
xiaonan123
189 文章
-
汤依妹儿
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
华志健
23 文章