行内块元素有哪些标签_块级元素

一、什么是块级元素？什么是行内元素？什么是行内块级元素？

二、常见的块级元素有哪些？常见的行内元素有哪些？常见的行内块级元素有哪些？

三、如何转换css元素的显示模式？

1.什么是div?

作用：一般用于配合CSS完成网页的基本布局

2.什么是span?

作用：一般用于配合CSS修改网页中的一些布局信息

3.div和span有什么区别？

div会单独占领一行，而span不会单独占领一行

div是一个容器级的标签，而span是一个文本级的标签

4.容器级的标签和文本级的标签的区别？

容器级的标签可以嵌套其他所有的标签

文本级的标签中只能嵌套文字/图片/超链接

常见的容器级标签：

div h ul ol dl li dt dd...

常见的文本级标签：

span p buis strong em ins del...

在HTML中将所有标签分为两类，分别是容器级和文本级

在css中也将所有标签分为两类，分别是块级元素和行内元素

1.什么是块级元素，什么是行内元素？

块级元素会独占一行

行内元素不会独占一行

块级元素：

p div h ul ol dl li dt dd

行内元素：

span buis strong em ins del

2.块级元素和行内元素有什么区别？

块级元素：

独占一行

如果没有设置宽度，那么默认和父元素

如果设置了宽高，那么久按照设置的来显示

行内元素：

不会独占一行

如果没有设置宽度，那么默认和内容一样宽

行内元素是不可以设置宽度和高度的

行内块级元素

为了能够让元素既能够不独占一行，又可以设置宽度和高度，

那么就出现了行内块级元素

实例：

<div>我是div</div>

<p>我是段落</p>

<h1>我是标签</h1>

<hr>

<span>我是span</span>

<b>我是加粗</b>

<strong>我是强调</strong>

1.css显示模式转换

设置元素的display属性

2.display取值

block 块级

inline 行内

inline-block 行内块级

<style>

div{

display: inline;

background: red;

width: 100px;

height: 100px;

}

span{

display: block;

width: 100px;

height: 100px;

background: blue;

margin: 10px;

}

</style>

<div>你好</div>

<div>你好</div>

<span>hello</span>

<span>hello</span>