码迷,mamicode.com
首页 > 其他好文 > 详细

DIV居中以及设置隐藏的几种方式

时间:2020-03-02 14:59:52      阅读:98      评论:0      收藏:0      [点我收藏+]

标签:哪些   visible   区别   水平居中   块元素   区域   继承   焦点   也会   

PartI DIV居中的常用方法:

1)text-align:center方式

--------------------------html-----------------------------

<div class="demo1">
<div class="text1">demo</div>
</div>

--------------------------css-----------------------------

.demo1 {
text-align: center;
}

注: 块元素不可以!

2)margin: 0 atuo方式
-------------------------html-----------------------------

<div class="demo2">
<div class="text2">demo</div>
</div>

--------------------------css-----------------------------

.text2 {
margin: 0 auto;
width: 200px;
background: red;
}

注: 这种对齐方式要求内部元素(.text2)是块级元素,并且不能脱离文档流(如设置position:absolute),否则无效。

3) 脱离文档流的居中方式(position:absolute)
通过absolute的流体特性实现居中。(对立方向同时发生定位)
-------------------------html-----------------------------

<div class="demo3">
<div class="text3">demo</div>
</div>

--------------------------css-----------------------------

.text3 {
width: 300px;
height: 300px;
position: absolute;
background: red;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}

注: 行内块不可以!

4) display:table-cell
display:table-cell配合width,height
text-align:center,vertical-align:middle让大小不固定元素垂直水平居中,
这个方式将要对其的元素设置成为一个td,float、absolute等属性都会影响它的实现。
-------------------------html-----------------------------

<div class="demo4">
<div class="text4">demo</div>
</div>

--------------------------css-----------------------------

.demo4 {
display: table;
width: 100%;
height: 500px;
background: red;
}
.text4 {
display: table-cell;
text-align: center;
vertical-align: middle;
/* 影响效果 */
/* float: left; */
/* position: absolute; */
}

5) 垂直居中
只需设置line-height即可,height不需要设置。(因为div的高度是由行高决定的!)
-------------------------html-----------------------------

<div class="demo5">
<div class="text5">demo</div>
</div>

--------------------------css-----------------------------

.demo5 {
line-height: 80px;
background: red;
}

6)使用css3的translate水平垂直居中元素
这种方式将脱离文档流的元素,设置top:50%,left:50%,然后使用transform来向左向上偏移半个内元素的宽和高。
-------------------------html-----------------------------

<div class="demo6">
<div class="text6">demo</div>
</div>

--------------------------css-----------------------------

.text6 {
position: absolute;
top: 50%;
right: 50%;
transform: translate(-50%, -50%);
}

7)使用css3计算的方式居中元素calc
这种方式同样是将脱离文档流的元素,然后使用计算的方式来设置top和left;
-------------------------html-----------------------------

<div class="demo7">
<div class="text7">demo</div>
</div>

--------------------------css-----------------------------

.text7 {
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 50px);
}

PartII CSS设置隐藏的常用方法:

1)display: none

将元素从文档中删除,不占空间,对布局没有影响,但会产生回流。

2)text-indent: -999em

将文字提到段落前面,不让看见,会影响布局

3)font-size: 0

直接将文字的高度设为0,从而不让看见

4)position: relative / absolute;

 **top: -999em / left: -999em**

不占据空间,只要距离显示屏幕足够大就ok,适用于比较写死的东西,不能随意修改。

5)visibity: hidden

只是看不见而已,占据空间,无法点击,元素依然会影响布局,不产生回流,性能较好

注: 该属性会继承,父元素使用其隐藏,子元素也会受其影响,看不见,必须通过设置visibility:visible让其显示

6)opacity: 0

设置透明度为0,使其看不见。占空间,可以点击。

7)z-index: -1 任意负值

上一级设置背景色,使其看不见。不能点击

8)clip: rect(0,0,0,0)

裁剪隐藏,不占据空间,不能点击。

Q: 使用隐藏元素需考虑的关键点有哪些?

A: 1. 是否占据空间

2. 回流与渲染  见web的回流与重绘

3. 株连性 (visibility的继承性)

Q: display: none 和 visibility:hidden的区别

A: display: none 不占空间,对布局没影响,会产生回流

visibility: hidden 占空间,对布局有影响,不产生回流,性能比display:none好

Q: z-index 负值设置隐藏和clip裁剪设置隐藏的区别

A: z-index 只需要层叠上下文内的某一个父元素加个背景色即可,元素无需绝对定位,设置position: relative 也可隐藏。并且对原来的布局以及父元素的行为无任何影响

clip 必须绝对定位或固定定位,因为此属性定义了绝对定位对象可视区域的尺寸,所以必须得将position属性的值设置为absolute时才可使用并且会导致focus的焦点发生细微的变化,在特定条件下有体验问题。

DIV居中以及设置隐藏的几种方式

标签:哪些   visible   区别   水平居中   块元素   区域   继承   焦点   也会   

原文地址:https://www.cnblogs.com/zppsakura/p/12395355.html

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