深入理解和应用display属性(一)

    Display在官方定义:规定元素应该生成的框的类型。本文只重点分析常用的6个值:none、block、inline、inline-block、inherit、flex。其他table、list-item等都不再推荐使用。

一、None

此元素不会被显示。主要与visibility属性为hidden时相区分。

1) 当元素的none时,js可以获取此元素,但不能获取/设置此元素的可视化属性的值(但可以设置自定义属性的值),如Width、Height、background等Css属性的值,这也就表明当元素为none时,元素是不被浏览器渲染的。

2) 当元素的visibility值为hidden时,元素虽然不可见,但可以获取/设置元素的任何值,包含Css相关属性。这也就表明此时的元素是被浏览器渲染的(在文档流中是占有位置的),只是处于不可见的状态。

3) 示例代码如下:

Css代码:

#div01{ 
                display: none;
                width: 200px;
                background: red;
            }
            #div02{
                visibility: hidden;
                width: 100px;
            }
            #div03{ 
                width: 100px;
            }

Js/html代码:

<div id="div01" data-name="div01" > div01</div>
        <div id="div02" data-name="div02" > div01</div>
        <div id="div03" > div03</div>
        <script type="text/javascript">
            window.onload = function(){
                var div01 = document.getElementById('div01');
                var div02 = document.getElementById('div02'); 
                var div03 = document.getElementById('div03'); 

                //output: div01:0 background:  name:div01
                console.log( 'div01:' + div01.offsetWidth + " background: " + div01.style.background + " name:" + div01.getAttribute("data-name"));
                //output: div02:100 name:div02
                console.log( 'div02:' + div02.offsetWidth + " name:" + div02.getAttribute("data-name"));
                //output: div03:100
                console.log( 'div03:' + div03.offsetWidth);
                
                div01.style.width = 1000;
                div01.setAttribute("data-name","div0101");
                div02.style.width  = "800px";
                div02.setAttribute("data-name","div0202");
                div03.style.width  = 800;

                //output: div01:0 background:  name:div0101
                console.log( 'div01:' + div01.offsetWidth + " background: " + div01.style.background + " name:" + div01.getAttribute("data-name"));
                //output: div02:800 name:div0202
                console.log( 'div02:' + div02.offsetWidth + " name:" + div02.getAttribute("data-name"));
                //output: div03:800
                console.log( 'div03:' + div03.offsetWidth);
            }
        </script>

二、Block

设置元素为块级元素,可应用盒子模型相关属性。默认Width会100%,Height自适应。Margin、padding都有效。如果没有占宽或高的子元素存在,则高度为零。

代码如下:

<html>
    <head>
        <style>
            #div01{
                background: red;
            }
            #div02{
                height: 100px;
                background: gray;
            }
            #div03{
                background: green;
            }
        </style>
    </head>
    <body>
        <div id="div01" ></div>
        <div id="div02" ></div>
        <div id="div03" >div03</div>
    </body>
</html>

三、inline

行内元素或者通过display:inline修饰为行内元素的都具有行内元素的行为。

1) 多个inline元素会排成一行,并列的多个inline元素之间会存在8个像素左右的间隔,8像素间隔解决办法:

a). Html文本有意识的都排成一行,如下代码所示:

 <a>a01</a><a>a02</a>

b). 利用margin-left:-8px,也就是marginq负值实现,也可以在外层使用letter-spaceing和word-spaceing为负值的方式实现(此种试子元素需要重置被设置属性)

 .inline{
                 display: inline;
                 background: red;
                 margin: 0px;
                 padding: 10px;
                 margin-left: -8px;
             }

<div class="inline">inline01</div> <div class="inline">inline02</div> <div class="inline">inline03</div> <div class="inline">inline04</div>

c). 包裹inline元素的外层元素加上font-size:0px和-webkit-text-size-adjust:none实现

 a{
                 background: red;
                   font-size: 14px;
                }
                .overWidth{
                        white-space: nowrap;
                        border: 1px solid gray;
                        font-size: 0px;
                        -webkit-text-size-adjust: none;
                }

 <div class="overWidth" >
             <a>a01</a>
             <a>a000000002</a>
         </div>
 

2) Inline元素的width和height无效

3) Inline元素的padding都有效,但margin左右有效,上下无效

4) Inline元素包裹inline元素,外层元素的width和height会被内部的撑开

.overWidth{
                display: inline;
                border: 1px solid gray;
            }
<div class="overWidth" >
            <a>a01</a>
            <a>a000000002</a>
        </div>

5) Block/inline-block元素包裹inline元素,默认超width自动换行,height撑开。

a) 强制不换行可以通过white-space:nowrap来实现,此时超width的就会浮出来,可以通过overflow:hidden和text-overflow:ellipsis配合实现省略显示。

 .overWidth{
                               white-space: nowrap;
                               width: 100px;
                               border: 1px solid gray;
                               overflow: hidden;
                               text-overflow: ellipsis;
                   }
 <div class="overWidth" >
             <a>a01</a>
             <a>a000000002</a>
         </div>
 

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏专业duilib使用+业余界面开发

duilib自绘

22530
来自专栏Windows Community

Windows Phone 8.1 新特性 - 控件之列表选择控件

本篇我们来介绍Windows Phone 8.1 新特性中的列表选择控件。 在Windows Phone 8 时代,大家都会使用 LongListSelecto...

35290
来自专栏俞其荣的博客

Vue.js模板方法

296130
来自专栏向治洪

微信小程序基本组件概述

为了更好的理解微信小程序,本文90%文字描述来源于官网的介绍。官网原链接https://mp.weixin.qq.com/debug/wxadoc/dev/co...

219100
来自专栏Python

CSS基础

CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。 1 2 3 4 5 6 7 8 9 ''' ...

32470
来自专栏前端笔记

【 前端相关 网页样式 】总结CSS3中“伪类”与“伪元素”

熟悉前端的人都会听过css的伪类与伪元素,然而大多数的人都会将这两者混淆。本文从解析伪类与伪元素的含义出发,区分这两者的区别,并且列出大部分伪类与伪元素的具体用...

35070
来自专栏Pythonista

css基础

    行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用。

14820
来自专栏知道一点点

bootstrap快速入门笔记(五)-文本元素类,各种标签,排版

2,全局元素被直接赋予font-size 设置为 14px,line-height 设置为 1.428,<p> (段落)元素还被设置了等于 1/2 行高(即 1...

11730
来自专栏一枝花算不算浪漫

[jQuery学习系列四 ]4-Jquery学习四-事件操作

39790
来自专栏SpringBoot

Jquery入门

jquery [] jquery概念 jquery是JS的框架。 JS的函数库。 【】BOM BOM:Br...

16120

扫码关注云+社区

领取腾讯云代金券