display的常用属性

display的属性值

display所有的取值在下图中：

常用的几种取值

1. display:none

此元素不会被显示，并且不占据页面空间

与visibility:hidden的区别

hidden占实际空间，其后的元素仍在该有的位置，而none后的元素占none原有的位置

2. display:block

块级元素，会独占一行

块级元素的特点

(1) 每个块级元素都从新的一行开始，并且其后的元素也另起一行;
(2) 如果不设置宽度，其宽度会自动填满父元素的宽度；
(3) 元素的高度、宽度、行高以及margin上下左右都可设置；

3. display:inline

多个行内元素占同一行，直到放不下才换行

行内元素的特点

(1) 元素会在一行内显示，超出屏幕宽度自动换行；
(2) 元素的高度、宽度、行高都不可设置，只能设置margin和padding左右的值；
(3) 元素的宽度就是它包含的文字或图片的宽度，只能是靠元素内的内容撑开；

4. display:inline-block

行内块元素，与行内元素一样可以在一行内显示

行内块元素的特点

(1)和其他元素都在一行上；
(2) 元素的高度、宽度、行高以及顶和底边距都可设置；

5. display:flex

多栏多列布局，比较适合移动端开发使用
可以参考阮一峰的博客：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

行内元素与块级元素的区别

嵌套

行内元素：行内元素只能嵌套行内元素，不能嵌套块级元素。(示例元素：span,b,i,a,u,sub,sup,strong,em)
块级元素：块级元素可以嵌套行内元素，但是行内元素不可以嵌套块级元素。(示例元素：div,h1-h6,ul,ol,dl,p)
margin和padding

行内元素：有margin和padding，但是只能够设置左右的值，设置上下的值是无效的。
块级元素：可以设置margin和padding上下左右的四个值，margin可以有负值，padding不允许有负值。
设置宽高

行内元素：不允许设置宽高，行内元素的宽高只能是由行内元素内的内容撑起来。
块级元素：允许设置宽高，如果不设置，默认宽度是父元素的100%，高度是由内容撑起来的。

总结

以前用display时挺懵逼的，所以就专门写了这篇，相关的用法如果忘记了就翻一翻这篇文章吧！

display的常用属性相关推荐

display:column常用属性解释
1.官方网址: http://www.displaytag.org/1.2/displaytag/tagreference.html 2.<display:column>介绍: 顾名思义, ...
CSS入门（CSS常用属性----字体、对齐方式、display属性、浮动）
CSS常用属性设置 3.字体设置字体 font-family ①当font-family的属性值包含空格或特殊字符时,需要将font-family的属性值用引号括起来. ②font-family有& ...
【CSS】display常用属性
1 display常用属性值描述 block 设置元素为块级元素 inline 设置元素为行内元素 inline-block 行内块元素 none 在不删除元素的情况下隐藏或显示元素(不占空间) ...
CSS常用属性之display属性（六）
display属性在日常使用中会经常用到,但是它的一些特点及作用可能有很多小伙伴都不太清楚,接下来就让我来详细介绍一下吧. CSS display属性 1.display 属性的作用 2.元素外部显示 ...
5中div标签有没有url属性_[网页编程]-03 CSS 常用属性
字体处理常用属性 <!DOCTYPE html> <html><head><meta charset="utf-8"><tit ...
css知识点笔记-常用属性
css知识点范围:常用属性删除线:text-decoration : line-through 下划线:text-decoration : underline 斜体:font-style : ita ...
DIV常用属性大全自己整理
一.属性列表代码如下:color : #999999 文字颜色 font-family : 宋体文字字型 font-size : 10pt 文字大小 font-style:itelic 文字斜体育 ...
前端基础6：背景常用属性和定位以及BFC
背景常用属性 background-color:背景颜色属性值有三种书写方式: 1.关键字法(不常用) 2.十六进制法 3.RGB(0~255,0~255,0~255) background-ima ...
前端常用属性知识点--文档
清除浮动带来的影响--.clearfix .clearfix{ *zoom:1; } .clearfix::after{content: "";display: block;cle ...