行内与块元素解析-CSDN博客

本文链接：https://blog.csdn.net/mylovestart/article/details/8603669

行内元素和块元素

行内元素又叫内联元素,内联元素只能容纳文本或者其它内联元素

常见内联元素<span>,<a>

块元素一般都从新行开,可以容纳文本,其它内联元素和其它块元素,即使内容不能占满一行,块元素也要把整行占满

常见块元素<div>,<p>

块元素和行内元素的区别

1行内元素只占内容的宽度,块内元素不管内容多少要占全行

2行内元素只能容纳文本和其它行内元素,块内元素可以容纳文本,行内元素和块元素(与浏览器版本和类型有关)

3一些CSS属性对行内元素不生效,比如margin,left,right,width,height,建议尽可能使用块元素定位(与浏览器版本和类型有关)

块元素和行内元素可以转换

如果我们希望一个元素按照块元素方式显示,则display:block

如果我们希望一个元素按照行内元素方式显示,则display:inline

下面举个例子

my.css

.s1{
	background-color:pink;
	/*所有引用s1的元素按照块元素显示
	display:block;*/
}
.s2{
	background-color:gray;
	width:100px;
	/*所有引用s2的元素按照行内元素显示
	display:inline;*/
}

test.html

<!DOCTYPE html>
<html>
  <head>
    <title>test.html</title>
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="my.css" type="text/css"></link>
  </head>
  <body>
     <span class="s1">hello world<a href=#">连接到百度</a></span>
     <div class="s2">hello world1</div></br>
     <div class="s2">hello world2</div>
    </body>
</html>

网页打开如图