多行文本截断

div{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

开关

用两个元素分别充当开关的背景和开关的圆形按钮
在开关里再隐藏一个 input 元素来记录开关的状态值

<a class="tt-menu-item">
    <input class="tt-switch" type="checkbox" checked>
</a>


/* 切换开关 */
.tt-menu > .tt-menu-item > .tt-switch{
    position: relative;
    box-sizing: content-box;
    width: 2.6rem;
    height: 1.4rem;
    border: 1px solid #ccc;
    outline: 0;
    border-radius: .75rem;
    background-color: rgba(0, 0, 0, 0.1);
    /* 指定背景色过度动画*/
    transition: background-color .3s, border .3s;
    /* 去掉webkit内核里默认的样式 */
    -webkit-appearance: none;
    /* 去掉webkit内核里默认的点击效果 */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* 选中状态下，改变开关边框和背景色 */
.tt-menu > .tt-menu-item > .tt-switch:checked{
    border-color: #07C160;
    background-color: #07C160;
}
/* 使用::after伪元素实现圆形按钮的样式 */
.tt-menu > .tt-menu-item > .tt-switch::after{
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: .7rem;
    background-color: #FFFFFF;
    box-shadow: 0 0 2px #999;
    /* 指定圆运动动画 */
    transition: left .3s;
}
/* 选中状态下，更改圆形按钮的位置 */
.tt-menu > .tt-menu-item > .tt-switch:checked::after{
    left: 1.2rem;
}

模态框

需要用到transform CSS3 中用来对盒模型做变化的，可以用它对元素的形状、大小、位置和旋转角度等进行更改

translate(x,y)，这个属性值是用来改变元素的位置

transform: translate(30px, 50px);

scale(x,y), 这个属性值是用来调整元素大小

transform: scale(1.2, 1.5);

rotate(angle)，这个属性值用来调整元素的旋转角度

transform: rotate(45deg);

可以同时使用多种转变效果 transform: rotate(45deg) translate(30px, 50px) scale(1.2);

如果在 transform 的转化属性中使用百分比，那这个百分比的参照物就是当前盒子的宽度或高度,这样通过向上移动盒子自身高度的 50%，就可以把盒子的中心移到 top 值设定的地方。这样无论模态框窗口有多高，都可以保证窗口的中心距页面上边缘 45% 的需求。

/* 模态框窗口容器 */
.tt-modal .tt-modal-wrap{
    position: absolute;
    width: 75%;
    max-width: 480px;
    top: 45%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: auto;
    background: #fff;
    border-radius: .4rem;
    z-index: 301;
}
/* 模态框内容区 */
.tt-modal .tt-modal-body{
    padding: 1.8rem .8rem 1.5rem;
    text-align: center;
    font-size: .8rem;
    line-height: 1.2rem;
    overflow: hidden;
}
/* 模态框尾部 */
.tt-modal .tt-modal-footer{
    display: flex;
    border-top: 1px solid #ddd;
}

Article

linear-gradient是background-img属性中可取的一个属性值，也可以直接用于background属性中。这个属性值中包含三个主要信息：渐变的方向，渐变的颜色和渐变生效的位置。它完整的格式就是 background: linear-gradient( angle/direction, color1 position1, color2 position2, ...) 在这个结构中，可以用如下样式： background: linear-gradient(180deg, rgba(255,255,255,0) 0, #fff 100%);

布局

圣杯布局

.content{ padding-left:100px; padding-right:150px;}
.left{float: left; width:100px; margin-left:-100%; position:relative; left:-100px}
.right{float:left; width:150px; margin-left:-150px; position:relative; right:-150px;}
.middle{float:left; width:100%;}

双飞翼布局（圣杯布局补充）

去掉圣杯布局position, 增加inner让出左右

.content{ padding-left:100px; padding-right:150px;}
.left{float: left; width:100px; margin-left:-100%; }
.right{float:left; width:150px; margin-left:-150px; }
.middle{float:left; width:100%;}
.middle .inner{margin-left:100px; margin-right:150px;}
/*假等高*/
.content{overflow:hidden;}
.left, .right, .middle{padding-bottom:9999px; margin-bottom: -9999px;}

BFC 布局

.content{}
.left{width:100px;}
.right{width:150px;}
.middle{overflow:hidden;}

flex布局

.content{display:flex;}
.content .left{width:100px; flex: none; order:1;}
.content .right{width:150px; flex: none; order:3;}
.content .middle{ flex: auto; order:2;}
/*真等高*/
.content{ align-items:stretch;}

用css解决table文字溢出控制td显示字数

table{
	width:100px;
	table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
}
td{
	width:100%;
	word-break:keep-all;/* 不换行 */
	white-space:nowrap;/* 不换行 */
	overflow:hidden;
	text-overflow:ellipsis;
}

CSS整合笔记03小案例