CSS
关注
分享
扫一扫
手册网
Hi,我也是一名程序猿我建立这个手册网（shouce.ren）是为了和同行的朋友一起成长。
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Flexible 弹性盒子模型之flex
实例让所有弹性盒模型对象的子元素都有相同的长度，忽略它们内部的内容：#main div{flex:1;}复制效果预览浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。 定义和用法flex 属性用于设置或检索弹性盒模型对...2016-12-28 08:40:45 · 174 阅读 · 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 · 247 阅读 · 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 · 296 阅读 · 0 评论 -
Flexible 弹性盒子模型之CSS justify-content 属性
实例在弹性盒对象的 <div> 元素中的各项周围留有空白：div{display: flex;justify-content: space-around;}复制效果预览浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个...2017-01-16 09:27:49 · 632 阅读 · 0 评论 -
Flexible 弹性盒子模型之CSS align-self 属性
实例居中对齐弹性对象元素内的某个项：#myBlueDiv{align-self:center;}复制效果预览浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。属性 align-self21.0...2017-01-13 08:34:19 · 312 阅读 · 0 评论 -
Flexible 弹性盒子模型之CSS align-items 属性
实例居中对齐弹性盒的各项 <div> 元素：div{display: flex;align-items:center;}复制效果预览浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。属性 ...2017-01-12 08:32:47 · 370 阅读 · 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 · 284 阅读 · 0 评论 -
Flexible 弹性盒子模型之CSS flex-wrap 属性
实例让弹性盒元素在必要的时候拆行：display:flex;flex-wrap: wrap;复制效果预览浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。属性 flex-wrap29.021.0 -we...2017-01-10 08:24:31 · 262 阅读 · 0 评论 -
Flexible 弹性盒子模型之CSS flex-direction
实例设置 <div> 元素内弹性盒元素的方向为相反的顺序：div{display:flex;flex-direction:row-reverse;}复制效果预览浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。...2017-01-09 08:52:53 · 207 阅读 · 0 评论 -
Flexible 弹性盒子模型之CSS flex-flow
实例让弹性盒的元素以相反的顺序显示，且在必要的时候进行拆行：display:flex;flex-flow:row-reverse wrap; 效果预览浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。属性 ...2017-01-06 08:29:02 · 182 阅读 · 0 评论 -
Flexible 弹性盒子模型之CSS flex-basis 属性
实例设置第二个弹性盒元素的初始长度为 80 像素：div:nth-of-type(2){flex-basis:80px;} 效果预览浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。属性 flex-basis2...2017-01-05 08:39:30 · 181 阅读 · 0 评论 -
Flexible 弹性盒子模型之CSS flex-shrink 属性
实例让第二个元素收缩到其他元素的三分之一： 效果预览div:nth-of-type(2){flex-shrink:3;}浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。属性 flex-shrink29.021.0 ...2017-01-04 19:50:07 · 234 阅读 · 0 评论 -
Flex 布局教程：语法篇
作者： 阮一峰网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，...2017-01-03 08:46:13 · 113 阅读 · 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 · 180 阅读 · 0 评论 -
Flex 布局教程：实例篇
该教程整理自 阮一峰Flexible教程今天介绍常见布局的Flex写法。你会看到，不管是什么布局，Flex往往都可以几行命令搞定。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。一、骰子的布局骰子的一面，最多可以放置9个点。下面，就来看看Flex如何实现，从1个点到9个点的布局。你可以到codepen查看Demo。如...2016-12-29 08:41:46 · 135 阅读 · 0 评论 -
CSS4.2.3 参考手册.CHM
手册名称在线版离线版CHMCSS4.2.3 参考手册阅读下载CSS3.0 中文手册阅读下载CSS2.0 参考手册阅读下载原创 2017-02-23 11:07:39 · 1055 阅读 · 1 评论