CSS基础之元素（html标签）模式切换

小猪弟

已于 2022-02-27 21:35:00 修改

阅读量1k

点赞数 1

分类专栏： CSS 文章标签： css html 元素模式切换 display

于 2022-02-27 21:18:23 首次发布

本文链接：https://blog.csdn.net/u011863822/article/details/123170683

版权

CSS 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

在前面聊html标签的时候，分成了三种：那就是内联元素（inline element 又称行间元素或行内元素），块级元素(block element)，内联块级元素(inline-block element)

内联元素：其不独占一行，无法定义宽高。例如：select textarea strong em del sub sup ins a br b del ins u
块级元素：独占一行，可以定义宽高,宽度没有设置时，默认为100% 。例如p div address center h1-h6 hr pre ul ol dl table form marquee blockquote
内联块级元素：不独占一行，可以定义宽高。例如：img input
为什么要这样区分的呢？因为这个涉及到一些是否可套用标签的规则

内联元素可以嵌套内联元素，但是注意<a>标签中无法嵌套<a>
块元素可以嵌套任何元素，但是要注意一点<p>标签中一般不会嵌套<div>,已经会影响p标签的效果。
但是在对网页样式进行定义的时候，有时候有必须让某些内联元素变为块级元素，这个如何解决呢？

这个就需要一个属性：display

display

选择器{
    display：参数
}

这个参数可以有哪些，我就不在依次写了，而是从官方文档截图了：

在这里插入图片描述

而这些属性最简单的就演示其中几个，大家明白，这个display属性可以修改元素的显示属性。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>我的文档</title>
    <style type="text/css">

    </style>
</head>
<body>
<a href="#">行内元素1</a>
<a href="#">行内元素2</a>

</body>
</html>

显示效果是：

在这里插入图片描述

这是一个行内元素，通过CSS将其转换为一个块级元素：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>我的文档</title>
    <style type="text/css">
     a{
         height: 100px;
         display: block;
     }
    </style>
</head>
<body>
<a href="#">行内元素1</a>
<a href="#">行内元素2</a>

</body>
</html>

在这里插入图片描述

甚至可以将块级元素设置为行内元素：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>我的文档</title>
    <style type="text/css">
     div{

         display: inline;
     }
    </style>
</head>
<body>
<div>块级元素1</div>
<div>块级元素2</div>

</body>
</html>

在这里插入图片描述

例子

现在看一下京东的一个案例

在这里插入图片描述

某个连接都是一个块级元素，同时鼠标过上去就变成灰色。所以演示一个类似的效果：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>我的文档</title>
    <style type="text/css">
     a{
         width: 160px;
         height: 40px;
         background-color: #4a90e2;
         display: block;
         text-decoration: none;
         text-indent: 2em;
         line-height: 40px;
         color: #cccccc;
     }
     a:hover{
         background-color:rgb(217,217,217) ;
     }
    </style>
</head>
<body>
<a href="#">家用电器</a>
<a href="#">手机/运营/数码</a>
<a href="#">电脑/办公</a>
<a href="#">母婴</a>
<a href="#">艺术</a>

</body>
</html>

在这里插入图片描述

小猪弟

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础之元素（html标签）模式切换

在前面聊html标签的时候，分成了三种：那就是内联元素（inline element 又称行间元素或行内元素），块级元素(block element)，内联块级元素(inline-block element)内联元素：其不独占一行，无法定义宽高。例如：select textarea strong em del sub sup ins a br b del ins u块级元素：独占一行，可以定义宽高,宽度没有设置时，默认为100% 。例如p div address center h1-h6 hr pre
复制链接

扫一扫