1、项目初始 基于vue-cli搭建项目 vue create news-app 页面采用flex布局、样式使用sass 2、首页的搭建 主要包括导航栏，轮播图，及主要新闻的展示 2、点击导航栏可进行不同新闻的切换 通过id的不同获得不同的数据，进行页面渲染，每个页面只展示5条数据，对页面进行分页， ...
分类：
Web程序 时间：
2020-07-20 15:50:35
阅读次数：
169
1.2 组件 1.2.1 text组件 编写文本信息，类似于HTTP中的span 1.2.2 view组件 容器，类似于HTTP中的div 1.2.3 image组件 图片显示组件 1.3 页面flex布局 一种非常方便的通用布局方式 1.3.1 flex-direction 规定主轴方向 colu ...
分类：
微信 时间：
2020-07-18 11:25:45
阅读次数：
105
概念 开启了flex布局的元素叫做flex container display设置为flex（以block形式）或者inline-flex（以inline形式） flex container的直接子元素叫做flex items 模型 main axis：主轴（默认是x轴， 可以改变） cross a ...
分类：
其他好文 时间：
2020-07-14 00:57:20
阅读次数：
93
网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案 Flex 布局，可以简便、完整、响应式地 ...
分类：
其他好文 时间：
2020-06-30 10:28:51
阅读次数：
76
1：找个容器： .container { display: flex | inline-flex; //可以有两种取值：块元素，行内元素 } 2：容器的设置： .container { flex-direction: row | row-reverse | column | column-rever ...
分类：
其他好文 时间：
2020-06-29 13:17:23
阅读次数：
63
[A] flex弹性布局 flex弹性盒模型 2009年。W3C提出一种新的方案 flex布局，可以简便，完整，响应式的实现各种布局。 目前他已经得到了所有的浏览器的支持，这意味着，这项功能可以被安全使用 作用在flex容器上的属性 作用在flex子元素上的属性 flex-direction ord ...
分类：
Web程序 时间：
2020-06-17 20:02:31
阅读次数：
57
CSS 1.position：sticky 粘性定位，必须要设置top,bottom,left,right其中一个，最近在做吸顶效果用到了。 2.flex布局中的justify-content：space-evenly，这个是各元素之间以及两边元素的空白相等，（space-around是两边元素空白 ...
分类：
Web程序 时间：
2020-06-17 18:09:41
阅读次数：
65
主要实战技巧 1、自动撑满剩下 设置flex布局 一项定死宽度/高度 剩下的利用 flex：auto 撑满 .父{ display:flex; width:2000px } .子1{ flex:auto } .子2{ width:200px } 2、垂直居中 (1)古董方法 外围一半 - 自身一半 ...
分类：
Web程序 时间：
2020-06-13 17:36:21
阅读次数：
74
关于flex布局 dispaly：flex;添加到父元素上，决定了它的子元素的布局 以下都是添加在父元素上的属性： 1、flex-direction:决定了子元素在弹性盒内的主轴方向 1、row默认的x轴从左到右排列 2、row-reverse x轴倒序排列 3、column y轴从上到下排列 4. ...
分类：
其他好文 时间：
2020-06-12 17:32:03
阅读次数：
66
当小程序的flex布局遇到button时 发现justify-content不起作用，无论怎么设置都是space-around的效果。 经过排查，发现原因是小程序button中的默认样式中的margin-left: auto;margin-right: auto;所引起的 覆盖掉就好了 flex 格 ...
分类：
微信 时间：
2020-06-11 16:15:16
阅读次数：
94
