## 文本溢出

```html
<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>
```

## 画三角形

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

## 表单

```css
/* 所有表单的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`设置百分比是基于父元素的，从而实现等比例效果

```html
<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的规范做出了以上规定。

## 自适应正方形

**定位**

```css
.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**

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