作者:Tim Vam Damme 让我们来看看一种超轻量级的方法,它可以为一组任意大小的照片创建水平砖砌效果。将任何照片丢到上面,它们将边对边无缝对齐。 该解决方案不仅轻巧,而且非常简单。我们将使用无序的图片列表和仅仅17行CSS代码,其中重点要领是flexbox和object-fit。 #为什么? ...
分类:
其他好文 时间:
2019-10-10 13:00:20
阅读次数:
85
上篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法。 你会看到,不管是什么布局,Flex往往都可以几行命令搞定。 我只列出代码,详细的语法解释请查阅《Flex布局教程:语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。 一、骰子的布局 ...
分类:
其他好文 时间:
2019-10-06 17:06:37
阅读次数:
106
弹性盒 flexbil box or flexbox, css3的一种布局模式,页面可以适应屏幕大小与设备确保元素保持原来布局的方式,由弹性容器flex container,弹性子元素flex item组成,设置display来实现。 x轴代表主轴,从左到右,y轴代表侧轴,从上到下,主轴不一定是水平 ...
分类:
其他好文 时间:
2019-10-02 16:56:50
阅读次数:
75
cursor 设置鼠标放上去后的形状 visability 设置是否可见 flex 详见这篇文章 "https://developer.mozilla.org/zh CN/docs/Learn/CSS/CSS_layout/Flexbox" 设置方法 flex 模型 方向 换行 设置每项的宽度 fl ...
分类:
Web程序 时间:
2019-09-30 14:59:01
阅读次数:
118
移动端布局 rem单位 引入 rem.js 文件后,css 中就可以直接写 rem 单位了,改变移动端设备时,宽高会等比例更新。 flexbox布局(弹性盒布局) font-awesome 字体图标 transition 过渡 Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果 ...
分类:
移动开发 时间:
2019-09-20 22:45:30
阅读次数:
102
弹性盒子属性 一、align-content属性 属性作用:用于修改flex-wrap属性行为。类似于justify-content,但它不是设置弹性子元素的对齐,而是设置各个行的对齐。 属性值: flex-start 各行向侧轴的起始位置堆叠。 flex-end 各行向侧轴的结束位置堆叠。 cen ...
分类:
其他好文 时间:
2019-09-06 01:20:45
阅读次数:
121
1、示例一 实现左右布局,左侧宽度200px,右侧自适配 代码如下: 说明: display: -webkit-box; 适用于谷歌浏览器,火狐浏览器,IE Edge display: -ms-flexbox; 适用于IE11,我试了IE8,IE9,都支持不了 效果如下: 2、示例二 实现左中右布局 ...
分类:
Web程序 时间:
2019-05-25 16:58:13
阅读次数:
146
上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法。 你会看到,不管是什么布局,Flex往往都可以几行命令搞定。 我只列出代码,详细的语法解释请查阅《Flex布局教程:语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。 一、骰子的布局 ...
分类:
其他好文 时间:
2019-05-14 19:03:01
阅读次数:
152
一、CSS3弹性盒子 弹性盒子是CSS3的一种新布局模式。 CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分 ...
分类:
Web程序 时间:
2019-05-13 19:05:55
阅读次数:
138
*{margin: 0;padding: 0} //Reset(重置)浏览器默认样式【利:可以简单方便的一次性重置所有HTML网页元素的浏览器样式,代码少,控制量大。--弊:因为它重置了所有元素的样式,包括不需要重置的样式,例如table ,我们不需要去重置table元素的样式,所以还需要再为 ta... ...
分类:
其他好文 时间:
2019-04-28 12:39:20
阅读次数:
112