首页 > 代码库 > block元素和inline元素的特点
block元素和inline元素的特点
一、block元素的特点
1、处于常规流中时,如果width没有设置,会自动填充满父容器
2、可以设置heigth/width及margin/padding
3、处于常规流中时,布局在前后元素位置之间(独占一个水平空间)
4、忽略vertical-align
二、inline元素特点
1、水平方向上根据direction依次布局
2、不会在元素前后进行换行
3、受white-space控制
4、margin/padding在垂直方向上无效,在水平方向上有效
5、width/height对非替换行内元素无效,宽度由元素内容决定;
6、非替换行内元素的行框高由line-height确定,替换行内元素的行框高由height,margin,padding,border决定
7、浮动或绝对定位时会转换成block
8、vertical-align生效
三、补充
替换元素
替换元素是浏览器根据其标签元素与属性来判断显示具体的内容。
比如:<input type="text" /> ,type="text"表明这是一个文本输入框,换成其他的时候,浏览器显示就不一样,<img>、<input>、<textarea>、<select>、<object>都是替换元素,这些元素都没有实际的内容。
非替换元素
(X)HTML 的大多数元素是不可替换元素,他们将内容直接告诉浏览器,将其显示出来。
比如:<p>wanmei.com</p>
浏览器将把这段内容直接显示出来。
block元素和inline元素的特点
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。