css元素显示模式及转换

最新推荐文章于 2023-06-26 22:25:20 发布

小鱼的池塘

最新推荐文章于 2023-06-26 22:25:20 发布

阅读量873

点赞数

分类专栏：前端基础语言从学习文章标签： css

本文链接：https://blog.csdn.net/haha_hello/article/details/54973212

版权

前端基础语言从学习专栏收录该内容

27 篇文章 1 订阅

订阅专栏

一，元素显示模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>31-css元素显示模式.html</title>
    <style>
        div{
            background: red;
        }
        span{
            background: blue;
        }
        img{
            width: 100px;
        }
    </style>
</head>
<body>

<!--
    在html中将所有的标签分为两类:容器级、文本级
    在css中也将所有的标签分为两类:块级元素、行内元素

    1,块级元素、行内元素
    块级元素会独占一行
    行内元素不会独占一行

    容器级标签:div h ul ol dl li ...
    文本级标签:span p buis strong em ins del ...

    块级元素:div h p ul ol dl li ...
    行内元素:span buis strong em ins del ...

    2,块级元素和行内元素的区别
    (1),块级元素
        独占一行
        如果没有设置宽度,那么默认和父元素一样宽
    (2),行内元素
        不会独占一行
        不能设置宽度和高度的,宽高自适应内容的宽高
    (3),行内块级元素
        为了让元素既不独占一行,又能设置宽高,就出现了行内块级元素
-->

<div>我是一个div</div>
<p>我是p</p>
<h1>我是h1</h1>
<hr>
<span>我是span</span>
<b>我是加粗</b>
<strong>我是强调</strong>
<h1>
    <img src="images/image.png" alt="">
    <img src="images/image.png" alt="">
</h1>
</body>
</html>

二，元素显示模式转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>32-css元素显示模式转换.html</title>
    <!--
        1,如何转换css元素的显示模式?
            设置元素的display的属性值
        2,display取值
            block 块级
            inline 行内
            inline-block 行内块级
        3,快捷键
            di 点击tab键就会补全为 display: inline;
            db 点击tab键就会补全为 display: block;
            dib 点击tab键就会补全为 display: inline-block;
    -->
    <style>
        div{
            display: inline;
            background: red;
        }
        span{
            display: block;
            background: burlywood;
        }
        .cc{
            display: inline;
            display: inline;
            display: block;
            display: inline-block;
        }
    </style>
</head>
<body>
<div>我是div</div>
<div>我是div</div>

<span>我是span</span>
<span>我是span</span>

<p class="cc">我是一个段落</p>
<b class="cc">我是加粗</b>
</body>
</html>

小鱼的池塘

关注

0
点赞
踩
1

收藏

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

一，元素显示模式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>31-css元素显示模式.html</title> <style> div{ background: red; } span{
复制链接

扫一扫