css隐藏显示

一、css隐藏显示

1

/7

新建一个html文件，命名为test.html，用于讲解html中怎么用CSS固定一个div模块位置不变。

2

/7

在test.html页面中，创建一个div模块，并在div内写上测试的文字，用于测试。

3

/7

在test.html页面中，使用css设置div的宽度为100%，高度为100px。 代码如下：

4

/7

在test.html页面中，使用css设置div内的文字垂直、水平居中，并设置文字的大小为30px。代码如下：

5

/7

在test.html页面中，使用css设置div内的文字颜色为白色，同时设置div的背景颜色为红色。代码如下：

6

/7

最后，在test.html页面中，使用css设置div的位置属性为absolute，即在页面中固定位置，并使用bottom设置div固定在页面的底部。

7

/7

在浏览器打开test.html页面，可见，div成功固定在页面的底部。

二、css隐藏导航栏

打包APP，安卓手机运行，顶部的导航菜单栏不显示。

手机浏览器打开正常

电脑浏览器打开正常

问题出在了app.css中，此文件是创建模板时自动生成的。

在app.css中第一条就是关于隐藏导航条的样式，修改为显示即可

三、css菜单实现展开与隐藏

最常见的方法是通过Javascript控制某标签的CSS属性来实现的，下面是具体实现方法：首先给要隐藏或显示的部分所在标签一个惟一的ID，比如将它们放到一个

四、css隐藏页面元素的方法

情况一：当你选择标题1，标题2，标题3等某个标题样式的时候，它就会显示出来。

情况二：在“段落”对话框中选择 “换行和分页”选项卡，这里如果有勾选了“与下段同页”、“段中不分页”、“段前分页”3个选项任意一项，也会出现小黑点。

01

选择【开始】-【段落】组，点击【显示/隐藏编辑标记】按钮，隐藏小黑点！

这时候，已经点击【显示/隐藏编辑标记】按钮，但小黑点还是在。

02

选择【文件】-【选项】命令，打开“Word选项”对话框，选择“显示”选项卡，取消勾选“段落标记”选项，黑点即消失。

03

选择【文件】-【选项】命令，打开“Word选项”对话框，选择“显示”选项卡，取消勾选“显示所有格式标记”选项，黑点即消失。

04

选择【开始】-【段落】组，点击右下角的“段落设置”按钮，打开“段落”对话框，在【换行和分页】-【分页】项下取消勾选所有复选即可取消小黑点。

五、css隐藏dom

HTML dom隐藏有下列几种方式：

设置元素的opacity值为0

设置元素的visibility值为hidden

设置元素的display值为none

设置元素的position值为absolute，并且将其移到不可见区域

设置元素clip（在新的CSS中使用clip-path来替代clip）

除此之外，还可以使用：

设置元素的hidden

上面隐藏元素的方法都是大家常见的，也是众所周之的。当然除此之外还有一些特殊的小技巧,比如说：

将元素的font-size、line-height、width和height设置为0

设置元素的transform的translateX或者translateY的值为-100%