一、行内元素、块级元素的区别
1、块元素(block element)一般都从新行开始,独占一行,它可以容纳内联元素和其他块元素。
常见块元素有div、ul、ol、li、dl、dt、dd、p、h2-h7、form、table、pre(格式化文本)等。
2、内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素。
常见内联元素有i、b、a、em、br、img、span、strong、cite等。
3、对于行内元素:
设置宽度width 无效。
设置高度height无效,可以通过line-height来设置。
设置margin只有左右margin有效,上下无效。
设置padding只有左右padding有效,上下则无效。
二、行内元素与块级元素的相互转化
1.行内元素转化为块级元素的方法
(1)通过CSS设定浮动(float属性,可向左浮动或向右浮动,仅在需要浮动的情况下设置)
(2)设定显示display属性为“block”或“list-item”将内联元素转为块级,最常用的是display:block。
这样行内元素就转为块级元素,具备了块级元素的属性。
(3)还有一些属性我们在设置的时候同时会使元素变为块级,比如position等,这只是在特定的情况下出现
(4)在ie6/ie7下只要设置zoom:1就可以为元素设置宽高等块级元素所具备的属性
2.块级元素转为行内元素
设置display:inline,转化为行内元素之后就具备了行内元素的属性,不能设置宽高,但可以设置vertical
-align等。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。