CSS 世界

文本溢出

<style>   
/* 单行文本 */
.box{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* 多行文本 */
.box{
    word-break: break-all;
	display: -webkit-box;
	-webkit-line-clamp: 3;    /* 指定行数*/
	-webkit-box-orient: vertical;
	overflow: hidden;
}
</style>

画三角形

.box {
    content: '';
    position: absolute;
    border: 10px solid transparent;
    border-bottom-color: pink;
}

表单

/* 所有表单的placeholder 默认颜色 */
/* IE9及以下版本不支持input的placeholder属性，需要用JS来做兼容。 */
input::-webkit-input-placeholder{
    color:red;
}
input::-moz-placeholder{   /* Mozilla Firefox 19+ */
    color:red;
}　　
input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
    color:red;
}
input:-ms-input-placeholder{  /* Internet Explorer 10-1*/
    color:red;
}

/* 去除激活input的默认边框, 三种方法都能实现 */
input{
    outline: none;
    outline: medium;
    outline: 0;
} 

/* textarea禁止拖动 */
textarea{
    resize: none;
}

高度为宽度的一半

padding设置百分比是基于父元素的，从而实现等比例效果

<style>
.parent{
    width: 500px;
}
.chlid{
    width: 100%;
    height: 0;
    padding-bottom: 50%;
    background: red;
}
</style>
<div class="parent">
    <div class="chlid">A</div>
</div>

为什么padding-bottom是基于父元素的宽度而不是高度

padding/margin使用%单位是规定基于父元素的宽度的百分比的内外边距。

父元素的高度往往由子元素来决定，如果子元素改变margin-top，相应的父元素高度也会进行适应性增加；

此时父元素高度增加的同时，margin-top若以父元素高度为基准，则其实际数值又会发生适应性变化，双向因果会造成循环，所以W3C的规范做出了以上规定。

自适应正方形

定位

.parent{
    height: 0;
    width: 50%;
    padding-top: 50%;
    background: #ccc;
    position: relative;
}
.chlid{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: red;
}

padding

.parent{
    width: 50%;
    background: #ccc;
}
.chlid{
    height: 0;
    width: 100%;
    padding-bottom: 100%;
    background: red;
}