1.介绍
先看看display的取值：
是不是发现原来display有这么多的取值:我这里将display所有的取值分为3类：常用系,table系,伸缩系(css3新加)
2.常用系
2.1 display:none;和visibility:hidden的区别
display:none;隐藏对象,不为隐藏的对象保留其物理空间
visibility:hidden;隐藏对象,会为隐藏的对象保留其物理空间
2.2 display:inline;("流"),display：block;("块"),display:inline-block;(这里我就叫它"流块")
网页中的元素都有一个默认的display值,下面看看常见元素的display的默认值:
html,body,h1~h6,p,ul,ol,div, |
dl,dd,dt,fieldset,form,pred,hr, |
blockquote,frame,frameset,hr,menu, |
dir,center,table{display:block;} |
a,span,em,font,strong,sub,sup,label, |
i,b,cite{display:inline;} |
- 块级元素("块")：(1)独占一行;(2)宽度会自动填满其父元素宽度;(3)可以设置width，heiht属性;
- 行内元素("流")：(1)不会独占一行，相邻的行内元素会排列在同一行;(2)设置width,height无效;(3)水平方向的padding和margin都会产生效果;
- "流块"：(1)不独占一行,相同元素会排列在一行;(2)可设置宽高，margin，padding;
2.3 img,input,textarea,select等行内替换元素
按照非"块"即"流"的分类,img,input,textarea,selec等是行内元素的,但是这些元素部分表现出来的特性确实和大部分的行内元素不同，于是又按照替换和非替换元素来区分它们之间的不同
块级元素和行内元素，替换元素和非替换元素都是一种分类方式(个人以为，不管如何分类都是为了求同区["区别"]异,这里就不重点介绍分类的依据是什么)
img,input,textarea,select等行内替换元素height/width/padding/margin均可用;
a,span,em等行内非替换元素height/width/padding top、bottom/margin top、bottom均无效果。
2.table系
2.1 display:block和display：table;
设置display:table;的元素同样为一个"块",但与display：block;的区别在于table具有"包裹性";
2.2 display:table-cell的应用
(1)两栏自适应布局
如图：设置了display：table-cell;缩放浏览器,右边内容会自适应浏览器大小
(2)多栏等高自适应布局
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
html,body {padding:0px; margin:0;} |
.list_box{display: table-row;} |
.list_cell{display: table-cell;30%;padding: 1.5%;background-color: #ececec;} |
<div class="list_cell">你看那个人好像一条狗你看那个人好像一条狗你看那个人好像一条狗你看那个人好像一条狗你看那个人好像一条狗你看那个人好像一条狗你看那个人好像一条狗</div> |
<div class="list_cell">你看那个人好像一条狗你看那个人好像一条狗你看那个人好像一条狗你看那个人好像一条狗你看那个人好像一条狗</div> |
<div class="list_cell">你看那个人好像一条狗</div> |
3.伸缩系
display:box/flex;开启弹性盒(css基础篇(三)——布局(下))