CSS笔记06

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>