目录

一、块元素

a.相关标签

b.特点：

二、内联元素

a.相关标签

b.特点

1. 设置子元素为内联元素的水平对齐方式

2.代码换行的间距

 3.解决因换行导致的空格

4.其他资料

 三、内联块元素

 a.相关标签

 b.特点

 四、display属性

a.小案例

五、综合案例

一、块元素

a.相关标签

div、p、ul、li、h1~h6、dl、dt、dd

下面举例块元素标签p标签和div标签可以观察 

div元素
p元素

b.特点：

1.支持全部样式。
2.如果没有设置宽度，默认的宽度为父级宽度100%  。
3.盒子占据一行，即使设置了宽度。

二、内联元素

a.相关标签

a、span、em、b、strong、i

b.特点

1.只支持部分样式(不支持宽高、margin上下、padding上下)
2.宽度由内容决定
3.盒子并在一行
4. 代码换行，盒子之间会产生间距

5.子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式

1. 设置子元素为内联元素的水平对齐方式

跳转链接

2.代码换行的间距

第一个链接第二个链接

 3.解决因换行导致的空格

解决方法：
                    1.相关内容写在一行，让其不换行
                    2.将内联元素的父级设置font-size=0，内联元素再自身设置font-size

第一种方法：

第一个链接第二个链接

第二种方法：

第一个链接第二个链接

4.其他资料

链接文字一链接文字二链接文字三链接文字

 三、内联块元素

 a.相关标签

内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的。我们可以用display属性将块元素或者内联元素转化成这种元素

 b.特点

    1.支持全部的样式margin上下没有合并
    2.盒子并在一行
    3.如果没有设置宽高，则宽高由内容决定撑开
    4.代码换行，盒子会产生间距
    5.子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式

 四、display属性

这三种元素，可以通过display属性来相互转化。

display属性是用来设置元素的类型及隐藏的，常用的属性有：
1、none 元素隐藏且不占位置
2、block 元素以块元素显示
3、inline 元素以内联元素显示
4、inline-block 元素以内联块元素显示

a.小案例

div元素div元素
文字标题
说明文字

五、综合案例

首页公司简介电话啊大大孙菲菲但是的事实

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！