HTML+CSS进阶学习摘录(Display属性)(三)
2017-07-07 22:16
911 查看
一、display:none 与 visbility:hidden
display:none 元素隐藏,不占据原来位置visibility:hidden 元素隐藏,占据原来位置
二、display:table-cell
(1)图片垂直居中于元素 父元素{
display:table:cell;
vertical-align:center;
}
子元素
{
vertical-align:center;
}
(2)等高布局
#wrapper
{
display:table-row;
width:auto;
height:auto;
}
#img-box
{
display:table-cell;
vertical-align:middle;
text-align:center;
width:150px;
height:auto;
border:1px solid red;
}
#text-box
{
display:table-cell;
width:200px;
border:1px solid red;
border-left:none;
padding:10px;
}
<div id="wrapper"> <div id="img-box"> <img src="m1.jpg" alt="" /> </div> <div id="text-box"> <span>Dark light, just light each other. The responsibility that you and my shoulders take together, such as one dust covers up. Only afraid the light suddenly put out in theendless dark night and countless loneliness.</span> </div> </div>
(3)自动平均划分元素
*{
padding:0;
margin:0;
}
ul
{
list-style-type:none;
display:table;
width:300px;
}
li{
display:table-cell;
height:60px;
line-height:60px;
text-align:center;
color:white;
}
ul li:nth-child(1){ background-color:Red;}
ul li:nth-child(2){ background-color:Orange;}
ul li:nth-child(3){ background-color:Blue;}
ul li:nth-child(4){ background-color:silver;}
ul li:nth-child(5){ background-color:Purple;}
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
三、去除inline-block 元素间距
在父元素中添加父元素
{
font-size:0;
}
相关文章推荐
- HTML+css进阶学习摘录(标签语义化)(一)
- (十二)学习CSS之display属性
- HTML学习笔记之CSS属性设置(一)
- HTML学习笔记8 css初见-文本属性
- 区别CSS中display:box;inline;none以及HTML中 <frame> 标签<table> 标签的 frame 属性
- 【HTML & CSS & JavaScript】display属性容易搞混
- HTML学习笔记---table表格,display属性(结合我的clear:both看)
- 前端学习 -- Html&Css -- 条件Hack 和属性Hack
- html学习笔记(3)-CSS padding margin border属性详解
- HTML入门学习笔记--CSS属性(2)
- CSS基础学习十四:盒子模型补充之display属性设置
- CSS进阶(五)——display属性
- HTML----CSS display (block none inline)属性淡说
- html+css2次学习----a链接的href属性的使用
- Code笔记之:CSS+HTML display 属性
- HTML&CSS基础学习笔记2-Html的全局属性
- html+css:display:flex属性
- Html+CSS CSS display属性 属性值block,inline,inline-block
- html/css学习零星笔记(二)——使用usemap属性创建图片映射
- CSS学习笔记06-分层(z-index属性).html