小知识点

笔记本什么的太容易丢失而且一般写过了就很少翻翻，So放到这里,浏览方便，会经常看看。

1.多行文本域
textarea (上次很尴尬的记成input了)

---

2.font-size
默认是16px,
xx-small 9px
x-small 11px
small 13px
medium 16px
font-weight
100-500 不加粗
600-900 加粗

---

3.css 实现一个小三角
例如：i

i{
    display:block;
    width:0;
    height:0;
    border-style:solid;
    border-width:5px;
    border-color:#000 transparent transparent transparent ;

4.怎样让一个图片垂直居中
第一步：在一个div里包含一个img图片，让div里在包含一个span空标签让span的高度为100%
第二步：让span和img的display为inline-block，然后让span和img垂直居中

结构部分：
<div>
            <img src="images/img_03.jpg"/>
            <span></span>
</div>

样式部分：
    div{
            width:247px;
            height:292px;
            border:1px solid #333;
            margin:30px auto;
            text-align:center;
        }
        span,img{
            display:inline-block;
            vertical-align:middle;
        }
        span{
            height:100%;
        }
        img{

        }

样子如下：

5.属性前缀
” _ “, ” * “,” *+ “,” \0 “等。

” _ ” 只有Ie6,及IE6以下识别。

” * “,” *+ ” 只有Ie7,及IE7以下识别。

” \0 ” 针对Ie8

6.datalist 的用法

<input type="text" list="list" />
        <datalist id="list">
            <option value="宝马" label="汽车"></option>
            <option value="奔驰" label="汽车"></option>
            <option value="路虎" label="汽车"></option>
            <option value="面包" label="food"></option>
            <option value="可乐" label="food"></option>
            <option value="爱情"label="food"></option>
        </datalist>

效果如下：

7.form里的一些小技巧

required   必填选项

placeholder  默认提示

autofocus   自动获取焦点 

autocomplete   是否自动获补全 

novalidate   对表单不进行验证 

8.border-style:double 时至少有3px；
9.让一个元素恢复默认，width：auto； height:auto;

10.一个宽为300px的内容块，其内容为单行文本时内容居中，多行文本时左对齐。

结构：
<div>
    <p>我是文本内容我是文本内容我是文本内容我</p>
</div>
样式：
div{
        text-align: center;
        width: 150px;
        background: hotpink;
    }
p{
        display: inline-block;
        text-align: left;
    }