一.移动优先 手机设计稿通常更为简约,由手机设计稿开始制作简单版本,随着平板和桌面的引入,页面慢慢复杂,这是一个递增的过程,前期把精力放到核心模块上,默认打开简洁的手机样式,而负责的样式包裹在media query中,所以不会加载,这样访问速度是最佳的 .content { /*basic effe ...
分类:
Web程序 时间:
2018-01-20 16:29:20
阅读次数:
161
本文讲解CSS3相关实用知识点 CSS3相关实用知识点目录 "边框设置" "颜色设置" "背景设置" "渐变使用" "超出文本设置" "阴影设置" "CSS3变换设置" "过渡设置" "动画设置" "多列布局" "BoxSizing设置" "弹性布局" "滤镜函数" "媒体查询" "resize元素 ...
分类:
Web程序 时间:
2018-01-19 22:17:35
阅读次数:
282
为什么要用flex 布局的传统解决方案,基于盒状模型,依赖display属性+position属性+float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,w3c提出了一种新的方案 flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的 ...
分类:
其他好文 时间:
2018-01-18 18:52:34
阅读次数:
186
CSS弹性布局(diaplay:flex;) http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html CSS自动换行、强制不换行、强制断行、超出显示省略号http://blog.csdn.net/liuyan19891230/article/ ...
分类:
Web程序 时间:
2018-01-15 14:51:38
阅读次数:
135
flex 是flexible box的缩写,意思是“弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以设置为flex 布局,但是,设置为flex 布局后,子元素的 float 、clear 、和vertical-align 属性将失效。 设置了 flex 属性的元素称为容器,它的所有子元 ...
分类:
Web程序 时间:
2018-01-14 20:17:37
阅读次数:
222
弹性盒(flexbox, flexible box的简称)为css添加了一种新的布局模式,即弹性布局。 弹性盒提供了很多有用的属性,不需要使用浮动或者line-block值就能把多个元素排成一行。建立弹性盒子首先要提供两个组件。1. 弹性容器,建立弹性容器很简单,把div的display属性写成fl ...
分类:
Web程序 时间:
2018-01-13 20:52:16
阅读次数:
167
布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 一、Flex布局是什么? Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。 任何一个容器都 ...
分类:
其他好文 时间:
2018-01-13 15:43:38
阅读次数:
193
flex布局,又叫弹性布局,是HTML5(css3)中新出的布局方式,主要用于替代传统的float布局。 flex-direction:设置布局方向。 默认从左到右row。 row-reverse从右到左。 column从上到下。 column-reverse从下到上。 justify-conten ...
分类:
其他好文 时间:
2018-01-12 22:35:30
阅读次数:
192
Flex布局flex布局是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局,包括行内元素,例如: .box{ display: inline-flex;}Webkit 内核的浏览器,必须加上-webkit前缀。.box{ ...
分类:
其他好文 时间:
2018-01-12 13:29:43
阅读次数:
159
本文介绍css3弹性布局的语法 1. html布局 2. css写法(弹性布局默认是x轴为主轴,并且从左到右依次显示) 3. 小例子 ...
分类:
Web程序 时间:
2018-01-08 16:39:00
阅读次数:
210