完成css3的盒模型流式布局事例分享

 时间:2024-10-14 05:54:39

1、既然是规律的控制盒子模型,那么大量的 div 是不错的例子应用 元素,初始做的时候,就分为了 大 中 小,由中 div 作为父元素容器,之后控制下面的子元素 div 实现效果;

完成css3的盒模型流式布局事例分享
完成css3的盒模型流式布局事例分享

2、我们先控制 大 div 的样式,完成基础的页面布局,不仅要有效果,一定的美观也是必要的,如图二,就是我们存放和展示 流式布局 的容器;样式代码可以看图一;

完成css3的盒模型流式布局事例分享
完成css3的盒模型流式布局事例分享

3、这里 span 标签单独拿出来是为做标记,三个中 div 中的 小 div 个数不同,以span作为间隔和标记

完成css3的盒模型流式布局事例分享
完成css3的盒模型流式布局事例分享

4、然后我们控制 中 div ,必要的样式就不做解释了;display:flex;訇咀喃谆将元素作为弹性伸缩盒;flex-flow;伸缩流方向与换行;align-content;多行子项在容器内垂直对齐方式;

完成css3的盒模型流式布局事例分享
完成css3的盒模型流式布局事例分享

5、控制 小 div,高度 height,边框 border,背景色 background-color;关键的 box-sizing:border;( 感觉就是把宽度和高度设置为相同的数值,但是还有很多细节,大家最好查资料)flex:0 0 25%;(控制该元素的伸缩性)

完成css3的盒模型流式布局事例分享
完成css3的盒模型流式布局事例分享
  • 如何使用纯css实现图片轮播效果?
  • Dreamweaver CS5网页制作教程
  • DwCC 2018怎么关闭标题后切换到普通段落
  • 用HTML做一个表格(table标签)
  • Power View中显示地图背景对此区域设置不可用?
  • 热门搜索
    我的家庭手抄报 六一儿童节手抄报内容资料 好看的手抄报图片大全 寓言故事手抄报 关于普法的手抄报 节约用电手抄报内容 四年级上册手抄报 文明交通我见证手抄报 清明祭奠英烈手抄报 三四年级中秋节手抄报