行内元素与块级元素及切换
块级元素
- 自己独占一行(应该理解为独占一块)
- 可设置宽度,高度,内外边距的,没指定宽度,则默认为父元素宽度
- 是一个容器,里面可以放各种标签,但文字类的元素中不能再放块级元素如<p><h1>
- 常见的有div,h1~h6,p,hr,ol,ul,li,dl dd dt form
行级元素
一行可以放多个元素
宽高设置没有效果,默认宽度是它本身内容的宽度(注意 这个地方img是可以设置宽高的,且可以设置上下margin)
行内元素只能容纳文本或其它行内元素
行内元素只能设置左右边距,左右padding,设置上下都无效
常见的有:span a,
注意img元素:
1.img是可以设置宽高,但是,需要在src上导入可加载的图片,或者不要设置alt这个属性,此时时可以设置的
2.img是行内块元素
1、常见的行内元素
<span>
<a>
<lable>
<strong>
<b>
<small>
<abbr>
<button>
<input>
<textarea>
<select>
<code>
<br>
<q>
<i>
<cite>
<var>
<kbd>
<sub>
<bdo>
2、常见的块级元素
<div>
<p>
<li>
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<form>
<header>
<hr>
<ol>
<address>
<article>
<aside>
<audio>
<canvas>
<dd>
<dl>
<fieldset>
<section>
<ul>
<video>
![](https://img2020.cnblogs.com/blog/2361460/202104/2361460-20210422153448981-1716134713.png)
行内块元素
支持宽高,margin ,自左向右排列
受空格影响
不独占一行
常见的有:img textarea input
转换
display:inline(转为行内元素)
inline-block(转为行内块元素)
block(转为块元素)
none(隐藏 不显示)
注意:当元素浮动(float)时会转化成行内块元素特点。