发表于： 2018-07-21 21:44:54
2 579
今天完成的事情：复习css基础，完成任务7
明天计划的事情：看一些基础知识，看看属性，把知识可以表达出来。
遇到的问题：内容溢出元素框使用overflow 属性；所有的图片在一个位置，对父元素设置浮动。
收获：
复习一下定位：
relative：定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在。 使用相对定位的盒子，会相对于它原本的位置，通过偏移指定的距离，到达新的位置
absolute：定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流中的位置不再存在。使用绝对定位的盒子以离他最近的一个有position属性的父级进行定位。如果没有已经定位的父级元素，那么会以浏览器窗口为基准进行定位。
relative和static方式在最外层时是以<body>标签为定位原点的，而absoulte方式在无父级是position非static定位时是以<html>作为原点定位。
什么是文档流？
将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。只有三种情况会使得元素脱离文档流，分别是：浮动绝对定位和相对定位。
z-index，又称为对象的层叠顺序，它用一个整数来定义堆叠的层次，整数值越大，则被层叠在越上面，当然这是指同级元素间的堆叠，如果两个对象的此属 性具有同样的值，那么将依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。需要注意的是，父子关系是无法用z-index来设定上下关系 的，一定是子级在上父级在下。
Note：使用static 定位或无position定位的元素z-index属性是无效的。
overflow 属性规定如何处理如何处理不符合元素框的内容。用法如下：Object.style.overflow=visible|hidden|scroll|auto。
visible：内容不会被修剪，会呈现在元素框之外。
hidden：内容会被修剪，但是浏览器不会显示供查看内容的滚动条。
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto：由浏览器决定如何显示。如果需要，则显示滚动条。
overflow:hidden---这样超出部分会自动隐藏，这样做不好的地方是就是这部分的信息显示不完全，比如图片只显示了一部分，但是页面布局不会乱。要注意的是，使用overflow的时候，一定要定义width，百分比或者具体值都可以。
<audio> 标签定义声音，比如音乐或其他音频流。
autoplay 如果出现该属性，则音频在就绪后马上播放。
controls 如果出现该属性，则向用户显示控件，比如播放按钮。
loop 如果出现该属性，则每当音频结束时重新开始播放。
preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src url 要播放的音频的 URL。
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。transform: rotateZ(180deg);
链接的四种状态：
a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻
hover鼠标悬浮控制元素隐藏与显示
【A元素与B元素有一个相同的父级。
B元素默认隐藏，A元素默认显示。
当鼠标移动到A元素身上时，也可以看做是移动到了A元素的父级身上。A元素的父级获得一个鼠标的hover状态。】
css使用： .father:hover .b { display:block } 的方式，来定义鼠标移动到父级身上时，B元素的样式。
代码实例：
<div
<div
<div
</div>
css代码：
.b{display:none;}
.father:hover .b{display:block}
返回列表
评论