这是我参与[第五届青训营]伴学笔记创作活动的第4天 昨天学习了盒子模型的边距以及大小的设置，但是今天发现了一个问题，就是有时候会出现问题，这也是因为css的特性导致的。
/* 相互嵌套的父子元素，你给子元素一个margin-top， 会导致父元素也生效了这个margin-top， 这个问题被称为margin塌陷 */
.father {
width: 300px;
height: 300px;
background-color: pink;
/* 解决塌陷问题，只需要给父级加上overflow:hidden标签 */
overflow: hidden;
}
.son {
width: 50px;
height: 50px;
background-color: skyblue;
padding-top: 10px;
}
在解决了盒子模型塌陷问题后，还有一个问题：
span { margin-top: 10px; padding-bottom: 10px; } /* 解决方案：加行高 */ line-height: 100px;
div {
width: 300px;
height: 300px;
background-color: pink;
/* 溢出 overflow
visble：默认值，让溢出的部分可以看见
hidden：隐藏溢出部分
scroll：无论是否溢出，都显示滚动条
auto：根据是否溢出，自动显示或隐藏滚动条 */
overflow: scroll;
}
这些问题都是因为css中盒子的占位导致的，标准流里面一个div默认独占一行，后面会学习浮动来解决这一问题。
/* 光标类型 cursor
default：默认，通常是箭头
pointer：小手效果，提示用户可以点击
text：提示用户可以选择文字
move：十字光标，提示用户可以移动 */
div {
width: 300px;
height: 300px;
background-color: pink;
cursor: move;
}
这是一个小插曲，以后也会更多地接触到对光标样式的更改。
/* :focus表示鼠标放上去点击时，会发生变化或提示 */ input:focus { background-color: pink; }
.box {
width: 300px;
height: 300px;
background-color: black;
/* opacity 让元素透明
而且是整个标签连同内容全部变透明
属性值：0~1之间的数字，
1表示完全不透明
0表示完全透明 */
opacity: 0;
}
以上是我今天全部的学习内容，我感觉对我很有帮助！
