专栏首页Android开发与分享【前端】CSS : display

【前端】CSS : display

介绍

元素的显示方式

基本属性

  • none : 隐藏,且不占空间
  • inline : 设置元素为行内元素
  • block : 设置元素为块状元素
  • list-item :会把元素作为列表显示
  • inline-block : inline-block既具有block的宽高特性又具有inline的同行元素特性(CSS 2.1 新增)
  • table : 作为块级表格来显示(类似table),表格前后带有换行符。
  • flex : 弹性布局属性

用法

none

隐藏,且不占空间

{display:none}

另一种隐藏的方式 {visibility :hidden}

inline

设置元素为行内元素

{display:inline}

设置了该属性之后设置高度、宽度都无效,同时text-align属性设置也无效,但是设置了line-height会让inline元素居中

:两个块元素div(div为块元素,默认display为block)

.display1 {
    border: 1px solid;
    width: 50px;
    text-align: center;
}
<div class="display1">div 1</div>
<div class="display1">div 2</div>

效果:显示在两行

div

如果在样式中添加属性

{display: inline;}

效果:添加属性inline后,两个出现在同一行

div inline

注:发现div1和div2之间出现奇怪间隔。原因:div换行产生的换行空白。解决方法:两个div写在一行

默认为inline的元素:span、a、label、input、 img、 strong 和em就是典型的行内元素元素。

block

设置元素为块状元素 如果不指定宽高,默认会继承父元素的宽度,并且独占一行,即使宽度有剩余也会独占一行,高度一般以子元素撑开的高度为准,当然也可以自己设置宽度和高度。

:两个行内元素span(div为块元素,默认display为inline)

.display2 {
    border: 1px solid;
    text-align: center;
}
<span class="display2">span 1</span>
<span class="display2">span 2</span>

效果:显示在同一行

span

添加属性

{display: block;}

效果:显示在同一行

span block

list-item

会把元素作为列表显示

.display3 {
    display: list-item;
}
<div>
    <span class="display3">span 1</span>
    <span class="display3">span 2</span>
    <span class="display3">span 3</span>
</div>

效果:

list-item

为div添加padding-left: 30px,可以看到前面的点。因为默认的列表之前的·在box外面 效果:

inline-block

inline-block既具有block的宽高特性又具有inline的同行元素特性 (CSS 2.1 新增)

.display4 {
    display: inline-block;
    height: 100px;
    width: 100px;
    text-align: center;
    color: #FFFFFF;
    background-color: #27ad9a;
    line-height: 100px;
}
<div>
    <div class="display4">div 1</div>
    <div class="display4">div 2</div>
    <div class="display4">div 3</div>
</div>

效果:

table

作为块级表格来显示(类似table),表格前后带有换行符。 使用基于表格的CSS布局,使我们能够轻松定义一个单元格的边界、背景等样式, 而不会产生因为使用了table那样的制表标签所导致的语义化问题。

.display5 {
    display: table;
    border-collapse: collapse;
}
.display5_tr {
    display: table-row;
}
.display5_td {
    padding: 5px;
    display: table-cell;
    border: 1px solid;
}
<div class="display5">
    <div class="display5_tr">
        <div class="display5_td">header 1</div>
        <div class="display5_td">header 2</div>
        <div class="display5_td">header 3</div>
    </div>
    <div class="display5_tr">
        <div class="display5_td">content 1-1</div>
        <div class="display5_td">content 1-2</div>
        <div class="display5_td">content 1-3</div>
    </div>
    <div class="display5_tr">
        <div class="display5_td">content 2-1</div>
        <div class="display5_td">content 2-2</div>
        <div class="display5_td">content 2-3</div>
    </div>
</div>

效果

table

flex

弹性布局 常用的布局属性,可以解决大部分布局。 主要属性有两大类:容器属性和项目的属性

容器属性

  • flex-direction: 属性决定主轴的方向(即项目的排列方向)。
  • flex-wrap: 默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。
  • flex-flow: 属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
  • justify-content: 属性定义了项目在主轴上的对齐方式。
  • align-items: 属性定义项目在交叉轴上如何对齐。
  • align-content: 属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

项目属性

  • order: 定义项目的排列顺序。数值越小,排列越靠前,默认为0。
  • flex-grow: 定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
  • flex-shrink: 属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
  • flex-basis: 属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
  • flex: 属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
  • align-self: 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

(跟之前在RN中写的flex-box相似,就不详细描述了。详细用法参考Flex 布局教程:语法篇

注:设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

结语

在熟悉display的使用之后,日常的布局基本都能解决。 (多数布局都可以通过flex解决)

参考

CSS display 属性详解

有错误之处,感谢指出,接收批评

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【前端】CSS : float

    注:当一个元素浮动之后,从普通文档流中脱离,然后向左或者向右平移,一直平移直到碰到了所处的容器的边框,或者碰到另外一个浮动的元素。

    Gavin-ZYX
  • 【前端】CSS : position

    正常的布局行为,即元素在文档常规流中当前的布局位置。此时top, right, bottom, left和 z-index 属性无效。

    Gavin-ZYX
  • 【前端】CSS : 对齐、居中

    文本、元素的对齐和居中在开发中经常会用到。本文分别对文本、元素的对齐、居中进行介绍

    Gavin-ZYX
  • 2全屏布局<9>

    全屏布局的特点: 1.布局撑满窗口,当浏览器变大的时候,布局也是充满浏览器的窗口 2.滚动条出现在内容区域

    河湾欢儿
  • Javascript(2)-js进阶

    备注:如果父元素进行了relative/absolute定位,offsetTop/offsetLeft就是相对父元素的顶部和左边的距离,如果父元素默认定位,就是...

    意气相许的许
  • 清除浮动的方法

    本章主要介绍三种常用的清除浮动的方法,主要包括: ---- [1] 增加一个空 div, 使用 clear:both 将浮动元素 "挤到" 父元素中 [2] ...

    echobingo
  • 模板引擎(比如ejs)中如何显示markdown语法编写的内容

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.n...

    acoolgiser
  • 剖析一些经典的CSS布局问题,为前端开发+面试保驾护航

    这样做的优点就是在图文混排的时候可以很好的使文字环绕在图片周围。另外当元素浮动了起来之后,它有着块级元素的一些性质例如可以设置宽高等,但它与inline-blo...

    桃翁
  • CSS-三栏响应式布局(左右固宽,中间自适应)的五种方法

    xing.org1^
  • 使用bootstrap的栅栏实现五列布局

    我们知道,在使用Bootstrap栅格的时候,我们可以对网页方便的进行模块分割。Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随...

    王小婷

扫码关注云+社区

领取腾讯云代金券