块元素、行内元素,替换元素、非替换元素

本文涉及知识点:行内元素、块元素,替换元素、非替换元素;

1. 替换元素与非替换元素

替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。
比如:<input /> type="text" 的是,这是一个文本输入框,换一个其他的时候,浏览器显示就不一样
(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素,这些元素都没有实际的内容。
非替换元素:
(X)HTML 的大多数元素是不可替换元素,他们将内容直接告诉浏览器,将其显示出来。
比如<p>wanmei.com</p>
浏览器将把这段内容直接显示出来。

2. 内联元素(行内元素)与块元素

块元素:明显的特征就是独自占领一行,自动充满父级元素的内容区域,绝不会让别人“侵略”(当然可以通过其他方式去改变他)。

常见的有:div,p..等等。

通过CSS设定了浮动(float属性,可向左浮动或向右浮动)以及设定显示(display)属性为“block”或“list-item”的元素都是块级元素。这个地方浮动是一个比较特殊的情况,可以详查浮动这个知识

行内元素:

上面说块及元素独自占领一行,行内元素就没这么霸道了,他可以左右都允许有元素,最常见的就是<a></a>

通过display:'inline'设置以后都会变成行内元素。

3.行内非替换元素:

对行内非替换元素如a元素、span元素等,

设置宽度width 无效。
设置高度height无效,可以通过line-height来设置。
设置margin只有左右margin有效,上下无效。(这就是span的margin-top无效的原因)

设置padding只有左右padding有效,上下则无效。块级元素的width/height/margin/padding都是有效的;

参考:http://www.cnblogs.com/wkylin/archive/2011/05/12/2044328.html


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值