CSS学习总结（1）

来源：互联网发布：圣诞节淘宝网页设计编辑：程序博客网时间：2024/06/03 20:43

1.display和visibility

(1)

div {    display: none;}div:hover {    display: block;}

(2)

div {    visibility: hidden;}div:hover {    visibility: visible;}

这两者本质是相同的，不同的是在运行的时候（2）尽管内容没有显示，1但是div的空间依然是保留的；而（1）则不会保留空间显示出空白部分。

（1）div p
两者之间隔了空格，表示descendent的关系，后者是前者的后代。（所有后代）
（2）div>p
用>，表示后者是div的孩子。（孙子则不会被选中）
（3）div+p
表示p是div的相邻的兄弟。

可以使用pseudo-element在某个元素的内容前面后者后面加上图片

<!--html--><h1>this is a heading.</h1>

/* css */h1::before {    content:url(smile.gif);}

<body>    <h2 style="border-left:12px solid #AA0000; background-color:#EEEEEE;padding:10px 20px;">        This is a heading.    </h2></body>

显示的效果是：
这里写图片描述

阅读全文

0 0