复习HTML+CSS随笔

HTML内容多，学习过程更像是学习英语。很多内容学过很长时间后就会遗忘，重新复习起来，整理些精华给自己看。

这次复习我选择了慕课网。很多内容都是在慕课网上摘抄，给自己整理成笔记。

1.元素实际大小=border+padding+width/height

2.块级元素 <p><h1-h6><form><div><ul><ol><li>  独占一行 可设置宽高
  内联元素<span><em><strong><a><label>     可与其他元素占同一行  不能设置宽高
  内联块元素<img><input>              可与其他元素占同一行  可以设置宽高
3.绝对定位： absolute 相对于其最接近的一个具有定位属性的父包含块进行绝对定位，如果不存在这样的包含块，则相对于浏览器窗口
  相对定位： relative 相对于以前的位置进行移动（实际还在文档流中原有位置，别的元素无法占据。比如从一排一号移动到二排四号，一排一号这个位置别的元素无法占用）
  固定定位： fixed 相对于浏览器视图移动（position：fixed bottom:0 right:0 将元素固定在右下角 常见的网页广告就是这个位置）
  eg:#box1是#box2的父元素。若要实现#box2相对于#box1的定位，要设置父元素#box1 position：relative；设置#box2 position：absolute；即可。
4.字体代码缩写，至少要指定font-size和font-family属性。在缩写时 font-size 与 line-height 中间要加入“/”斜扛
5.水平居中总结：
    定宽度块状元素：设置margin-left，margin-right：auto。
    不定宽度块状元素：｛
                1.display：table；margin：0 auto；
                2.display：inline；text-align：center；
                3.通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
                ｝
6.垂直居中总结：
    父元素高度确定的单行文本：设置line-height=height。
    父元素高度确定的多行文本{
                1.将元素插入在<table>中，td标签默认设置vertical-align：middle。
                2.在 chrome、firefox 及 IE8 以上的浏览器下设置 display：table-cell；vertical-align：middle。

}

  不定时更新