网页布局（layout）是CSS的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案 Flex布局，可以简便、完整、响应式地实现各种 ...
分类：
其他好文 时间：
2017-04-03 16:20:19
阅读次数：
242
flex布局，弹性盒子 1.display：flex 设置flex布局后，子元素的float、clear和vertical-align属性将失效 2.flex-direction 决定主轴的方向（即项目的排列方向） 属性：row|row-reverse|colum|column-reverse 3. ...
分类：
其他好文 时间：
2017-04-02 21:23:11
阅读次数：
139
CSS页面布局是web前端开发的最基本的技能，本文将介绍一些常见的布局方法，涉及到盒子布局，column布局，flex布局等内容。本文中，你可以看到一些水平垂直居中的方法，左侧固定宽度，右侧自适应的一些方法。如果你有更多关于布局方面的技巧，欢迎留言交流。 ...
分类：
Web程序 时间：
2017-03-30 23:12:26
阅读次数：
266
1.浮动法，左列左浮动，右列右浮动，插入主体。中间内容#main必须要在最后加入，#main占一行会影响后面的浮动元素 2.margin负值法，每个盒子都向一边浮动，通过负margin把盒子拉到左侧，先放中间的盒子 3.绝对定位，左右两列绝对定位，中间用margin撑开距离。最容易理解 4.flex ...
分类：
其他好文 时间：
2017-03-29 20:10:26
阅读次数：
145
React全家桶：1.react库主题；2.webpack 自动化的一个构架工具（grunt gulp);3.flex 布局用的；4.redux view层用，把特别复杂的html页面分成一部分一部分的；5.babel:编译器； jsx语法： 不能直接用，要编译；它就相当于js编译器，把普通的js转 ...
分类：
其他好文 时间：
2017-03-27 22:54:47
阅读次数：
215
假设父容器class为 box,子项目为item.旧版语法如下：一：定义容器的display属性。旧语法如下写法： 新版语法需要如下写： 或者 行内 二：容器属性(旧版语法)1. box-pack 属性;(水平方向上对齐方式)box-pack定义子元素主轴对齐方式。 box-pack属性总共有4个值 ...
分类：
其他好文 时间：
2017-03-24 23:09:08
阅读次数：
214
如图： 代码如下： 1 <!DOCTYPE HTML> 2 <html> 3 <meta charset="utf-8"> 4 <head> 5 <link href="flex.css" rel="stylesheet" type="text/css"> 6 </head> 7 <body> 8 ...
分类：
其他好文 时间：
2017-03-23 02:32:37
阅读次数：
280
flexbox 弹性盒布局和布局原理 新版的flexbox规范分两部分：一部分是container，一部分是 items。 flexbox是一整套布局规范，包含了多个css属性，所以学习起来比`float: left;` 这样简单的布局要复杂很多。 基本原理 容器上有 主轴和纵轴的概念，默认主轴（m ...
分类：
其他好文 时间：
2017-03-23 02:08:25
阅读次数：
275
布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 F ...
分类：
其他好文 时间：
2017-03-23 01:54:14
阅读次数：
183
语法： 失效属性：vertical-align，float,clear; 居中： 垂直： 圣杯局部： body{ display:flex; min-height:100%; flex-direction:column; } header,footer{ flex:1; } .content{ di ...
分类：
其他好文 时间：
2017-03-21 22:28:13
阅读次数：
108
