行内元素和块级元素的区别有哪些

  在css基础当中,我们往往会遇到块元素和行内元素。在实际开发中,会经常把他们弄混淆,而且很难记住。那么行内元素和块级元素的区别有哪些?下面给大家介绍一下。
 
  块级元素和行内元素的定义
 
  什么是块级元素?
 
  总是在新行上开始;
 
  高度,行高以及外边距和内边距都可控制;
 
  宽度缺省是它的容器的100%,除非设定一个宽度。

 
 
  它可以容纳内联元素和其他块元素
 
  例如:<address>、<center>、<h1>——<h6>、<hr>、<p>、<pre>、<ul>、<ol>、<dl>、<table>、<div>、<form>
 
  什么是行内元素?
 
  和其他元素都在一行上;
 
  高,行高及外边距和内边距不可改变;
 
  宽度就是它的文字或图片的宽度,不可改变
 
  内联元素只能容纳文本或者其他内联元素
 
  例如:<span>、<a>、<br>、<b>、<strong>、<img>、<input>、<textarea>、<select>、<sup>、<sub>、<em>、<del>

 
 
  行内元素和块级元素的区别
 
  1)、行内元素
 
  ①:设置宽高无效
 
  ②:对margin设置左右方向有效,而上下无效;padding设置左右方向有效,而上下无效。
 
  ③:不会自动换行
 
  2)、块级元素
 
  ①:可以设置宽高
 
  ②:设置margin和padding都有效
 
  ③:可以自动换行
 
  ④:多个块状,默认排列从上到下

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h61627.shtml

张贴在2