个人 css 常用样式

页面总体3个部分，topbar:70px；sidebar：菜单栏，高度始终撑满页面；右侧主题内容区域：高度不定

一般我们会通过JS去计算出页面的高度然后减去topbar的高度70px， 然后再给sidebar加个计算后的高度。

这里可以直接利用CSS3 函数calc()计算高度：
.sidebar{
height: calc(100vh – 70px)；
}

 

 button {
	width: 236px;
	height: 42px;
	line-height: 42px;
	text-align: center;
	outline: none;
	border: none;
	background: linear-gradient(to bottom, #009dee, #0076ee);
	cursor: pointer;
	letter-spacing: 1px;
	font-size: 14px;
	color: #fff;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

 button:hover {
	background: linear-gradient(to bottom, #0086ee, #0079ee);
}

height: calc(100% - 138px);
       background: deepskyblue;
    -webkit-overflow-scrolling: touch; /* 苹果手机端滑动不流畅 */
       color: #034681;/* 颜色 */
       font-size: 12px;/* 文字大小 */
      font-weight: 300;/* 文字粗细 */
       line-height: 24px;/* 文字行高 */
      letter-spacing: 1px;/* 文字间距 */
       column-count: 3; /* 将 div 元素中的文本分为三列 */
      font-variant: small-caps;/* 把段落设置为小型大写字母字体 */
       white-space: nowrap;/* 文字不换行 */
     word-wrap: break-word;/* 文字换行 */
     direction: rtl;/* 把文本方向设置为“从右向左” */
    text-align: center;/* 文字居中 */
    text-decoration: underline;/* 定义文本下的一条线。 */
    text-indent: 10px;/* 将段落的第一行缩进 10 像素 */
    text-transform: capitalize; /* 文本中的每个单词以大写字母开头。 */
       word-spacing: 25px;/* 单词间距 */
       text-shadow: 0 0 10px #000;/* 文本阴影 */
    background: linear-gradient(to bottom, #444444, #333333); /* 标准的语法（必须放在最后） */。
    box-sizing: border-box;
    box-shadow: 0 0 10px #f90;

.flex{

display:flex;

justfiy-content:center;

algin-items:center;

flex-wrap:wrap;

flex-direction:column;

}