【知识笔记】前端样式CSS

一、页脚如何始终固定在页面底部显示

想要达到页脚固定在页面底部显示，也就是当页面主体高度在浏览器高度范围内时页脚靠浏览器底部，超出浏览器高度时页脚在页面主体下方，相当于在高度上的自适应。

乍看似乎很简单，固定在底部，用fixed定位就好啦，但是页面一屏显示不下时，页脚会遮挡页面内容。

常用做法，html结构

<div class="wrap">
    <div class="main">
        在做项目时，想要达到页脚固定在页面底部显示，也就是当页面主体高度在浏览器高度范围内时页脚靠浏览器底部，超出浏览器高度时页脚在页面主体下方，相当于在高度上的自适应。
        乍看似乎很简单，固定在底部，用fixed定位就好啦，但是页面一屏显示不下时，页脚会遮挡页面内容。
        现在常用这种方法：
        <br />  <br />  <br />  <br />  <br />  <br /> <br />  <br />  <br />  <br />  <br />  <br />
        <br />  <br />  <br />  <br />  <br />  <br />
        <br />  <br />  <br />  <br />  <br />  <br />
        哈哈哈
    </div>
</div>
<div class="footer">
    原理是这样的：
    首先无论页面内容有多少，设置它占有的高度都至少是100%(min-height:100%),然后设置页面的高度根据容器内容的高度自适应，下面要考虑页脚的位置，设置一个负的外边距使页脚在高度100%范围内显示，这样带来的问题是与wrap得部门内容重合，于是设置main的padding-bottom使部分内容空出来，这个padding-bottom值的高度就是用来容纳页脚的。
    这样就实现了想要的效果，当然方法不止一种
</div>

CSS样式

<style>
    .wrap {
        min-height: 100%;
        height: auto !important;
    }
    .main {
        padding-bottom: 80px;
        /*页脚高度+页脚与容器的距离*/
    }
    .footer {
        height: 60px;/*页脚高度*/
        margin-top: -60px;/*一个页脚高度的负外边距*/
    }
</style>

原理是这样的：

首先无论页面内容有多少，设置它占有的高度都至少是100%(min-height:100%),然后设置页面的高度根据容器内容的高度自适应，下面要考虑页脚的位置，设置一个负的外边距使页脚在高度100%范围内显示，这样带来的问题是与wrap得部门内容重合，于是设置main的padding-bottom使部分内容空出来，这个padding-bottom值的高度就是用来容纳页脚的。

这样就实现了想要的效果，当然方法不止一种。

二、超链接的一些常规CSS设置

链接的定义主要有三个属性，颜色（color）、文本修饰（text-decoration）和背景（background）

超链接不显示下划线：text-decoration：none;

图片超链接：<a><img src="" /></a>

定义链接样式

　　CSS为一些特殊效果准备了特定的工具，我们称之为“伪类”。其中有几项是我们经常用到的，下面我们就详细介绍一下经常用于定义链接样式的四个伪类，它们分别是：

a:link，定义正常链接的样式；
a:visited，定义已访问过链接的样式；
a:hover，定义鼠标悬浮在链接上时的样式；
a:active，定义鼠标点击链接时的样式。

接定义的顺序
　　没有规矩不成方圆，虽然链接定义写好了，但它也是有规则的，如果这四项的书写顺序稍有差错，链接的效果可能就没有了，所以每次定义链接样式时务必确认定义的顺序，link--visited--hover-active，也就是我们常说到的LoVe HAte原则（大写字母就是它们的首字母）。
定义局部链接样式
　　在CSS中写上a:link{}这样的定义会使整个页面的链接样式改变，但有些局部链接需要特殊化，这个问题也不难解决，只要在链接样式定义的前面加上指定的id或class就可以了。
示例：

#sidebar a:link,
#sidebar a:visited {
color:#FF0000;
text-decoration:none;
}
#sidebar a:hover,
#sidebar a:active {
color:#000000;
text-decoration:underline;
}

调用方法：
<div id="sidebar"><a href="http://www.jb51.net" target="_blank">链接到脚本之家<a></div>

三、超出部分影藏，鼠标移动上去显示

超出部分若不允许换行：

width:200px;
overflow: hidden; /*溢出隐藏*/
text-overflow:ellipsis; /*隐藏的部分显示省略号*/
white-space:nowrap; /*规定段落中的文本不进行换行*/

使用这种方式的话，盒子一定要是块级盒子，并且有宽度！

若允许换行，则设置个高度，并且不要 white-space:nowrap;
鼠标移动上去显示，需要设置其 title属性。

更多参考：关于overflow:hidden