CSS
关注
分享
扫一扫
手册网
Hi,我也是一名程序猿我建立这个手册网（shouce.ren）是为了和同行的朋友一起成长。
展开
-
Flexible 弹性盒子模型之flex
实例 让所有弹性盒模型对象的子元素都有相同的长度，忽略它们内部的内容： #main div { flex:1; } 复制 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。 定义和用法 flex 属性用于设置或检索弹性盒模型对...2016-12-28 08:40:45 · 152 阅读 · 0 评论 -
9种不同的面包屑和分布式多步骤导航
【常用面包屑】9种不同的面包屑和分布式多步骤导航 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/199...2017-02-21 08:36:49 · 205 阅读 · 0 评论 -
Flexible 弹性盒子模型之CSS order 属性
实例 设置弹性盒对象元素的顺序： div#myRedDIV {order:2;} div#myBlueDIV {order:4;} div#myGreenDIV {order:3;} div#myPinkDIV {order:1;} 复制 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在 -webkit-, -...2017-01-17 08:36:20 · 254 阅读 · 0 评论 -
Flexible 弹性盒子模型之CSS justify-content 属性
实例 在弹性盒对象的 <div> 元素中的各项周围留有空白： div { display: flex; justify-content: space-around; } 复制 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个...2017-01-16 09:27:49 · 595 阅读 · 0 评论 -
Flexible 弹性盒子模型之CSS align-self 属性
实例 居中对齐弹性对象元素内的某个项： #myBlueDiv { align-self:center; } 复制 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。 属性 align-self 21.0 ...2017-01-13 08:34:19 · 293 阅读 · 0 评论 -
Flexible 弹性盒子模型之CSS align-items 属性
实例 居中对齐弹性盒的各项 <div> 元素： div { display: flex; align-items:center; } 复制 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。 属性 ...2017-01-12 08:32:47 · 321 阅读 · 0 评论 -
CSS align-content 属性
实例 对齐弹性盒的 <div> 元素的各项： div { display: flex; flex-flow: row wrap; align-content:space-around; } 复制 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在 -webkit-, -ms- 或 -moz- 后的数字...2017-01-11 08:26:09 · 254 阅读 · 0 评论 -
Flexible 弹性盒子模型之CSS flex-wrap 属性
实例 让弹性盒元素在必要的时候拆行： display:flex; flex-wrap: wrap; 复制 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。 属性 flex-wrap 29.021.0 -we...2017-01-10 08:24:31 · 236 阅读 · 0 评论 -
Flexible 弹性盒子模型之CSS flex-direction
实例 设置 <div> 元素内弹性盒元素的方向为相反的顺序： div { display:flex; flex-direction:row-reverse; } 复制 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。 ...2017-01-09 08:52:53 · 180 阅读 · 0 评论 -
Flexible 弹性盒子模型之CSS flex-flow
实例 让弹性盒的元素以相反的顺序显示，且在必要的时候进行拆行： display:flex; flex-flow:row-reverse wrap; 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。 属性 ...2017-01-06 08:29:02 · 156 阅读 · 0 评论 -
Flexible 弹性盒子模型之CSS flex-basis 属性
实例 设置第二个弹性盒元素的初始长度为 80 像素： div:nth-of-type(2){flex-basis:80px;} 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。 属性 flex-basis 2...2017-01-05 08:39:30 · 167 阅读 · 0 评论 -
Flexible 弹性盒子模型之CSS flex-shrink 属性
实例 让第二个元素收缩到其他元素的三分之一： 效果预览 div:nth-of-type(2){flex-shrink:3;} 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。 属性 flex-shrink 29.021.0 ...2017-01-04 19:50:07 · 199 阅读 · 0 评论 -
Flex 布局教程：语法篇
作者： 阮一峰 网页布局（layout）是CSS的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，...2017-01-03 08:46:13 · 92 阅读 · 0 评论 -
Flexible 弹性盒子模型之CSS flex-grow 属性
实例 让第二个元素的宽度为其他元素的三倍： div:nth-of-type(1){flex-grow:1;} div:nth-of-type(2){flex-grow:3;} div:nth-of-type(3){flex-grow:1;} 复制 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在 -webkit-,...2016-12-30 08:36:36 · 160 阅读 · 0 评论 -
Flex 布局教程：实例篇
该教程整理自 阮一峰Flexible教程 今天介绍常见布局的Flex写法。你会看到，不管是什么布局，Flex往往都可以几行命令搞定。 我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。 一、骰子的布局 骰子的一面，最多可以放置9个点。 下面，就来看看Flex如何实现，从1个点到9个点的布局。你可以到codepen查看Demo。 如...2016-12-29 08:41:46 · 118 阅读 · 0 评论 -
CSS4.2.3 参考手册.CHM
手册名称 在线版 离线版CHM CSS4.2.3 参考手册 阅读 下载 CSS3.0 中文手册 阅读 下载 CSS2.0 参考手册 阅读 下载原创 2017-02-23 11:07:39 · 1007 阅读 · 1 评论