在传统的css布局，都是依赖于position，float，dosplay进行。在一些特定的布局的实现上往往很不方便，比如一个元素的垂直居中。鉴于这种关系，2009年，W3C 提出了一种新的方案 Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着， ...
分类：
Web程序 时间：
2020-02-17 15:42:51
阅读次数：
102
当一行有三个元素的时候直接加个伪类就行，三个以上就需要加占位元素了 <div class="hot-content"> <div class="hotList"></div> <div class="pick"></div> <div class="pick"></div> 一行显示五个，多余换行 ...
分类：
其他好文 时间：
2020-02-03 17:28:49
阅读次数：
363
弹性容器：在元素上设置了display：flex属性的即为弹性容器，弹性容器上的弹性子元素就会按照弹性布局的方式进行布局 弹性子元素：弹性容器上的直接字元素即为弹性子元素 注意:默认弹性子元素只会排成1行或1列，不会换行。 一、 <!DOCTYPE html> <html> <head> <meta ...
分类：
其他好文 时间：
2020-01-30 17:08:58
阅读次数：
60
如果你刚刚说开心，说鸡冻，说嘚瑟，那你完了，你高兴得太早了，毕竟小程序布局的技术，Flex都还没开始学，等学会再嘚瑟吧。
Flex是Flexible Box的缩写，意为”弹性布局”，可以支持从左到右，从上到下...... ...
分类：
微信 时间：
2020-01-23 15:30:34
阅读次数：
159
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> ul, li { margin: 0; padding: 0; } div{ width: 500px; height: auto; displa ...
分类：
其他好文 时间：
2020-01-21 00:49:03
阅读次数：
99
双飞翼布局，就是两端固定宽高，中间自适应的三栏布局 先来张图，左边和右边的灰色块是固定宽高的，中间绿色的区域是宽高自适应 方式一：通过flex弹性布局来实现 看代码 //HTML结构，div2是中间的自适应区域 ... <body> <div class="wrap"> <div class="di ...
分类：
Web程序 时间：
2020-01-20 14:45:21
阅读次数：
89
css flex弹性布局学习总结 一、简要介绍 flex（ flexible box：弹性布局盒模型）,是2009年w3c提出的一种可以简洁、快速弹性布局的属性。 主要思想是给予容器控制内部元素高度和宽度的能力。目前已得到以下浏览器支持： 其中在webkit内核的浏览器中使用时，必须加上-webki ...
分类：
Web程序 时间：
2020-01-17 21:07:57
阅读次数：
88
1 弹性布局简介 弹性布局，又称“Flex布局”，是由W3C在2009年推出的一种布局方式。可以简便、完整、响应式地实现各种页面布局。而且已经得到所有主流浏览器的支持，我们可以放心大胆的使用。 >>> 了解两个基本概念，接下来会频繁提到： ① 容器： 需要添加弹性布局的父元素； ② 项目： 弹性布局 ...
分类：
其他好文 时间：
2020-01-16 18:45:37
阅读次数：
160
"原文链接" 响应式布局 自从进入移动互联网时代，响应式布局这个词经常出现在 Web 设计和开发领域，它让 Web 页面在不同尺寸的设备上都具有良好的浏览体验。 开始之前 在讲解响应式布局之前，需要先了解一下基础知识，只有对它们都有一定的了解，才能在做响应式布局时选取合适的技术方案。 像素 像素这个 ...
分类：
Web程序 时间：
2020-01-13 14:34:27
阅读次数：
120
一、新增选择器 结构伪类选择器 :root——根选择器 :nth child(an+b)——子元素选择器。下标是a的倍数，偏移b个的子元素，n从0计数。odd奇数，even偶数。 :nth last child(n)——倒数第n个 :last child——最后一个 :only child——属于其 ...
分类：
Web程序 时间：
2020-01-07 19:39:02
阅读次数：
106
