前端学习笔记H5+CSS3

块元素

(ul ol li table tr td th)

• 块状元素是一个容器，可以容纳其它块状或者内联元素
• 块元素排除与其他元素共一行
• width和height对块元素起作用

内联元素

• 内联元素只能容纳文字或者其它内联元素
• 内联元素可以和其它内联元素共一行
• width和height对内联元素不起作用

浮动

多个div共行

• 要想使得div后能接其他div 必须设置为 float：left
• 每个div加上 float：left
• 第一个div加上display：block （为了防止IE浮动的一个bug float的块状元素 margin-left不为0 会产生double的效果）

浮动的div后另起一行

• 清除浮动，插入一个空的div clear:both

HTML标签

• 少部分为空标签（无结束</>）<img> <input> <area> <meta> <hr> <br>

img标签

• 通常来说，img为内联元素，为了让图片可以设置宽和高
• 我们会用display:block来修饰img
• 如果img被包裹在a标签里面，那么a也要display:block修饰
• 总之看到img就直接加display：block

导航栏

• ul > li > a
• 设定ul 的width 和height和外部div 一致撑开
• 设定li
float：left list-style：none 变为一行
  height:xx px（外部ul的height） line-height:xx px垂直居中
  text-align:center 水平居中
  
• 设定li > a
text-decoration:none
  设置a伪类背景时注意a的高度一致，a标签为内联元素需要设置为display：block
padding:0 xx px 展开每个a标签<br>

css hack

对于IE6不兼容的，而Chrome兼容的CSS，

• 属性前加 *作为IE6备选css ps. chrome无法识别*
• background：#F00!important 对于其他浏览器加了important优先级最高 而IE6不认识importantcss无法生效

子元素浮动，父元素高度无法自适应

• 浮动会让元素脱离文档流，当所有元素都脱离时，而此时父元素没有设定高度，造成父元素高度为0
• overflow:hidden会消除所有子元素的浮动，然后进行自适应高度计算，因为父元素未设定高度，故不裁剪

快捷html 标签 tab

• div .taobao>ul>li*3