块元素
(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不认识important
css无法生效
子元素浮动,父元素高度无法自适应
- 浮动会让元素脱离文档流,当
所有元素都脱离
时,而此时父元素没有设定高度
,造成父元素高度为0
overflow:hidden
会消除所有子元素的浮动
,然后进行自适应高度计算
,因为父元素未设定高度,故不裁剪
快捷html 标签 tab