溢出overflow
overflow:visible 可见 显示 默认overflow:hidden溢出容器的部分隐藏overflow:scroll强制出现滚动条overflow:auto根据内容判读是否出现滚动条overflow-x:auto水平方向如何显示overflow-y:hidden垂直方向如何展示特殊: overflow:inherit 主动继承父元素的属性决定溢出容器的部分如何显示
overflow属性是加给父元素的
<style>.box1{width: 200px;height: 120px;overflow-x: auto;overflow-y: hidden;}.box2{width: 420px;height: 100px;}.box2 img{width: 100px;height: 100px;/* float: left; */}.father{width: 300px;height: 200px;background-color: skyblue;border: 4px solid black;}.son{width: 200px;height: 100px;border: inherit;}</style><div class="box1"><div class="box2"><img src="../img/overflow1.jpg" alt=""><img src="../img/overflow2.jpg" alt=""><img src="../img/overflow3.jpg" alt=""><img src="../img/overflow4.jpg" alt=""></div></div><div class="father "><div class="son"></div></div>
对空白空间的处理
white-space: 对空白空间(空格 回车)的处理
normal 默认 多余的空格和回车转为一个空格执行
pre保留所有的空格和回车nowrap文本不换行
text-overflow: ellipsis单行文本溢出展示省略号
<style>.text1{width: 300px;height: 300px;background-color: pink;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}</style>
元素类型的转换
display: 设置严肃属性
block 块元素inline 块元素inline-block 行内块元素list-item 列表项目none 让元素消失 不占据页面空间 但是标签依然存在,可以通过display: block再显示出来
静态导航
导航的数量固定, 宽度固定适用于导航数量较少的地方, 公司官网, 个人博客导航的hover效果加给li保证a标签的点击区域变大<style>*{padding: 0;margin: 0;}a{text-decoration: none;}li{list-style: none;}/* li只做浮动 */li{float: left;border: 1px solid black;}/* a标签 */a{width: 100px;height: 60px;background-color: yellow;display: block;text-align: center;line-height: 60px;}li:hover a{background-color: pink;}</style>
动态导航
导航的数量不固定, 宽度不固定, 适用于动态列表li标签宽度<style>*{padding: 0;margin: 0;}a{text-decoration: none;}li{list-style: none;}li{float: left;border: 1px solid #000;}a{height: 60px;padding: 0 30px;background-color: yellow;display: block;line-height: 60px;}li:hover a{background-color: pink;}</style>
**display: none **
小练习: 鼠标移入.father时出现.son
<style>.father{width: 200px;height: 200px;background-color: pink;}.son{width: 100px;height: 100px;background-color: skyblue;display: none;}.father:hover .son{display: block;}</style>
