设置最外层父容器viewport的最大宽度和最小宽度
.viewport { min-width: 1024px; max-width: 1920px; margin: 0 auto; }准备一个超大盒子viewport 在最外层包裹数据可视化看板，用flex布局划分为三份（即三列：左、中、右）：
column 列容器（分三列）：占比 3：4：3 中间容器外间距 32px 20px 0
给大盒子 viewport 指定背景图片，做为看板头部 Logo 要求： viewport 主体容器 - 限制最小宽度1024px，最大宽度1920px，最小高度780px。其它样式如下，
居中显示使用logo.png做为背景图，在容器内显示内间距 88px 20px 0在主体容器viewport内添加3个盒子（上面提到的布局：左、中、右3列column）
<div class="viewport"> <div class="column">1</div> <div class="column">2</div> <div class="column">3</div> </div>一张背景图片，如果想要完全显示出来，用background-size: contain，如果只想要铺满整个盒子，就用background-size: cover（对于后者，如图缩放浏览窗口，图片不会居中，且图片的一侧不会显示）。
.viewport { /* 如果不加background-size: contain, 头部背景图会超出缩放后的浏览器看不全*/ display: flex; min-width: 1024px; max-width: 1920px; padding: 1.5rem .25rem 0; /*解决头部logo.png背景图被遮盖的问题，使其向内挤压*/ margin: 0 auto; background: url(../images/logo.png) no-repeat 0 0 /contain; /*这里采用了连写*/ min-height: 780px; } 按 3：4：3的比例设置3个column盒子占整个屏幕的份数。 .viewport .column { flex: 3; } .viewport .column:nth-child(2) { flex: 4; }display: flex 既可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
flex-direction:row：沿水平主轴让元素从左向右排列；flex-direction:column：让元素沿垂直主轴从上到下垂直排列；flex-direction:row-reverse：沿水平主轴让元素从右向左排列；更多相关知识：点我学习 Flex布局 语法教程
到此为止，初步外部轮廓如下：
接下来，进行模块的细分，划分如下：
css3中自适应边框图片运用：
下图是截取了最终效果图的部分，我们能观察到边框的特点（盒子大小不一，但都有相似的边框）。
因此，这里引入新的知识点——边框图片
相关知识点：
边框图片使用场景；边框图片切割原理；边框图片语法规范。1、在本可视化项目中，盒子的大小不同，但是边框样式相同，此时就不能用背景图片来完成，而需要用边框图片来实现。 区别于给盒子加背景，边框图片只针对盒子的边框（类似于给边框加颜色）。如下图所示：
为了实现丰富多彩的边框效果，在CSS3中，新增了 border-image属性，这个新属性允许指定一幅图像作为元素的边框。 注意：它是边框类型，不是盒子类型
2、边框图片切割原理 原理：把四个角切出去（九宫格的由来），中间部分可以铺排、拉伸或者环绕。
注：按照 上→右→下→左的顺序切割。切的时候，要兼顾四个角的最大完整性。
3、边框图片语法
属性描述border-image-source用在边框的图片的路径（图片来源）border-image-slice图片边框向内偏移。（裁剪的尺寸不能带单位。按上→右→下→左的顺序）border-image-width图片边框的宽度（注：要带单位）border-image-repeat图片边框是否平铺（repeat）、铺满（round）、或拉伸（stretch）默认是拉伸。border-image-width ：如果不做设置，则默认为盒子边框宽度（border的值） border 同border-image-width的区别：后者如果加大值，不会挤压盒子内空间（前者会）。
项目设计稿中，面板中的模块不论大小，其图片边框都是相同的，因此需要把边框的公共样式提取出来，写一个公共的面板样式类（.panel），哪个盒子用到这种样式，就直接调用这个类。 面板类：.panel
利用FireWorks对边框图片设计稿进行测量，得到如下数据：
面板.panel的CSS 样式代码： .panel { border: 15px solid #e33333; border-width: .625rem .475rem .2625rem 1.625rem; /*输入50px 38px 21px 130px后自动转换为rem*/ border-image-source: url(../images/border.png); border-image-slice: 50 38 21 130; /*注意：此处一定不要跟单位*/ }注意： 这里省去了border-image-width，原因如下： ~上面样式代码中，由于已给了边框宽度border-width，此时边框图片宽度就不用给了。因为边框图片宽度border-image-width（未设置时） 默认和边框宽度一样。
保存并运行，此时页面渲染情况如下所示：
在面板.panel 中放入一个子容器.inner，键入文字“内容位置测试”，运行后盒子中显示的内容在整个.panel中明显靠下，如下图：
原因：是之前设置的4个边框宽度过宽，占用了Panel内部空间所致，如下图所示：
解决办法上图中，黄色区域（.inner子盒子）如要填满图片框区域，以使得文字信息靠左上，解决方法如下：
将小盒子绝对定位，相应的父盒子相对定位；由于是绝对定位，此时可将小盒子向top、right、bottom、left四个方向拉伸以填满图片框区域。拉伸的值，取前面切图尺寸的负值（即反向）。CSS代码如下：
.panel { position: relative; /*相对定位*/ }给父容器添加相对定位
.inner { position: absolute; /*绝对定位*/ top: -0.625rem; right: -0.475rem; bottom: -.2625rem; left: -1.625rem; }这样，子盒子.inner就填满整个父盒子.panel，效果如下：
经测量，子容器.inner 距父元素.panel上下24px，左右 36px(均需转换为（em单位），添加如下CSS样式代码：
.inner { position: absolute; top: -0.625rem; right: -0.475rem; bottom: -.2625rem; left: -1.625rem; padding: .3rem .45rem; }调整后的最终位置如下图：
下外边距：20px（需转换为rem单位）
.panel { margin-bottom: .25rem; border: 15px solid transparent; /*将边框线由原来的#e33333红色改为透明，防止图片显示不出来*/ }项目中使用了字体图标，如下图。因此
注意：引入时，字体图标必须放在自己书写的css样式之前，才能调用。
直接调用图标对应的类名即可。（类名在css文件中标注）
引入css文件和声明字体图标时，注意路径问题。
概览区域即整个大的区域，但由于和面板Ppanel同样都用到.panel类，因此，在原HTML结构中，加入一个.overview类：
HTML结构：
<body> <!-- 最外层父容器 --> <div class="viewport"> <div class="column"> <div class="panel overview"> <div class="inner"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </div> </div> <div class="column">2</div> <div class="column">3</div> </div> </body>CSS样式：
.overview { height: 1.375rem; } .overview ul { display: flex; /*让li一行显示*/ justify-content: space-between; /*两端对齐并平均分配*/ }布局效果如下图：
用<i></i>标签包裹字体图标，并用行内样式修改为设计稿的指定颜色
<i class="icon-dot" style="color: #006cff"></i> <i class="icon-dot" style="color: #6acca3"></i> <i class="icon-dot" style="color: #6acca3"></i> <i class="icon-dot" style="color: #ed3f35"></i>添加文字内容和字体图标后，效果如下：
粗体字调整：去掉h4内的字体加粗（设计稿中的数字字体较细）
h4 { /* font-weight: 400; */ font-weight: normal; }至此，第一个模块样式处理完毕
原文地址：https://oldriver.blog.csdn.net/article/details/107133895
上一章：学习笔记之数据可视化（一）—— 项目适配方案 下一章：学习笔记之数据可视化（二）——页面布局（中）
