css_1.1day(元素的显示模式)

hxgbieshuomeibanfa

已于 2022-04-08 08:51:54 修改

阅读量236

点赞数 1

分类专栏：前端基础文章标签： css3 前端

于 2022-04-03 21:26:04 首次发布

本文链接：https://blog.csdn.net/weixin_63997211/article/details/123944660

版权

前端基础专栏收录该内容

18 篇文章 0 订阅

订阅专栏

晚上继续学习

元素显示模式

什么是元素显示模式

元素以什么方式进行显示，比如div自己占一行，span一行可以有多个，这样html元素一般分为块元素和行内元素

块元素

块级元素有 h p div ul ol li等

块级元素特点

1.自己独占一行

2.可以给他设置宽度和高度，内外边距都可以控制

3.里面还可以放行内元素或块级元素

注意:文字类元素内不能使用块级标签，就像p1，h1等标签中不能放div

行内元素

行内元素有a,strong,span等

特点

1.行内元素可以在一行上，一行可以显示多个

2.高宽的设置是无效的,默认的宽度就是它本身的宽度

3.行内元素只能容纳文本或其他的行内元素

注意:链接里面不能再放链接,但是a标签里面可以放块级元素

行内块元素(特殊)

定义:同时具有块元素和行内元素特点,比如img元素,td元素 input元素 <br/>

元素显示模式的转化

display: block; 行内元素转化为块元素

display: inline; 块元素转化为行内元素

<!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>元素显示模式的转化</title>
    <style>
        a {
            width: 250px;
            height: 250px;
            background-color: pink;
            display: block;
        }
        div {
            background-color: blueviolet;
            display: inline;
        }
    </style>
</head>
<body>
    <a>
        比如再特殊情况下给a链接设置长度宽度
    </a>
    <div>我是块级元素</div>
    <div>我是块级元素</div>
</body>
</html>