精华内容
下载资源
问答
  • display 属性

    万次阅读 2019-10-08 09:29:29
    1、 display:flex 属性 display:flex 是一种布局方式。它即可以应用于容器中,也可以应用于行内元素。是W3C提出的一种新的方案,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持。...

    1、 display:flex 属性

    display:flex 是一种布局方式。它即可以应用于容器中,也可以应用于行内元素。是W3C提出的一种新的方案,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持。

    Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

    eg 电商首页效果展示:

    <html>
    <head>
    <meta charset="utf-8">
    <title>W3Cschool教程(w3cschool.cn)</title>
    <style>
    #main {
        width: 70px;
        height: 300px;
        border: 1px solid #c3c3c3;
        display: -webkit-flex;
        display: flex; /* 设置flex布局*/
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;/*换行*/
        -webkit-align-content: center;
        align-content: center; /*垂直对齐*/
    }

    #main div {
        width: 70px;
        height: 70px;
    }
    </style>
    </head>
    <body>

    <div id="main">
      <div style="background-color:coral;">1F</div>
      <div style="background-color:lightblue;">2F</div>
      <div style="background-color:pink;"><a HREF="#3f">3F</a></div>
    </div>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    <div id="3f">
      <h3>我是3F(测试定位)</h3>
      <div style="background-color:pink;">    
        <p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 align-content 属性。</p>
        <p><b>注意:</b> Safari 7.0 及更新版本通过 -webkit-align-content 属性支持该属性。</p>
        <p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 align-content 属性。</p>
        <p><b>注意:</b> Safari 7.0 及更新版本通过 -webkit-align-content 属性支持该属性。</p>
        <p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 align-content 属性。</p>
        <p><b>注意:</b> Safari 7.0 及更新版本通过 -webkit-align-content 属性支持该属性。</p>
        <p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 align-content 属性。</p>
        <p><b>注意:</b> Safari 7.0 及更新版本通过 -webkit-align-content 属性支持该属性。</p>
        <p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 align-content 属性。</p>
        <p><b>注意:</b> Safari 7.0 及更新版本通过 -webkit-align-content 属性支持该属性。</p><p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 align-content 属性。</p>
        <p><b>注意:</b> Safari 7.0 及更新版本通过 -webkit-align-content 属性支持该属性。</p><p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 align-content 属性。</p>
        <p><b>注意:</b> Safari 7.0 及更新版本通过 -webkit-align-content 属性支持该属性。</p><p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 align-content 属性。</p>
        <p><b>注意:</b> Safari 7.0 及更新版本通过 -webkit-align-content 属性支持该属性。</p><p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 align-content 属性。</p>
        <p><b>注意:</b> Safari 7.0 及更新版本通过 -webkit-align-content 属性支持该属性。</p>
        <p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 align-content 属性。</p>
        <p><b>注意:</b> Safari 7.0 及更新版本通过 -webkit-align-content 属性支持该属性。</p><p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 align-content 属性。</p>
        <p><b>注意:</b> Safari 7.0 及更新版本通过 -webkit-align-content 属性支持该属性。</p><p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 align-content 属性。</p>
        <p><b>注意:</b> Safari 7.0 及更新版本通过 -webkit-align-content 属性支持该属性。</p><p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 align-content 属性。</p>
        <p><b>注意:</b> Safari 7.0 及更新版本通过 -webkit-align-content 属性支持该属性。</p>
      </div>
    </div>
    </body>
    </html>

    效果:

    学习参考 https://www.jianshu.com/p/d9373a86b748

    2、常用值 none

    block  块元素定义

    inline  内联元素定义

    3、其他值

    https://www.w3school.com.cn/cssref/pr_class_display.asp

    展开全文
  • display属性

    2020-10-28 10:06:14
    1:display:none 标签消失,div不显示。vue中isshow=false即是将div样式中的display设置成了none。 2:display:block 元素会独占一行,多个元素设置为block会另起一行。属于块级元素。 3:display:inline内联元素...

    1:display:none 标签消失,div不显示。vue中isshow=false即是将div样式中的display设置成了none。
    2:display:block 元素会独占一行,多个元素设置为block会另起一行。属于块级元素。
    3:display:inline内联元素,多个元素会放置在同一行内。
    4:display:inline-block 内联对象会被放置在同一行内。
    5:display:flex 弹性框。
    使两个div块放置在同一行的方法:
    1:将两个div设置浮动:float:right; float:left;
    2:display属性设置为block。display属性设置为inline-block行内块元素。

    展开全文
  • 详解css中的display属性

    2021-01-21 14:13:59
    我们常用的display属性值有: inlineblockinline-blocknone把 display 设置成 none 不会保留元素本该显示的空间,但是 visibility: hidden 还会保留。 那么,display:inline、display:block和display:inline-block有...
  • CSS display 属性.pdf

    2021-09-14 11:03:22
    CSS display 属性.pdf
  • display属性详解

    千次阅读 2020-11-26 21:44:14
    根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,称为块元素,而span元素的默认display属性值...

    在这里插入图片描述
    根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,称为块元素,而span元素的默认display属性值为“inline”,称为“行内”元素。

    块元素与行元素是可以转换的,也就是说display的属性值可以由我们来改变。
    

    1. none:隐藏对象

    1.1 不用none前:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>none</title>
        <style>
            .box>div {
                width: 200px;
                height: 200px;
                background-color: pink;
                /* display: none; */
                
            }
    
            .box1 {
                width: 100px;
                height: 100px;
                background-color: blue;
                margin: 0 auto;
            }
    
            .box>div:nth-child(2) {
                background: hotpink;
            }
    
            .box>div:last-child {
                background-color: deeppink;
            }
    
            .bottom {
                width: 1200px;
                height: 300px;
                background-color: purple;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div>
                <div class="box1"></div>
            </div>
            <div></div>
            <div></div>
        </div>
        <div class="bottom"></div>
    </body>
    </html>
    

    显示:
    在这里插入图片描述

    1.2 用了none的时候:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>none</title>
        <style>
            .box>div {
                width: 200px;
                height: 200px;
                background-color: pink;
                display: none;           
            }
    
            .box1 {
                width: 100px;
                height: 100px;
                background-color: blue;
                margin: 0 auto;
            }
    
            .box>div:nth-child(2) {
                background: hotpink;
            }
    
            .box>div:last-child {
                background-color: deeppink;
            }
    
            .bottom {
                width: 1200px;
                height: 300px;
                background-color: purple;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div>
                <div class="box1"></div>
            </div>
            <div></div>
            <div></div>
        </div>
        <div class="bottom"></div>
    </body>
    </html>
    

    显示:
    在这里插入图片描述


    2. inline: 指定对象为行内元素

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>inline</title>
    </head>
    <body>
        <style>
            .box>div {
                width: 300px;
                height: 300px;
                background-color: pink;
                /* float: left; */
                display: inline;
            }
    
            .box>div:nth-child(2) {
                background: hotpink;
            }
    
            .box>div:last-child {
                background-color: deeppink;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div>好好学习</div>
            <div>好好学习</div>
            <div>好好学习</div>
        </div>
    </body>
    </html>
    

    显示:
    在这里插入图片描述


    3. block: 指定对象为块元素

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>block</title>
    </head>
    <body>
        <style>
            .box>div {
                width: 300px;
                height: 300px;
                background-color: pink;
                /* float: left; */
                display: block;
            }
    
            .box>div:nth-child(2) {
                background: hotpink;
            }
    
            .box>div:last-child {
                background-color: deeppink;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </body>
    </html>
    

    显示:

    在这里插入图片描述


    4. inline-block:指定对象为行内块元素

    即在同一行显示,又可以设置宽高,margin和padding可以设置。注意:识别代码之间的空白。意思就是说,在一行排列的时候盒子与盒子之间会出现空白空隙。

    空白解决办法:

    1. 把下面的div挨着写,不留空格,空白就会消失。
    2. 把空格部分注释起来就不会有空白
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>inline-block</title>
    </head>
    <body>
        <style>
            .box>div {
                width: 300px;
                height: 300px;
                background-color: pink;
                /* float: left; */
                display: inline-block;
            }
    
            .box>div:nth-child(2) {
                background: hotpink;
            }
    
            .box>div:last-child {
                background-color: deeppink;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </body>
    </html>
    

    显示:
    在这里插入图片描述


    5. table-cell:指定对象为表格单元格

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>table-cell</title>
    </head>
    <body>
        <style>
            .box>div {
                width: 300px;
                height: 300px;
                background-color: pink;
                /* float: left; */
                display: table-cell;
            }
    
            .box>div:nth-child(2) {
                background: hotpink;
            }
    
            .box>div:last-child {
                background-color: deeppink;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </body>
    </html>
    

    显示:
    在这里插入图片描述


    6. flex:弹性盒

    它决定一个盒子在其它盒子中的分布,以及如何处理可用的空间。使用该模型,可以轻松的创建"自适应"浏览器窗口的流动布局。

    6.1 未使用flex前:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>flex</title>
        <style>
            .box {
                width: 100%;
                height: 600px;
                background-color: grey;
                /* display: flex; */
            }
    
            .box>div {
                width: 33.33%;
                height: 600px;
            }
    
            .item1 {
                background-color: pink;
            }
    
            .item2 {
                background-color: orange;
            }
    
            .item3 {
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="item1"></div>
            <div class="item2"></div>
            <div class="item3"></div>
        </div>
    </body>
    </html>
    

    显示:
    在这里插入图片描述

    6.2 使用flex后:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>flex</title>
        <style>
            .box {
                width: 100%;
                height: 600px;
                background-color: grey;
                display: flex;
            }
    
            .box>div {
                width: 33.33%;
                height: 600px;
            }
    
            .item1 {
                background-color: pink;
            }
    
            .item2 {
                background-color: orange;
            }
    
            .item3 {
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="item1"></div>
            <div class="item2"></div>
            <div class="item3"></div>
        </div>
    </body>
    </html>
    

    显示:
    在这里插入图片描述


    7. inline转块级元素

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>inline转块级元素</title>
    </head>
    <body>
        <style>
            span {
                width: 200px;
                height: 200px;
                float: left;
                display: block;
            }
    
            .box1 {
                background-color: green;
            }
    
            .box2 {
                background-color: yellow;
            }
    
            .box3 {
                background-color: red;
            }
        </style>
    </head>
    <body>
        <span class="box1">好好学习</span>
        <span class="box2">好好学习</span>
        <span class="box3">好好学习</span>
    </body>
    </html>
    

    显示:
    在这里插入图片描述


    --- Ending ---
    展开全文
  • display属性.doc

    2011-10-11 18:53:17
    display属性.doc display属性.doc display属性.doc
  • HTML中display属性的属性值有哪些发布时间:2020-09-26 14:35:20来源:亿速云阅读:102作者:小新这篇文章主要介绍了HTML中display属性的属性值有哪些,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇...

    HTML中display属性的属性值有哪些

    发布时间:2020-09-26 14:35:20

    来源:亿速云

    阅读:102

    作者:小新

    这篇文章主要介绍了HTML中display属性的属性值有哪些,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

    display在这里我说四个最常用的属性值inline、 block、inlin-block、none。

    首先我们来说一下inline(n内联元素):

    该属性值为默认值。此元素会被显示为内联元素,元素前后没有换行符。一般不会设置这个属性值。个人理解,其实跟正常的行内元素没什么区别,用的比较多的还是block和inline-block。

    接着是block(块级元素)这个属性值:

    这个属性值是比较有意思的,设置为块级元素独占一行,就换行来说和p标签的效果一样,但是这个属性值设置后,作为一个块级元素他就具备了宽、高,和别的块级元素的间距margin着属性的设置,还有间距的设置padding,但是不能设置行高(line-height)。

    还有inline-block(内联块)这个属性值:

    这个属性值是比较强大的,本人刚开始学的时候基本上见到需要设置的只要不是换行的就会设置这个属性值,一来他可以作为块级元素,可以具有block的特性,另一方面,由于本人初学,对于居中的设置比较麻烦,所有使用这个属性值可以设置行高,从而使文字居中,方便易用。

    对于这个导航栏的实现这几个属性很好用,主要用到block和inline-block这两个属性值,inline-block作为同一行的几个元素的实现,block做为元素间换行的实现。大家可以试试。

    对于最后一个none这个属性值:

    个人觉得用于隐藏元素比较方便,做那种鼠标浮动的时候更改display的属性值来达到显示与隐藏元素的效果。

    HTML中display一共有哪些比较常用的值呢,让我们一起来看看

    HTML中display在通常的项目开发中比较容易被使用的值主要有:none(元素不会被显示);

    block(元素将显示为块级元素,元素前后会带有换行符);

    inline(元素会被显示为内联元素,元素前后没有换行符);

    inline-block(行内块元素。CSS2.1 新增的值);

    table(元素会作为块级表格来显示,类似

    table-row(元素会作为一个表格行显示,类似

    );

    table-cell(元素会作为一个表格单元格显示,类似

    和 )。

    display实现的水平垂直居中!

    利用position和margin进行元素水平垂直居中;想必大家还是比较熟悉,经常用的。但不知道你是否使用过display:table与table-cell对元素进行水平垂直居中呢?

    以下就是利用display:table-cell进行元素水平垂直居中的的两种方法了:

    1.利用display:table与table-cell进行元素水平垂直居中

    结构:

    梦幻雪冰

    样式:.wrap {

    /*让元素以表格形式渲染*/

    display: table;

    height: 400px;

    width: 400px;

    background: #fcf;

    }

    .box {

    /*让元素以表格的单元素格形式渲染*/

    display: table-cell;

    /*使用元素的垂直对齐*/

    vertical-align: middle;

    }

    .con {

    width: 200px;

    height: 200px;

    margin: 0 auto;

    background: #999;

    }

    优点:

    这种方法不会像前面的两种方法一样,有高度的限制,此方法可以要据元素内容动态的改变高度,从而也就没有空间的限制,元素的内容不会因为没足够的空间而被切断或者出现难看的滚动条。

    缺点:

    不足之处呢?这种方法只适合现代浏览器,在IE6-7下无法正常运行。

    2.利用display:table-cell进行元素水平垂直居中

    结构:

    梦幻雪冰

    样式:.wrap {

    display: table-cell;

    width: 400px;

    height: 400px;

    background: #fcf;

    vertical-align: middle;

    }

    .box {

    width: 200px;

    height: 200px;

    margin: 0 auto;

    background: #999;

    }

    优点:

    这种方法的优点和方法三是一样的,不会有高度的限制。

    缺点:

    IE6、IE7不支持

    感谢你能够认真阅读完这篇文章,希望小编分享HTML中display属性的属性值有哪些内容对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,遇到问题就找亿速云,详细的解决方法等着你来学习!

    展开全文
  • CSS 布局 - display 属性

    万次阅读 2021-03-25 20:32:33
    CSS 布局 - display 属性
  • 这个时候我们就要用到display属性了。 对于display属性而言他有四个属性值:block、inline、inline-block、none。他们的详细说明如下: block:块对象的默认值。将对象强制作为块对象呈递,为对象之后添加新行。 ...
  • display属性介绍

    千次阅读 2020-03-09 18:38:40
    display:display属性设置元素如何被显示 1、display分类 display: none; ---------------让标签消失(隐藏元素并脱离文档流),即此元素不会被显示。 display: inline; ---------------内联元素(内联表签),此元素...
  • 主要介绍了jquery控制display属性为none或block,需要的朋友可以参考下
  • 主要为大家详细介绍了基于CSS属性display:table的表格布局的使用,即CSS display属性的table表格布局,感兴趣的小伙伴们可以参考一下
  • 今天为大家介绍的是JavaScript中的style.display属性操作实现代码与参数介绍
  • CSS display 属性 注释:如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、...
  • Bootstrap display属性

    千次阅读 2019-05-07 14:30:14
    快速和响应切换组件的显示值和更多与我们的显示实用程序。包括对一些更常见值的支持,以及...使用响应式显示实用程序类更改display属性的值。我们故意只支持显示所有可能值的子集。类可以根据需要组合成各种效果。 ...
  • query控制display属性为none或block.pdf
  • 主要介绍了css html布局之display属性 的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 本篇文章主要介绍了浅谈CSS3中display属性的Flex布局的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 使用jquery修改display相当于修改一个css...display是css的标准属性之一,常用的display属性值有: block : 块对象的默认值。用该值为对象之后添加新行 none : 隐藏对象。与visibility属性的hidden值不同,其不为...
  • 可以使用 display 属性定义建立布局时元素生成的显示框类型。 1. 如果将 display 属性设置为 block,可以让行内元素(比如元素)表现得像块级元素一样; 2. 如果将 display 属性设置为inline,可以让块级元素...
  • 关于JS 修改元素 display 属性问题

    万次阅读 2018-03-12 14:23:23
    JS 修改元素 display 属性 当我们想要使用JS来控制元素 display 属性来使其显示或者隐藏时,需要将 display 属性作用在行间样式上, 并使用 ID 选择器,即  HTML &lt;div id="drop-box" style...
  • CSS3理解display属性

    千次阅读 2017-08-09 00:39:10
    display属性定义: 可以将页面元素隐藏或者显示出来,也可以将元素强制改成块级元素或内联元素,在页面布局和JavaScript特效中常常用到display属性display属性值:none | inline | block | inline-block | list-...
  • 网页制作Webjx文章简介:网页元素应用上那些与表格相关的display属性值后,能够模仿出与表格相同的特性。我将会在该文中给大家演示这种方法给CSS布局带来的巨大影响。 应原书编辑要求,先在文章顶部给出链接:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 415,517
精华内容 166,206
关键字:

display属性