CSS笔记06
上方的box如果高度/宽度不够导致内容出来,会导致下一行不是从最左边开始布局的,此时要在上面的box里面添加overflow: hidden;或者增加高度或宽度。
展示盒子的子元素如果是浮动的,考虑不要加高度,但是要清除浮动!
- 电梯导航栏贴近版心显示:
走屏幕的一半—回版心的一半–再回自己的宽度。
css拓展:
- 显示与隐藏
display: none; /*不显示,不占位置;*/
display: block; /* 显示;*/
visibility系列:
visibility: hidden/visible; /*不显示,占位置;*/
overflow:hidden; /*沿着容器边缘隐藏掉(切掉)超出部分;*/
overflow: scroll; /*添加滚动条;*/
overflow: auto; /*自动视情况添加滚动条;*/
鼠标样式:
cursor:pointer(手)/move(移动)/not-allowed(禁止)/text(文本)
轮廓线(表单):
outline: none;
outline: 1px solid #ccc;
锁定文本域:
resize: none;
垂直对齐:
vertical-align: top/middle/bottom ;
- 可设置行内块与文字的对齐方式
- 可以解决容器下方多出来的一两个像素的线
初始化的时候加一个
img{
vertical-align: middle;
}
溢出的文字用省略号代替:
1. white-space:nowrap (取消文字自动换行,强制一行显示);
2. overflow: hidden;
3.text-overflow: ellipsis;超出变为省略。
CSS Sprite 技术:
减少服务器的访问次数,多张图片放在同一张图上作为背景使用。
PS中F8打开消息面板,选左上角的坐标,加负号作为背景位置。
background: url(.. ) no-repeat -x -y;
父级设图片,子级设位置和大小;
顺序:长+宽+背景
多用:
span {
display: inline-block;
background: background: url(.. ) no-repeat;
background-position: -x -y;
}
滑动门:
基本结构
<style>
a{
display: inline-block;
height: ;
background: url(左侧图片) no-repeat;
padding-left:
padding-right: ;
}
a span{
display: inline-block;
height: ;
background: url(右侧图片) no-repeat right center;
padding-right: ;
}
/*点击效果只需a:hover , a:hover span 中改变背景图片即可。*/
</style>
<li>
<a href="">
<span>
</span>
</a>
</li>