登录    关于
马育民老师的博客

马育民的博客

QQ:65242847

CSS教程:块级元素、内联元素(行内元素)、内联块状元素

块级元素

  1. 独占一行,前后有其他标签时,会换行
  2. 元素宽度默认 和父元素的宽度一致
  3. 元素的高度、宽度、行高以及顶和底边距都可设置。
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<form>

例子

<style type="text/css">
div,p{
    background:pink;
}
</style>

<div>div1</div>
<div>div2</div>
<p>测试</p>

内联元素(行内元素)

与块级元素相反

  1. 不强制换行;
  2. 元素的宽度就是它包含的文字或图片的宽度,不可改变。
  3. 元素的高度、宽度及顶部和底部边距不可设置;
<a>、<span>、<br>、<i>

例子

<style type="text/css">
a,span,em{
    background:pink;/*设置a、span、em标签背景颜色都为粉色*/
}
<a href="http://www.baidu.com">百度</a>
<a href="http://www.imooc.com">慕课网</a>
<span>33333</span>
<span>44444</span><em>555555</em>

内联块状元素

  1. 和其他元素都在一行上;
  2. 元素的高度、宽度、行高以及顶和底边距都可设置。
<img>、<input>

例子

<style type="text/css">
a{

    width:20px;/*在默认情况下宽度不起作用*/
    height:20px;/*在默认情况下高度不起作用*/
    background:pink;/*设置背景颜色为粉色*/
    text-align:center; /*设置文本居中显示*/
    display:inline-block;
}
</style>
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>

改变显示方式

设置为 块状元素

display:block;

设置为 内联块状元素

display:inline-block

设置为 内联元素

display:inline

原文出处:https://malaoshi.top/show_1IX1GOg0vFOG.html