本帖最后由 Bell 于 2016-7-19 11:23 编辑
1、 文档流概念
是浏览器解析网页的一个重要概念。对于一个xhtml网页,body元素下的任意元素,根据其先后顺序,组成了一个上下关系,这便是文档流。浏览器根据这些元素的顺序去显示它们在网页中的位置。文档流是浏览器的默认显示规则。
2、 块级元素与行内元素
得出区别的方法:
1. 写两个div,两个span
2. 分别对div 与span 设置背景看效果
3. 分别设置宽度看效果
4. 加margin看效果
1)、区别
页面中元素一般分为两种:块级元素,行内元素(内联元素),既然分为两种元素,那么他们之间必然有区别:
A. 块级元素总是独自占一行,前面和后面就好像有个换行符,内联元素总是和其它的内联兄弟占一行
B. 块级元素可以设置宽和高度值,内联元素就不行了,他们的宽和高总是随着自身的内容自动扩大和缩小
C. 块级元素的margin和padding都正常,内联元素左右maring和左右padding正常,上下不正常不识别,也就是说不能通过margin-top和padding-top来改变行高
D. 网页布局时,块级元素可包含内联元素和其它块级元素;而内联元素只可包含内联元素和文本等,不可包含块级元素。我们可以理解为内容标记和结构标记。
2)、常用的块级元素和行内元素有:
块级元素:h1至h6,div p ul dl dt dd form table等
行内元素:strong em span b I a img input等
3)、相互转化
想让自己独占一行就用块级元素(div,dl,dt,dd,ul,li...),想让元素和其它元素在一行就用行内元素(span,a,img)。
他们之间可以通过样式来转换
- disply:block;
- display:inline;
复制代码
补充:
display:inline-block;
将对象呈递为内联元素,与其它的元素同处一行,但是内部又呈现出块级元素,也就是可以设置宽度和高度,打破了块级元素和内联元素的区别,此属性,IE8,FF3, 其它的标准浏览器都识别,IE6,IE7,FF2不识别此属性
display:list-item;
display:none
|