css

CSS的继承性和层叠性
有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是继承性。
哪些属性能继承？
color、 text-开头的、line-开头的、font-开头的。
这些关于文字样式的，都能够继承； 所有关于盒子的、定位的、布局的属性都不能继承。
层叠性
层叠性：就是css处理冲突的能力。 所有的权重计算，没有任何兼容问题！
当选择器，选择上了某个元素的时候，那么要这么统计权重：
id的数量，类的数量，标签的数量

如果不能直接选中某个元素，通过继承性影响的话，那么权重是0。

如果大家都是0，那么有一个就近原则：谁描述的近，听谁的。

权重总结：
1） 先看有没有选中，如果选中了，那么以（id数，类数，标签数）来计权重。谁大听谁的。如果都一样，听后写的为准。
2） 如果没有选中，那么权重是0。如果大家都是0，就近原则。
同一个标签，携带了多个类名，有冲突：

!important标记
1） !important提升的是一个属性，而不是一个选择器
2） !important无法提升继承的权重，该是0还是0
比如HTML结构：

<div>
    <p>哈哈哈哈哈哈哈哈</p>
</div>

有CSS样式：
div{
color:red !important;
}
p{
color:blue;
}
由于div是通过继承性来影响文字颜色的，所以!important无法提升它的权重，权重依然是0。
干不过p标签，因为p标签是实实在在选中了，所以字是蓝色的（以p为准）。
3）!important不影响就近原则
如果大家都是继承来的，按理说应该按照“就近原则”，那么important能否影响就近原则呢？
答案是：不影响。远的，永远是远的。不能给远的写一个important，干掉近的。

盒模型
盒子中的区域
width是“宽度”的意思，CSS中width指的是内容的宽度，而不是盒子的宽度。
height是“高度”的意思，CSS中height指的是内容的高度，而不是盒子的高度
padding是“内边距”的意思
border是“边框”
margin是“外边距”
标准文档流
块级元素和行内元素
1） 块级元素
● 霸占一行，不能与其他任何元素并列
● 能接受宽、高
● 如果不设置宽度，那么宽度将默认变为父亲的100%。
2） 行内元素
● 与其他行内元素并排
● 不能设置宽、高。默认的宽度，就是文字的宽度。

块级元素和行内元素的相互转换
块级元素可以设置为行内元素
行内元素可以设置为块级元素
div{
display: inline;
background-color: pink;
width: 500px;
height: 500px;
}
display是“显示模式”的意思，用来改变元素的行内、块级性质
inline就是“行内”。
一旦，给一个标签设置display: inline;
那么，这个标签将立即变为行内元素。此时它和一个span无异：
● 此时这个div不能设置宽度、高度；
● 此时这个div可以和别人并排了
span{
display: block;
width: 200px;
height: 200px;
background-color: pink;
}
“block”是“块”的意思
让标签变为块级元素。此时这个标签，和一个div无异：
● 此时这个span能够设置宽度、高度
● 此时这个span必须霸占一行了，别人无法和他并排
● 如果不设置宽度，将撑满父亲
css中一共有三种手段，使一个元素脱离标准文档流：
1） 浮动
2） 绝对定位
3） 固定定位
浮动

.box1{
    float: left;
    width: 300px;
    height: 400px;
    background-color: yellowgreen;
}
.box2{
    float: left;
    width: 400px;
               height: 400px;
    background-color: skyblue;
}

浮动的元素脱标

一个span标签不需要转成块级元素，就能够设置宽度、高度了。所以能够证明一件事儿，就是所有标签已经不区分行内、块了。也就是说，一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。
span{
float: left;
width: 200px;
height: 200px;
background-color: orange;
}
浮动的元素互相贴靠
**

永远不是一个东西单独浮动，浮动都是一起浮动，要浮动，大家都浮动。

**
一个浮动的a、span ，是不需要设置display:block; 就能够设置宽高了。因为浮动之后，脱离标准流了，所以标准流里面的法律、规则都不适用了。
浮动的性质：脱标、贴边、字围、收缩。

收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为文字的宽度（这点非常像行内元素）。

<style type="text/css">
div{
    float: left;
    background-color: gold;
    }
</style>

这个div浮动了，且没有设置宽度，那么将自动缩紧为内容的宽度：

浮动的清除
清除浮动方法1：给浮动的元素的祖先元素加高度。
如果一个元素要浮动，那么它的祖先元素一定要有高度。高度的盒子，才能关住浮动。才不会将浮动传递给给后面的元素。
只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。

清除浮动方法2：clear:both;
网页制作中，高度height很少出现。因为能被内容撑高！

<div>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
        <li>HTML5</li>
        <li>设计模式</li>
    </ul>
</div>

<div class="box2">  → 这个div写一个clear:both;属性 
    <ul>
        <li>学习方法</li>
        <li>英语水平</li>
        <li>面试技巧</li>
    </ul>
</div>

clear:both;
clear就是清除，both指的是左浮动、右浮动都要清除。意思就是：清除别人对我的影响。
这种方法有一个非常大的、致命的问题，margin失效了。

清除浮动方法3：隔墙法

<div>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
        <li>HTML5</li>
        <li>设计模式</li>
    </ul>
</div>
<div class="cl h16"></div>
<div class="box2">  → 这个div写一个clear:both;属性 
    <ul>
        <li>学习方法</li>
        <li>英语水平</li>
        <li>面试技巧</li>
    </ul>
</div>

.cl{
clear: both;
}
.h16{
height: 16px;
}

清除浮动方法4：内墙法
内墙法的优点就是，不仅仅能够让后部分的p不去追前部分的p了，并且能把第一个div撑出高度。这样，这个div的背景、边框就能够根据p的高度来撑开了。

<div class="box1">
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
        <li>HTML5</li>
        <li>设计模式</li>
    </ul>

    <div class="cl h16"></div>
</div>

<div class="box2">
    <ul>
        <li>学习方法</li>
        <li>英语水平</li>
        <li>面试技巧</li>
    </ul>
</div>

.cl{
    clear: both;
}
.h16{
    height: 16px;
}

清除浮动方法4：overflow:hidden;
一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden; 那么，父亲就能被儿子撑出高了。

<div class="box1">
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
        <li>HTML5</li>
        <li>设计模式</li>
    </ul>
</div>

<div class="box2">
    <ul>
        <li>学习方法</li>
        <li>英语水平</li>
        <li>面试技巧</li>
    </ul>
</div>

.box1{
    overflow: hidden;
    _zoom:1;
    margin-bottom: 10px;
}

margin
盒子居中margin:0 auto;
注意：
1） 使用margin:0 auto; 的盒子，必须有width，有明确的width
2） 只有标准流的盒子，才能使用margin:0 auto; 居中。
也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0 auto;
3） margin:0 auto;是在居中盒子，不是居中文本。
文本的居中，要使用text-align:center;

margin:0 auto; → 让这个div自己在大容器中居中。
text-align: center; → 让这个div内部的文本居中。

善于使用父亲的padding，而不是儿子的margin
margin这个属性，本质上描述的是兄弟和兄弟之间的距离； 最好不要用这个marign表达父子之间的距离。

background-position:100px 200px;
背景图在盒子中右边移动100px，向下移动200px。
可以是负数，background-position:-100px -200px;
向左边100px，向上边200px。
英语单词来表示
background-position:right bottom; 右下角
background-position:center bottom; 下边居中
background-attachment
背景固定
background-attachment:fixed;

background:url(images/1.jpg) no-repeat -100px -100px;

定位有三种，分别是相对定位、绝对定位、固定定位。
相对定位
让元素相对自己原来的位置，进行位置调整。
也就是说，如果一个盒子想进行位置调整，那么就要使用相对定位
position:relative; → 必须先声明，自己要相对定位了，
left:100px; → 然后进行调整。
top:150px; → 然后进行调整。

相对定位的定位值
可以用left、right来描述盒子右、左的移动；
可以用top、bottom来描述盒子的下、上的移动。
↘：
position: relative;
top: 10px;
left: 40px;
↙：
position: relative;
right: 100px; → 往左边移动
top: 100px;
↖：
position: relative;
right: 100px;
bottom: 100px; → 移动方向是向上。
↗：
position: relative;
top: -200px; → 负数就是相反的方向，如果是正，就是下边，如果是负数就是上边
right: -200px;
↗：
position: relative;
right: -300px;
bottom: 300px;
完全等价于：
position: relative;
left: 300px;
bottom: 300px;
绝对定位
绝对定位的盒子，是脱离标准文档流的。所以，所有的标准文档流的性质，绝对定位之后都不遵守了。
绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要display:block;就可以设置宽、高了：
参考点
绝对定位的参考点，如果用top描述，那么定位参考点就是页面的左上角，而不是浏览器的左上角：

如果用bottom描述，那么就是浏览器首屏窗口尺寸，对应的页面的左下角：

以盒子为参考点
一个绝对定位的元素，如果父辈元素中出现了也定位了的元素，那么将以父辈这个元素，为参考点。
要听最近的已经定位的祖先元素的，不一定是父亲，可能是爷爷：

<div class="box1">   →  相对定位
        <div class="box2">  →  没有定位
        <p></p>   → 绝对定位，将以box1为参考，因为box2没有定位，box1就是最近的父辈元素
</div>

</div>
    <div class="box1">   →  相对定位
        <div class="box2">  → 相对定位
        <p></p>   → 绝对定位，将以box2为参考，因为box2是自己最近的父辈元素
    </div>
</div>

不一定是相对定位，任何定位，都可以作为参考点

<div>  → 绝对定位
        <p></p>  → 绝对定位，将以div作为参考点。因为父亲定位了。
</div>

子绝父绝、子绝父相、子绝父固，都是可以给儿子定位的。但是，工程上子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途。工程上，“子绝父相”有意义，父亲没有脱标，儿子脱标在父亲的范围里面移动。

<div class=”box1”>  → 绝对定位
    <div class=”box2”>  → 相对定位
        <div class=”box3”>  → 没有定位
            <p></p>  → 绝对定位，以box2为参考定位。
        </div>
    </div>
</div>

绝对定位的儿子，无视参考的那个盒子的padding。
下图中，绿色部分是div的padding，蓝色部分是div的内容区域。那么此时，div相对定位，p绝对定位。
p将无视父亲的padding，在border内侧为参考点，进行定位：

绝对定位的盒子居中
绝对定位之后，所有标准流的规则，都不适用了。所以margin:0 auto;失效。

width: 600px;
height: 60px;
position: absolute;
left: 50%;
top: 0;
margin-left: -300px; → 宽度的一半
//margin-left:负的宽度的一半。
固定定位
固定定位，就是相对浏览器窗口定位。页面如何滚动，这个盒子显示的位置不变。
固定定位脱标！
z-index
● z-index值表示谁压着谁。数值大的压盖住数值小的。
● 只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的东西不能用。
● z-index值没有单位，就是一个正整数。默认的z-index值是0。
● 如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。
● 从父现象：父亲怂了，儿子再牛逼也没用。

没有单位：
1z-index: 988;