css小技巧
处理空元素
:empty::before {
content: '暂无';
color: gray;
}
.cs-article-module:empty::before{
content: '暂无数据;
display: block;
line-height: 300px;
text-align: center;
color: gray;
}
display flex属性
一、flex-direction: (元素排列方向)
row (横向从左到右排列==左对齐)
row-reverse (与row 相反)
column (从上往下排列==顶对齐)
column-reverse (与column 相反)
二、flex-wrap: (内容一行容不下的时候才有效)
nowrap (超出不换行,很奇怪里面的宽度会变成100%)
wrap (超出按父级的高度平分)
wrap-reverse(与wrap 相反)
三、justify-content: (水平对齐方式)
flex-start (水平左对齐)
flex-end; (水平右对齐)
center; (水平居中对齐)
space-between; (两端对齐)
space-around; (两端间距对其)
四、align-items: (垂直对齐方式)
stretch; (默认)
flex-start; (上对齐,和默认差不多)
flex-end; (下对齐)
center;(居中对齐)
baseline; (基线对齐)
div内容居中对齐
display: flex;
display: -webkit-flex;
align-items:center;
justify-content:center;
伪类元素
:link 用这个可以设置未被访问的链接的样式
:visited 用这个设置已经被访问的链接的样式
:hover 用于设置将鼠标悬浮在链接上的样式
:active 用于设置鼠标点击链接时到鼠标松开时的样式
:focus 用于设置用键盘将焦点放在链接上时的样式(如用tab键或者上下键来移动页面焦点时)
常用列表元素
常用于列表元素的几个伪类
:first-child 选中列表中的第一个元素
:last-child 选中列表中的最后一个元素
:nth-child() 括号里面的取值可以为三类:
1)数字 :nth-child(3)表示选中父元素的第三个子元素
2)自变量为n的表达式 :nth-child(3n)代表选中父元素的第3,6,9…3n的子元素
3)even或者odd 分别代表选中父元素的奇数或者偶数个子元素
:nth-last-child() 与 :nth-child()的不同点在于,这个是从最后一个元素开始计算,取值都是一样的。
calc() function, 计算属性值
div {width: calc(100% - 100px);}例子就是让宽度为100%减去100px的值
Font-Size 基准
假设浏览器的默认的大小是 16px , 首先将其设置为10px (font-size:10/16) /body {font-size:10/16;}/ 然后就可以用em做统一字体单位了 2.4em = 24px */h1 {font-size: 2.4 em}