Learning Path
浏览 CSS 参考手册 相关教程与章节。
HTML、CSS、JavaScript、浏览器 API、前端框架与 UI 工程。
教程
319
CSS flex-basis 属性 CSS 参考手册 实例 设置第二个弹性盒元素的初始长度为 80 像素： div:nth-of-type(2) {flex-basis: 80px;} 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。 属性 ..
CSS flex-direction 属性 CSS 参考手册 实例 设置 <div> 元素内弹性盒元素的方向为相反的顺序： [mycode3 type='css'] div { display:flex; flex-direction:row-reverse; } [/mycode3] 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏..
CSS flex-flow 属性 CSS 参考手册 实例 让弹性盒的元素以相反的顺序显示，且在必要的时候进行拆行： display:flex;flex-flow:row-reverse wrap; 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。 属性 ..
CSS flex-grow 属性 CSS 参考手册 实例 让第二个元素的宽度为其他元素的三倍： [mycode3 type='css'] div:nth-of-type(1) {flex-grow: 1;} div:nth-of-type(2) {flex-grow: 3;} div:nth-of-type(3) {flex-grow: 1;} [/mycode3] 尝试一下 » 浏览器支持..
CSS flex-shrink 属性 CSS 参考手册 实例 A, B, C 设置 flex-shrink:1， D , E 设置为 flex-shrink:2： [mycode3 type='html'] 菜鸟教程(runoob.com) [/mycode3][mycode3 type='css'] #content { display: flex; width: 5..
CSS flex-wrap 属性 CSS 参考手册 实例 让弹性盒元素在必要的时候拆行： [mycode3 type='css'] display:flex; flex-wrap: wrap; [/mycode3] 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。 ..
CSS flex 属性 CSS 参考手册 实例 让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容： [mycode3 type='css'] #main div { flex:1; } [/mycode3] 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一..
CSS3 @font-face 规则 实例 指定名为“myFirstFont”的字体，并指定在哪里可以找到它的URL： @font-face { font-family: myFirstFont; src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9 */ } 尝..
CSS3 font-size-adjust Property 实例 通过指定font-size-adjust属性，浏览器将调整字体大小，无论字体系列（“宋体”性质值0.58）： div { font-size-adjust: 0.58; } 尝试一下 » 浏览器支持 目前只有Firefox支持 font-size-adjust 属性. 属性定义及使用说明 font-size-adjust属性..
CSS3 font-stretch 属性 实例 让所有的div元素的文本更宽： div { font-stretch: expanded; } 尝试一下 » 浏览器支持 目前没有主流浏览器支持font-Stretch属性。 属性定义及使用说明 font-Stretch属性允许你使文字变宽或变窄。 默认值： none 继承： yes 版本： CSS3 J..
CSS gap 属性 实例 设置网格行与列之间的间隙： [mycode3 type='css'] .grid-container { gap: 50px; } [/mycode3] 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 属性 gap (多列中)..
CSS3 grid-rows 属性 实例 定义为100像素的标题行，必要的并添加许多附加的30和60像素的高度： div { grid-rows:100px (30px 60px); } 浏览器支持 目前所有主流浏览器都不支持支持grid-rows属性。 属性定义及使用说明 grid-rows属性指定在网格中的每一行的高度。 提示: 使用网格系统对于打印设计师来说具有巨大的价值。现在相同的..
CSS3 hanging-punctuation 属性 实例 p元素的第一行开始边缘放置一个标点符号： p { hanging-punctuation:first; } 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 属性 hanging-punctuation ..
CSS3 icon 属性 实例 将图像元素设置为图标化的等价物： img { content:icon; icon:url(imgicon.png); } 浏览器支持 没有主流浏览器支持icon属性。 属性定义及使用说明 icon 属性为创作者提供了将元素设置为图标等价物的能力。 注意：元素的图标是不可使用，除非“content”属性设置为“icon”！ 默认值： auto ..
CSS justify-content 属性 CSS 参考手册 实例 在弹性盒对象的 <div> 元素中的各项周围留有空白： [mycode3 type='css'] div { display: flex; justify-content: space-around; } [/mycode3] 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏..
CSS3 @media 查询 实例 如果文档宽度小于 300 像素则修改背景颜色(background-color): @media screen and (max-width: 300px) { body { backg..
CSS3 nav-down 属性 实例 规定在使用方向键时向何处导航： button#b1 { top:20%;left:25%; nav-index:1; nav-right:#b2;nav-left:#b4; nav-down:#b2;nav-up:#b4; } button#b2 { top:40%;left:50%; nav-index:2; nav-right:#b3;nav-left:#b1..
CSS3 nav-index 属性 实例 指定两个按钮的Tab键顺序： button#b1 { top:20%;left:25%; nav-index:1; nav-right:#b2;nav-left:#b4; nav-down:#b2;nav-up:#b4; } button#b2 { top:40%;left:50%; nav-index:2; nav-right:#b3;nav-left:#b..
CSS3 nav-left 属性 实例 指定导航使用向左箭头和右箭头导航键： button#b1 { top:20%;left:25%; nav-index:1; nav-right:#b2;nav-left:#b4; nav-down:#b2;nav-up:#b4; } button#b2 { top:40%;left:50%; nav-index:2; nav-right:#b3;nav-left:..
CSS3 nav-right 属性 实例 指定导航使用向左箭头和右箭头导航键： button#b1 { top:20%;left:25%; nav-index:1; nav-right:#b2;nav-left:#b4; nav-down:#b2;nav-up:#b4; } button#b2 { top:40%;left:50%; nav-index:2; nav-right:#b3;nav-left..
CSS3 nav-up 属性 实例 指定导航使用向上箭头和向下箭头导航键： button#b1 { top:20%;left:25%; nav-index:1; nav-right:#b2;nav-left:#b4; nav-down:#b2;nav-up:#b4; } button#b2 { top:40%;left:50%; nav-index:2; nav-right:#b3;nav-left:#..
CSS3 opacity 属性 实例 设置一个div元素的透明度级别： [mycode3 type='css'] div { opacity:0.5; } [/mycode3] 尝试一下 » 在此页底部有更多的例子。 浏览器支持 所有主流浏览器都支持 opacity 属性。 注意：IE8和早期版本支持另一种过滤器属性。像：filter:Alpha(opacity=50) 属性定义及使用..
CSS order 属性 CSS 参考手册 实例 设置弹性盒对象元素的顺序： div#myRedDIV {order:2;} div#myBlueDIV {order:4;} div#myGreenDIV {order:3;} div#myPinkDIV {order:1;} 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在 -webkit-, -ms- ..
CSS3 outline-offset 属性 实例 指定外边框边缘的轮廓15px： div { border:2px solid black; outline:2px solid red; outline-offset:15px; } 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性..