码迷,mamicode.com
首页 > Web开发 > 详细

css-display

时间:2018-07-29 14:17:03      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:hidden   时间   其他   nbsp   ext   垂直   input   高度   设置   

做前端开发也有很长一段时间了,但是分对于一些基础知识虽然平时会接触到,但却没有认真总结。本篇针对CSS的display属性做一下总结。

一、常见的display属性值

display用来设置一个元素如何展示,常见的值包含

  • block
  • inline-block
  • inlie
  • table table-cell table-row
  • list-item
  • flex
  • grid
  • none

二、元素隐藏

display:none用来隐藏元素,使用visibility:hidden也可以隐藏元素;

区别:使用visibility:hidden 隐藏元素,但它原来占据的空间依然存在,而使用display:none隐藏的元素不再占用空间

三、block、inline、inline-block及常见HTML标签的display属性值

block:块级元素,默认宽度为100%,在页面中单独占一行,宽度和高度可以设置

常见的dispaly为block的元素:div section p h1-h6 ul dl ol form

inline:内联元素,默认不换行,宽度和高度不可设置,由自身内容撑起;垂直方向上的padding和margin无效。

常见的display为inline的元素:span label a img

inline-block:内联块级元素,与inline类似,默认不换行,多个inline-block的元素会排在同一行;但宽度和高度可以设置,垂直方向上的padding和margin也可以设置。

常见的display为inline-block的元素:input select button textarea

其他:table默认display:table,tr默认dispaly:table-row,td默认display:table-cell,li默认display:list-item

 

css-display

标签:hidden   时间   其他   nbsp   ext   垂直   input   高度   设置   

原文地址:https://www.cnblogs.com/jingmi-coding/p/9384884.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!