css食用技巧

表格布局

父元素

display: table;
table-layout: fixed; /**为了限制超出表格宽度 **/
box-sizing: border-box;
width: 100%;

子元素

display: table-cell;
vertical-align: middle; /**定位位置 弹性居中 **/

• 表格布局内只有外padding才能撑开

子元素

display: table-cell;

如果内部是个图，需要外面加一层a标签
a标签的宽度和高度想撑起了就要用

height: 48px;
width: 48px;
box-sizing: border-box;
display: block;
margin: 0 auto;
position: relative;
left: auto;
top: auto;

内部的img需要设置为 display: block;

• display: table;会自动撑高2px；需要overflow: hidden;处理

块级布局

如果设置了块的宽度为100%
一定配合box-sizing: border-box;使用

width: 100%;
box-sizing: border-box;

可以让padding和边框都包裹在宽度里面

vertical-align: middle;
是个好标签，可以做到垂直水平居中

一行多余显示省略号

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

多行多余显示省略号 （2行）

text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; 
line-clamp: 2;
-webkit-box-orient: vertical;

多行的隐藏需要额外加上min-height:xxpx;属性用于兼容ie
兼容ie的多余隐藏写法

&_div{
width: 100%;
position: relative;
line-height: 24px;
max-height:48px;
overflow: hidden;
}
div::after {
content: "...";
position: absolute;
bottom: 0;
right: 8px;
padding-left: 30px;
background: -webkit-linear-gradient(left, transparent, #fff 50%);
background: -o-linear-gradient(right, transparent, #fff 50%);
background: -moz-linear-gradient(right, transparent, #fff 50%);
background: linear-gradient(to right, transparent, #fff 50%);
}

• inline-block 本身会在下方占据一点空白，默认不用居中对齐时，加上 vertical-align: top 消除掉
  所以 inline-block 需要和vertical-align: top 配合

display:inline-block;
vertical-align: top;

背景图片默认设置居中啥的

width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;

css选择器

:first-child //选第一个

:nth-child(2) //选第二个

:last-child //选最后一个

左定宽 右自适应布局

布局为：

<div class="content">
	<div class="left">div>
	<div class="right">div>
div>

弹性布局

.content{
	display:flex;
}
.left{
	width: 200px;
	background-color: red;
	height: 100px;
}
.right{
	flex: 1;
	background-color: blue;
	height: 100px;
}

margin+float

.content{
}
.left{
	width: 200px;
	background-color: red;
	height: 100px;
	float: left;
}
.right{
	background-color: blue;
	height: 100px;
	margin-left: 200px;
}

position+margin

.content{
	position: relative; /** 可有可无看情况 **/
}
.left{
	width: 200px;
	background-color: red;
	height: 100px;
	position: absolute;
}
.right{
	background-color: blue;
	height: 100px;
	margin-left: 200px;
}

表格布局

.content{
	display: table;
	table-layout: fixed;
	box-sizing: border-box;
	width: 100%;
}
.left{
	width: 200px;
	background-color: red;
	height: 100px;
	display: table-cell;
	vertical-align: middle;
}
.right{
	background-color: blue;
	height: 100px;
	display: table-cell;
	vertical-align: middle;
}

事件穿透

阻止事件传播 - 点击事件添加
e.stopPropagation()

允许事件穿透 - 样式添加
pointer-events: none;

动画

无限旋转

animation:loading 1.2s linear infinite;
@keyframes loading
{
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

背景图片

width: 16px;
height: 16px;
display: inline-block;
vertical-align: middle;
background-repeat: no-repeat;
background-position: inherit;
font-size: 0;
background-image: url("xxxx");

媒体查询

@media screen and (max-width: 1420px) {
    /** 小于1420 **/
}
@media screen and (min-width: 1790px) {
	/** 大于1790 **/
}

其他

1. 改写组件样式时，一定要用>去选择样式来改
2. …

待补充…