会飞的鱼

2020
Godam
首页 » 学习笔记 » Day 02 CSS 学习笔记

Day 02 CSS 学习笔记

1. CSS Display(显示) 与 Visibility(可见性)

    隐藏一个元素可以通过把display属性设置为"none",或把visibility属性设置为"hidden"。但是请注意,这两种方法会产生不同的结果。
    visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。
    display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。

    可以通过显示将竖状列表改为横向,例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Godam www.godreams.cn </title> 
<style>
li{display:inline;}
</style>
</head>
<body>

<p>链接列表水平显示:</p>

<ul>
<li><a href="/html/" target="_blank">HTML</a></li>
<li><a href="/css/" target="_blank">CSS</a></li>
<li><a href="/js/" target="_blank">JavaScript</a></li>
<li><a href="/xml/" target="_blank">XML</a></li>
</ul>

</body>
</html>

好困啊,今天不想更了...



文章如无特别注明均为原创! 作者: 果果, 转载或复制请以 超链接形式 并注明出处 GODAM|博客|godam
原文地址《 Day 02 CSS 学习笔记》发布于2020-2-15

分享到:
打赏

评论

游客

切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册

sitemap