css应用三

1. Padding与margin

Padding为内边距，padding值会计算在width和height之内。如：width：100px；height：100px；padding：10px；该div的实际width为120px；height为：120px；

Margin为外边距，margin值不会计算在width和height内。增加和其他div的距离。如：margin：10px 20px 15px 30px；

2. Position：fixed的使用

Fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。该属性在弹出窗口的定位中应用，在需要固定显示某块内容时使用。可以和scroll（）配合使用，制作当页面滚动到某一位置，在页面固定某一内容。如：

$(window).scroll(function(){
        snbNav_scroll(400);
})
function snbNav_scroll(top){
        if($(document).scrollTop()>top){
            $(".plsc").addClass("fixe");
        }
        else{
            $(".plsc").removeClass("fixe");
        }
    }

3. 继承问题

继承是css样式规定的一种规则，同样的样式不仅可以应用于当前标签，还可以应用到它的子集，或是相同的标签。

如：*{font-size:14px;color：#000；}

因为“*”的原因，页面中的所有元素都会继承（font-size:14px;color：#000；）的属性。

具有继承性的样式有：font-size；font-weight；color;line-height;text-align等这些属性的设置，它的子集也会继承这些属性。

不具有继承性的样式：border，margin，padding，position，float，等这些属性，不会被后代继承。

4. 层叠问题

在HTML文件中对于同一个元素可以有多个CSS样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定处在最后面的样式会被应用。

如：给“示例一”设置颜色为#f00；为“示例二”设置颜色#000；

<style>
方法一：
.con_1_p_span{color:# f00;}
. con_2_span{color:# 000;}
方法二：
.con_1_p  .con_1_p_span{color:# f00;}
. con_2    . con_2_span{color:# 000;}
方法三：
. con_1  .con_1_p  .con_1_p_span{color:# f00;}
. con  . con_2    . con_2_span{color:# 000;}
方法四：
. con  . con_1  .con_1_p  .con_1_p_span{color:# f00;}
方法五：
span{color:#f00;}
span{color:#000;}
</style>

<div class=”con”>
    <div class=”con_1”>
        <p class=” con_1_p” >
    <span class=”con_1_p_span”>示例一</span>
</p>
</div>
    <p class=”con_2”>
    <span class=”con_2_span”>示例二</span>
</p>
</div>

四个方法中，方法一的权重最低，方法四的权重最高，浏览器会通过权重的判断来给处理样式，显示权重最高的样式。（同时，方法四的这种样式赋值，可以用来给页面中出现的多个相同元素中的其中一个设定特定值，避免对页面的元素进行调整和修改。）

方法五：只是给span元素设置了color：#f00和color：#000的样式，如果没有其他四中方法，那么span元素的文字只会显示#000的颜色，因为color：#000在color：#f00下面。两个span只会显示一种颜色，color：#000；方法五作如下修改：

.con_1   p  span{color:#f00;}
. con_2  span{color:#000;}

在没有前四种方法的情况下，就会得到我们想要的效果了。

5. 文字排版

粗体： font-weight:bold;

斜体： font-style:italic;

下划线：text-decoration:underline;

text-decoration指的是：文本的装饰，属性值有none默认不显示下划线.

none： 指定文字无装饰

underline： 指定文字的装饰是下划线

overline： 指定文字的装饰是上划线

line-through： 指定文字的装饰是贯穿线

blink： 指定文字的装饰是闪烁。

删除线： text-decoration:line-through;为文字加删除线

缩进：text-indent:2em;   2em的意思就是文字的2倍大小。

行间距：line-height:1.5em; 设置段落行间距1.5倍

letter-spacing:50px;（中文字和字母间距）

word-spacing:50px;（字母和字母间距）

对齐：

text-align:center; 居中

text-align:left; 居左

text-align:right; 居右

overflow属性规定当内容溢出元素框时发生的事情

hidden:指溢出隐藏；

auto：指溢出剪切部分显示，出现滚动条；

scroll：值溢出显示，出现滚动条；

visible：默认值，内容不被剪切，会出现在元素框之外。

Inherit：继承父元素属性。

Overflow-x：hidden隐藏x轴滚动条。

Overflow-y：hidden隐藏y轴滚动条。