html

gbk中文 是gb2312的扩展

utf-8所有字符集

---

<table>

    <tr>

        <th></th>

        <th></th>

    </tr>

    <tr>

        <td></td>

        <td></td>

    </tr>

</table>

th 和td 都是一个格子

 

表格

align: left/center/right

border  默认没有边框

cellpadding 单元格内容对padding

cellspacing 单元格之间对空白,默认2px

width 表格的宽度

border-collapse: collapse; 表格都边框合并

 

单元格合并

跨行合并 rowspan=“合并单元格个数”

跨列合并 colspan=“合并单元格个数”

---

自定义列表

<dl>

    <dt></dt>

    <dd></dd>

</dl>

---

<input type="reset"> <!-- 重置按钮 -->

<input type="submit"><!-- 提交按钮 -->

<input type="text" maxlength=""> <!-- 输入字段对最大长度 -->

---

radio 和checkbox 是用checked属性

select 是用selected属性

---

行内元素只有左右外边距和内边距，没有上下

---

 

塌陷问题

1.上下塌陷，没有左右塌陷

2.如果子盒子设置margin-top:30px,父盒子会一起下来。

  解决办法: 给父盒子设置over-flow:hidden

---

盒模型

box-sizeing: content-box //默认的

box-sizeing: border-box //css3新的，包含border在内

---

盒子没有给定宽度和高度或者是继承的父亲的宽(高度不会被继承)，则设置padding不会影响盒子大小(不会撑开盒子)

---

浮动不会压住padding和border(只会在内容中浮动)

设置浮动后行内元素也可以设置宽高

absolute定位则不会超出border(在父盒子设置了定位的情况下)

---

清楚浮动

1.

在父盒子添加overflow-hidden

缺点:无法显示需要溢出的元素

 

2.

.claerfix::after {

    content: ".";

    display: block;

    height: 0;

    visibility: hidden;

    clear: both

}

.clearfix {

    *zoom: 1;

}

---

z-index:0 默认值 值越大越靠上

注意: 在定位情况下有效

---

input {

    outline: none;  //清除边框

}

---

<textarea></textarea>

resize:none //防止文本域扩大缩小

---

box-shadow: x y 虚实 影子大小 颜色

---

行内元素，行内块元素可以看成文本，在其父元素上设置text-align:center可以使这些元素居中

---

宽100px，高100px的div，如果设置margin-left: auto,则会在最右边