（1）：定位 子盒子用绝对定位（千万别给父盒子加相对定位） （2）flex布局 （3）使用grid网格布局: （4）使用table布局，一定要套一个空div，要不然整个页面都是空白的 ...
分类：
其他好文 时间：
2018-12-26 11:36:20
阅读次数：
307
转自：https://www.cnblogs.com/jerehedu/p/7358329.html 弹性布局，又称“Flex布局”，是由W3C老大哥于2009年推出的一种布局方式。可以简便、完整、响应式地实现各种页面布局。而且已经得到所有主流浏览器的支持，我们可以放心大胆的使用。 >>> 了解两个 ...
分类：
其他好文 时间：
2018-12-24 16:28:21
阅读次数：
137
页面一般可以分成三部分，头部，底部，中间内容部分。 一般不用考虑中间高度部分，因为可以靠内容撑开，然后让底部到达底部。但是当中间内容太少时，底部就会顶不到底部。 方法1、中间部分给一个最小高度(min-height = 100vh - 头部高度 - 底部高度). 方法2、flex 布局 ...
分类：
Web程序 时间：
2018-12-24 13:26:24
阅读次数：
206
flex布局就是弹性布局，任何一个容器都可以指定flex布局 div, span都是块级弹性布局: div,span都是行内布局(不换行,但可以设置高度): 弹性布局分为两大块: 弹性容器(父)的属性 和 项目(子)元素的属性； 父容器的属性： 1. flex-direction 规定了子元素的排列 ...
分类：
其他好文 时间：
2018-12-23 16:55:15
阅读次数：
105
之前的随笔从阮一峰老师那里学到了flex的基本用法及作用，现在来把flex具体运用到实例中，看看flex的弹性布局效果。 1. flex设置元素垂直居中对齐 在之前的一篇文章中记载过如何垂直居中对齐，方法有很多，但是在学习了flex布局之后，垂直居中更加容易实现 HTML代码： CSS代码： 效果如 ...
分类：
其他好文 时间：
2018-12-23 00:23:18
阅读次数：
146
网页布局（layout）是 CSS 的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案 Flex 布局，可以简便、完整、响应式 ...
分类：
其他好文 时间：
2018-12-22 01:20:08
阅读次数：
211
Flex 布局教程：实例篇 http://www.ruanyifeng.com/blog/2015/07/flex-examples.html Flex 布局教程：语法篇 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html ...
分类：
其他好文 时间：
2018-12-19 18:39:57
阅读次数：
220
一、什么是Flex布局？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 采用 Flex 布局的元素，称为 Fl ...
分类：
其他好文 时间：
2018-12-17 02:41:44
阅读次数：
236
前言： 最近在学习网页的布局，以下是我阅读过几篇比较好的博客简单的做了一个简单总结、并简单的尝试了一下。希望为以后的开发有所帮助。 参考博客：弹性布局详解 Flux布局教程 一、Flex布局是什么 Flex布局，又称“弹性布局”。2009年，W3C 提出了一种新的方案 Flex 布局，可以简便、完整 ...
分类：
其他好文 时间：
2018-12-16 13:27:45
阅读次数：
153
flex-grow、flex-shrink、flex-basis这三个属性的作用是：在flex布局中，父元素在不同宽度下，子元素是如何分配父元素的空间的。 其中，这三个属性都是在子元素上设置的。 注：下面讲的父元素，指以flex布局的元素(display:flex)。 flex-basis 该属性来 ...
分类：
其他好文 时间：
2018-12-15 00:57:50
阅读次数：
169
