Skip to content

[css] 第86天 display有哪些值?分别说明他们的作用是什么? #597

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

第86天 display有哪些值?分别说明他们的作用是什么?

Activity

dondonZh

dondonZh commented on Jul 11, 2019

@dondonZh

block
none
inline-block
initial
table
inline
flex
自己能打出来的只有这些

xjt31012

xjt31012 commented on Jul 11, 2019

@xjt31012

display:block/inline-block 给元素转块/转行内块
display:inline 把元素转成内联元素(我很少用到)
display:none让元素消失,不显示
display:flex弹性布局
我常用的就是这些

pokerLife

pokerLife commented on Jul 11, 2019

@pokerLife

你们居然忘记 css grid 网格布局

 display:grid;
haizhilin2013

haizhilin2013 commented on Jul 11, 2019

@haizhilin2013
CollaboratorAuthor

@pokerLife 这提示很是及时

quitone

quitone commented on Jul 11, 2019

@quitone

block
inline-block
inline
table
table-cell
flex
inline-flex
grid
inline-grid

xiangshuo1992

xiangshuo1992 commented on Jul 11, 2019

@xiangshuo1992
Contributor

MDN,真香
元素盒模型分为 外部显示模型内部显示模型

/* <display-outside> values */
display: block;
display: inline;
display: run-in;

/* <display-inside> values */
display: flow;
display: flow-root;
display: table;
display: flex;
display: grid;
display: ruby;

/* <display-outside> plus <display-inside> values */
display: block flow;
display: inline table;
display: flex run-in;

/* <display-listitem> values */
display: list-item;
display: list-item block;
display: list-item inline;
display: list-item flow;
display: list-item flow-root;
display: list-item block flow;
display: list-item block flow-root;
display: flow list-item block;

/* <display-internal> values */
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;

/* <display-box> values */
display: contents;
display: none;

/* <display-legacy> values */
display: inline-block;
display: inline-table;
display: inline-flex;
display: inline-grid;

/* Global values */
display: inherit;
display: initial;
display: unset;
nowherebutup

nowherebutup commented on Jul 11, 2019

@nowherebutup

block
inline-block
inline
flex
table
none

table-cell
grid
inline-flex

smile-2008

smile-2008 commented on Feb 26, 2021

@smile-2008

display:block/inline-block 给元素转块/转行内块
display:inline 把元素转成内联元素(我很少用到)
display:none让元素消失,不显示
display:flex弹性布局
我常用的就是这些

zxcdsaqwe123

zxcdsaqwe123 commented on Dec 14, 2021

@zxcdsaqwe123

flex block inline inline-block

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @smile-2008@haizhilin2013@quitone@xjt31012@xiangshuo1992

        Issue actions

          [css] 第86天 display有哪些值?分别说明他们的作用是什么? · Issue #597 · haizlin/fe-interview