css笔记

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}