设置元素为浮动后，display的值是多少？

最新推荐文章于 2024-08-03 17:34:58 发布

无-题

最新推荐文章于 2024-08-03 17:34:58 发布

阅读量8.5k

点赞数 6

分类专栏：学习笔记

本文链接：https://blog.csdn.net/weixin_39831508/article/details/88534855

版权

学习笔记专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1.为什么关注此问题？

行内元素设置为浮动后，可以设置宽高了，为什么？

我们知道Html元素分三种

块级元素（display:block）--> 可以设置元素的宽高

行内元素（display:inline）--> 默认不换行,设置width/height无效(可以设置line-height)，margin/padding上下无效

行内块级元素（display:inline-block ）--> 可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性

实践出真知，动手吧！

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

<style>
        .spn{
            border: 2px solid #000000;
        }
        .mydiv{
            border: 2px solid #000000;
        }
        #in{
            display: inline-block;
            border: 2px solid #005599;
        }
        </style>
        <body>
            <div class="page">
                <span class="spn">行内元素1</span>
                <span class="spn">行内元素2</span>
                
                <p id="in">行内块状元素1</p>
                <p id="in">行内块状元素2</p>
                
                <div class="mydiv" id="a">
                    块状元素1
                </div>
                
                <div class="mydiv" id="b">
                    块状元素2
                </div>
            </div>
</html>

效果图：

操作一：

设置行内元素浮动，查看display的值

设置前

设置后

操作二：

设置块级元素浮动，查看display的值

设置前

设置后

操作三：

设置块级行内元素浮动，查看display的值

设置前

设置后

结论：设置元素为浮动后，display的值是block

2.有什么意义？

以后在项目中如果需要设置行内元素的宽高，则设置为浮动后，就可以设置了

无-题

关注

6
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
设置元素为浮动后，display的值是多少？

1.为什么关注此问题？行内元素设置为浮动后，可以设置宽高了，为什么？我们知道Html元素分三种块级元素（display:block）--&gt; 可以设置元素的宽高行内元素（display:inline）--&gt; 默认不换行,设置width/height无效(可以设置line-height)，margin/padding上下无效行内块级元素（display:inline-...
复制链接

扫一扫