隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"，但是这两种方法会产生不同的结果。

display:none隐藏某个元素，且隐藏的元素不会占用任何空间，即该元素不但被隐藏了，而且原本占用的空间也会从页面布局中消失。

visibility:hidden隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间，即该元素虽然被隐藏了，但仍然会影响布局。

块元素：占用全部宽度，可设置高度和宽度，前后都是换行符，如<div>、<h1-h6>、<p>、<li>等

内联元素：只占用必要的宽度，设置高度和宽度不起作用，不强制换行，如<span>、<a>、<img>等

将块元素显示为内联元素：display:inline;例如li {display:inline;}会将列表横向显示

将内联元素显示为块元素：display:block;例如span {display:block;}会将多个span内容换行显示

使一个元素同时具有块元素和内联元素属性：display:inline-block，即可使元素具有块元素可设置长宽的属性，同时又具有内联标签不换行的属性。

position属性指定了元素的定位类型

1.static：静态定位即没有定位，按照文档流排布，静态定位的元素不会受到top、bottom、left、righ的影响

2.fixed：元素的位置相对于浏览器窗口固定，即使窗口滚动元素也不会移动

fixed定位的元素脱离文档流，不占据空间，因此可能与会其他元素重叠

例如p.pos_fixed{ position:fixed; top:30px; right:5px; }会使该段落显示在距离页面上端20px、右端5px的位置，且不随窗口滚动而滚动

3.relative：相对定位，会按照元素的原始位置对该元素进行移动，而其原本所占的空间不会变化，即如果向上移动了，其下面的元素并不会向上占据其原本的空间

例如h2.pos_right{position:relative;left:20px;}表示从元素的原始位置左侧增加20px，即向右移动20px

而h2.pos_right{position:relative;left:-20px;}表示从元素的原始位置左侧减去20px，即向左移动20px

4.absolute：绝对定位，相对于最近的已定位父元素，如果没有已定位的父元素，那么它的位置相对于<html>

absolute定位的元素脱离文档流，不占据空间，因此可能与会其他元素重叠

例如h2 { position:absolute; left:100px; top:150px; }

5.sticky：粘性定位，位置依赖于用户的滚动，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是top、right、bottom、left 之一，换言之指定top、right、bottom、left 四个阈值其中之一，才可使粘性定位生效，否则其行为与相对定位相同。

例如div.sticky {position: sticky;top: 0;background-color: #cae8ca;border: 2px solid #4CAF50;}会将div中sticky选择器的内容设置为粘性定位，在内容不超过上边距时，会随着鼠标的移动而位置上移，当移动到最上面时，则固定位置不变。

不占据空间的定位元素，即fixed和absolute定位的元素，由于可能与其他元素重合，可以通过z-index:n;表示重叠时的显示顺序，即哪个显示在前面哪个显示在后面，n为负值表示该定位元素显示在后面，正值则表示显示在前面。

如果两个定位元素重叠而没有指定z - index，那么最后定位的元素将被显示在前面。

水平&垂直对齐

1.元素居中对齐，指定margin为auto，同时需要指定width

.center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; }

2.文本居中对齐，使用text-align:center

.center { text-align: center; border: 3px solid green; }

3.图片居中对齐，使用 margin: auto;，并将它放到块元素中

img { display: block; margin: auto; }

cursor修改光标移动到指定位置时的显示方式

<span style="cursor:auto">auto</span><br>

<span style="cursor:crosshair">crosshair</span><br>

<span style="cursor:default">default</span><br>

<span style="cursor:e-resize">e-resize</span><br>

<span style="cursor:help">help</span><br>

<span style="cursor:move">move</span><br>

<span style="cursor:n-resize">n-resize</span><br>

<span style="cursor:ne-resize">ne-resize</span><br>

<span style="cursor:nw-resize">nw-resize</span><br>

<span style="cursor:pointer">pointer</span><br>

<span style="cursor:progress">progress</span><br>

<span style="cursor:s-resize">s-resize</span><br>

<span style="cursor:se-resize">se-resize</span><br>

<span style="cursor:sw-resize">sw-resize</span><br>

<span style="cursor:text">text</span><br>

<span style="cursor:w-resize">w-resize</span><br>

<span style="cursor:wait">wait</span><br>

光标显示方式

当将光标移动到上述内容时，会按照指定的cursor方式进行显示

常用的有auto自动、default箭头、help带问号箭头、move可移动、pointer小手、progress转圈圈箭头、wait转圈圈

css显示display、可见性visibility、定位position、对齐的更多相关文章

  1. css（display，float，position）

    display 用来设置元素的显示方式 display : block | none | inline | inline-block inline:指定对象为内联元素 block:指定对象为块元素 i ...

  2. CSS属性中Display与Visibility的不同

    大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的.visibility属性用来确定元素是显示还是隐藏,这用visibility=&qu ...

  3. CSS display和visibility的用法和区别

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt408 大多数人很容易将CSS属性display和visibility混淆,它 ...

  4. CSS Display（显示）和Visibility（可见性）

    CSS Display(显示)和Visibility(可见性) 一.简介 display属性设置一个元素应如何显示(隐藏不占用空间),visibility属性指定一个元素应可见还是隐藏(隐藏占用空间) ...

  5. CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  6. CSS.04 -- 浮动float、overflow、定位position、CSS初始化

    标准流:行内/行内块元素横向有序排列 : 块元素纵向有序排列. 浮动:Float 语法:float:left/right :  设置浮动的元素,脱离标准流 浮动的框可以向左或向右移动,直到它的外边缘碰 ...

  7. HTML+CSS教程（六）浮动-float+定位-position+居中问题

    一.浮动(float)1.文档流:是指盒子按照 html 标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先排列,后写的排在后面,每个盒子都占据自己的位置 ...

  8. CSS 浮动(float)与定位(position)

    一.浮动 1.三个属性:left.right.none. 2.特点:容易造成父项塌陷,故在父项需要清除浮动 3.父项塌陷现象 4.父项塌陷解决方案(建议使用):清除浮动 .parent:after{ ...

  9. 盒子布局、标签特性display、浮动、定位position

    盒子模型布局: 盒子模型:每个标签都是一个盒子 盒子在页面显示在大小是:自身宽度+边框+边距(内边框+外边距) 如果一个盒子设置了边框,则边框需要被加两遍.若果设置了边距则内外边距根据设置情况要被加两 ...

随机推荐

  1. nginx 长连接keeplive

    发现后台日志打印太多 FD打开太多的日志. 处理思路: 修改nginx upstream的长连接 http://blog.csdn.net/gzh0222/article/details/852363 ...

  2. js关卡函数，throat函数实现，定时运行函数

    function throat(callback,num){ var timer = null; callback = callback || function(){}; return functio ...

  3. c# webapi 跳转

    c# webapi 跳转  public HttpResponseMessage Post() {     // ... do the job     // now redirect     Http ...

  4. db2修改表结构，增加列，删除列等

    增加一列:ALTER TABLE tbname ADD COLUMN columnName datatype; 增加多列:ALTER TABLE tbname ADD COLUMN columnNam ...

  5. MYSQLi数据访问查询数据

    单条件查询 <body> <div align="center" style="width:90%;"> <h1>数据查询& ...

  6. Unity shader学习之菲涅耳反射

    菲涅尔反射(Fresnel reflection),指光线照射物体表面时,一部分发生反射,一部分进入物体内部发生折射或散射,被反射的光和折射光之间存在一定的比率. 2个公式: 1. Schlick 菲 ...

  7. leetcode Sort List 对链表进行排序

    描述: Sort a linked list in O(n log n) time using constant space complexity. 在O(n*log(n))的时间复杂度,常数级空间复 ...

  8. E. Gerald and Giant Chess

    E. Gerald and Giant Chess time limit per test 2 seconds memory limit per test 256 megabytes2015-09-0 ...

  9. 【Hive学习之四】Hive 案例

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk8 hadoop-3.1.1 apache-hive-3.1.1 ...

  10. QDialog 使用Demo

    [1].pro QT += core gui greaterThan(QT_MAJOR_VERSION, ): QT += widgets TARGET = TestDialog TEMPLATE = ...