1、flex布局 案例一： 案例二： 保证不至于缩放得太小或太大 案例三：flex的值不一定要写成几份，可以写成固定值 案例四： 竖着3等分（父容器按照高度3等分） !!案例 用flex布局写携程网（发现携程网是伸缩布局：根据屏幕自适应） flex: 2 意义是啥 （剩余宽度里占比2等份） flex ...
分类：
Web程序 时间：
2019-04-21 10:18:15
阅读次数：
178
Web页面的布局，我们常见的主要有“浮动布局（float）”、“定位布局（position）”、“行内块布局（inline-block）”、“CSS3的多栏布局（Columns）”、“伸缩布局（Flexbox）”以及“网格布局（Grids）”等，在众多布局方法中，大家最为熟悉的就是浮动布局和网格布局 ...
分类：
其他好文 时间：
2019-03-21 11:59:52
阅读次数：
225
Flex布局 即display: flex; 1.flex-direction: 未加display: flex; 添加display: flex; flex-decoration: row-reverse; (-webkit) flex-direction: column; flex-direct ...
分类：
其他好文 时间：
2019-02-23 01:25:30
阅读次数：
142
CSS3伸缩布局盒模型早期的布局主要依赖于表格，从CSS2.1中有关于布局的机制有所改变，但还是并不多。开发者通常不愿意使用绝对定位，因为太不灵活；浮动定位常用于页面的布局，但对于全页多列布局来说，它总是存在一些小毛病，功能上也有很多限制。CSS3中引入了许多的布局机制，使构建一个多列布局变得更加轻松，同时，CSS2.1规则是比较难实现的一些复杂布局表现，如今也变得更加容易。弹性盒模型：Flexb
分类：
Web程序 时间：
2018-10-06 14:31:46
阅读次数：
215
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv ...
分类：
Web程序 时间：
2018-09-26 00:12:53
阅读次数：
226
/** * YDUI 可伸缩布局方案 * rem计算方式：设计图尺寸px / 100 = 实际rem 例: 100px = 1rem */ !function (window) { /* 设计图文档宽度 */ var docWidth = 750; var doc = window.document... ...
分类：
其他好文 时间：
2018-09-18 19:04:54
阅读次数：
245
今天利用CSS3来画一个自动滚动的骰子。 思路：骰子的六个面分别用六个ul标签，每个面的点数就是li标签，点数的排列采用伸缩布局，然后采用定位和transform属性将六个面翻转折叠成立方体。 1、HTML结构：用一个类名为box的大盒子将六个面（ul）包起来，方便给整个骰子定位和添加动画；每个ul ...
分类：
Web程序 时间：
2018-08-21 23:29:50
阅读次数：
883
伸缩布局 布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便。CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。 a) dis ...
分类：
其他好文 时间：
2018-08-07 00:32:51
阅读次数：
196
CSS3提供一种崭新的布局方式：Flexbox布局，即弹性伸缩布局模型(FlexibleBox)。用来提供一个更加有效的方式实现响应式布局。但是用于这个布局方式还处于W3C的草案阶段，并且它还分为旧版本、新版本以及混合过渡版本三种不同的编码方式。在发展中，可能还有各种改动，浏览器的兼容性还存在问题。首先，我们来看下旧版本的浏览器兼容情况：以上的数据，我们摘自CSS3手册上的。当然，不同的教材和文章
分类：
Web程序 时间：
2018-05-01 20:39:42
阅读次数：
338
第二十九章 CSS3弹性伸缩布局【下】 一、新版本 （可以让心浏览器全面兼容，在未来浏览器更新换代中实现统一） 首先，设置伸缩盒的display有如下两个属性 （1）flex 将容器盒模型作为块级弹性伸缩盒显示（新版本） （2）inline-flex 将容器盒模型作为内联级弹性伸缩盒显示（新版本） ...
分类：
Web程序 时间：
2018-02-28 19:49:14
阅读次数：
186
