css元素显示模式

最新推荐文章于 2024-07-25 15:07:09 发布

grt要一直一直努力呀

最新推荐文章于 2024-07-25 15:07:09 发布

阅读量47

点赞数

分类专栏： css 文章标签： css html5 html

本文链接：https://blog.csdn.net/qq_44870115/article/details/120410580

版权

css 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

文章目录

块元素
行内元素
行内块元素
元素显示模式的转换

根据标签特点的不同，可以把标签分为不同的种类。

元素显示模式是指元素(标签)以什么方式进行显示。

可以把HTML标签划分为两大类，分别是块元素和行内元素。

像div就是块元素，独占一行。span是行内元素，一行可以有多个span。

块元素

常见的块元素有标题标签、p标签、div标签、ul、ol、li标签等。

块元素的特点：

独占一行。
高度、宽度、外边距以及内边距都可以控制。
宽度默认是容器(父级宽度)的100%
是一个容器。里面可以放行内或块级元素。

像标题标签、p标签这类的文字标签，里面是不能放其他的块级元素。

行内元素

span是最典型的行内元素。
行内元素的特点：

相邻行内元素在一行上，一行可以显示多个。
高、宽直接设置是无效的。
默认宽度就是本身内容的宽度。
行内元素只能容纳文本或其他行内元素。

注意：链接里面不能再放链接。a标签里面可以放块级元素。

行内块元素

有一些标签，像img、input、td标签，同时具有行内元素和块元素的特点，称为行内块元素。
特点：

一行可以放多个。但中间会有空白缝隙。
默认宽度就是本身内容的宽度。
高度、宽度、外边距以及内边距都可以控制。

元素显示模式的转换

元素模式的转换，就是一个模式的元素需要另一种模式的特性。

例如：像给链接，增加高度和宽度。增加链接的点击范围。

转化为块级元素的语法是 display:block;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a href="#">百度</a>
</body>
<style>
    a {
        width: 100px;
        height: 100px;
        background-color: pink;
        /* 将a转化为块级元素 就可以改变宽度和高度了 */
        display: block;
    }
</style>

</html>

转化为行内元素的语法是 display:inline;

转化为行内块元素的语法是 display:inline-block;

grt要一直一直努力呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css元素显示模式

根据标签特点的不同，可以把标签分为不同的种类。元素显示模式是指元素(标签)以什么方式进行显示。可以把HTML标签划分为两大类，分别是块元素和行内元素。像div就是块元素，独占一行。span是行内元素，一行可以有多个span。块元素常见的块元素有标题标签、p标签、div标签、ul、ol、li标签等。块元素的特点：独占一行。高度、宽度、外边距以及内边距都可以控制。宽度默认是容器(父级宽度)的100%是一个容器。里面可以放行内或块级元素。像标题标签、p标签这类的文字标签，里面是不能放其他
复制链接

扫一扫

专栏目录