前端CSS技术全解（二）

欢迎转载，转载请标明出处：
http://blog.csdn.net/johnny901114/article/details/52813761
本文出自:【余志强的博客】

一、CSS三大特性

1）继承性

作用: 给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性
如下面样式会为p设置样式，因为p标签被div包含：

 <style> div{ color: red; } </style>
<div>
    <ul>
        <li>
            <p>我是段落</p>
        </li>
    </ul>
</div>
<!--p会变成红色-->

注意点:
并不是所有的属性都可以继承, 只有以color、font-、text-、line-开头的属性才可以继承
在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承
继承性中的特殊性
a标签的文字颜色和下划线是不能继承的
h标签的文字大小是不能继承的

<style> div{ color: red; text-decoration: none; font-size: 30px; } </style>
<div>
    <a href="#">我是超链接</a>
</div>
<div>
    <h1>我是大标题</h1>
</div>
<!--a的颜色和下划线不会发生变化, H的字体大小不对 -->

应用场景:
一般用于设置网页上的一些共性信息, 例如网页的文字颜色, 字体,文字大小等内容

body{ font-size: 30px; font-family: "微软雅黑" color: #666; }

2）层叠性

CSS全称 Cascading StyleSheet (层叠式样式表), 其中的层叠就是指层叠性
作用: 层叠性就是CSS处理冲突的一种能力
示例代码

<style> p{ color: red; } .para{ color: blue; } </style>
<p id="identity" class="para">我是段落</p>
<!-- 最终显示蓝色, 就算把.param和p的样式的位置调换，还是现实蓝色的，因为class优先级大于标签 -->

注意点:
层叠性只有在多个选择器选中”同一个标签”, 然后又设置了”相同的属性”, 才会发生层叠性

3）优先级

作用:当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定
优先级判断的三种方式

间接选中就是指继承

如果是间接选中, 那么就是谁离目标标签比较近就听谁的

<style> li{ color: blue; } ul{ color: red; } </style>
<ul>
    <li>
        <p id="identity" class="para">我是段落</p>
    </li>
</ul>
<!-- 最终显示蓝色 -->

相同选择器(直接选中)

如果都是直接选中, 并且都是同类型的选择器, 那么就是谁写在后面就听谁的

<style> p{ color: blue; } p{ color: red; } </style>
<ul>
    <li>
        <p id="identity" class="para">我是段落</p>
    </li>
</ul>
<!-- 最终显示红色 -->

不同选择器(直接选中)

如果都是直接选中, 并且不是相同类型的选择器, 那么就会按照选择器的优先级来层叠
id > 类 > 标签 > 通配符 > 继承 > 浏览器默认

<style> #identity{ color: purple; } .para{ color: pink; } p{ color: green; } *{ color: blue; } li{ color: red; } </style>
<ul>
    <li>
        <p id="identity" class="para">我是段落</p>
    </li>
</ul>
<!-- 最终显示紫色 -->

注意点:
通配符选择器也是直接选中

4）优先级权重

作用: 当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高
权重的计算规则

• 首先先计算选择器中有多少个id, id多的选择器优先级最高
• 如果id的个数一样, 那么再看类名的个数, 类名个数多的优先级最高
• 如果类名的个数一样, 那么再看标签名称的个数, 标签名称个数多的优先级最高
• 如果id个数一样, 类名个数也一样, 标签名称个数也一样, 那么就不会继续往下计算了, 那么此时谁写在后面听谁的

示例代码

<style> #identity1 .box2{ color: red; } .box1 .box2{ color: green; } div ul li p{ color: blue; } </style>
<div id="identity1" class="box1">
    <ul>
        <li>
            <p id="identity2" class="box2">我是段落</p>
        </li>
    </ul>
</div>
<!-- id多最终显示红色 -->

<style> .box1 .box2{ color: blue; } div .box2{ color: green; } </style>
<div id="identity1" class="box1">
    <ul>
        <li>
            <p id="identity2" class="box2">我是段落</p>
        </li>
    </ul>
</div>
<!-- id一样, 比类多, 最终显示蓝色 -->


<style> #identity1 ul li p{ color: red; } #identity1 ul p{ color: green; } </style>
<div id="identity1" class="box1">
    <ul>
        <li>
            <p id="identity2" class="box2">我是段落</p>
        </li>
    </ul>
</div>
<!-- id一样, 类一样, 比标签多最终显示红色 -->
<style> .box1 li #identity2{ color: blue; } #identity1 ul .box2{ color: red; } </style>
<div id="identity1" class="box1">
    <ul>
        <li>
            <p id="identity2" class="box2">我是段落</p>
        </li>
    </ul>
</div>
<!-- id一样, 类一样, 标签一样, 最终显示红色 -->

注意点:
只有选择器是直接选中标签的才需要计算权重, 否则一定会听直接选中的选择器的

!important

作用: 用于提升某个直接选中标签的选择器中的某个属性的优先级的, 可以将被指定的属性的优先级提升为最高
示例代码

<style> #identity{ color: purple; font-size: 50px; } .para{ color: pink ; } p{ color: green !important; } </style>
<ul>
    <li>
        <p id="identity" class="para">我是段落</p>
    </li>
</ul>
<!-- 最终显示绿色 -->

注意点:
!important只能用于直接选中, 不能用于间接选中
通配符选择器选中的标签也是直接选中的
!important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升
!important必须写在属性值得分号前面
!important前面的感叹号不能省略

二、元素显示模式

Div和Span标签

1）什么是div?

作用: 一般用于配合css完成网页的基本布局

<style> .header{ width: 980px; height: 100px; background: red; margin: auto; margin-bottom: 10px; } .content{ width: 980px; height: 500px; background: green; margin: auto; margin-bottom: 10px; } .footer{ width: 980px; height: 100px; background: blue; margin: auto; } .logo{ width: 200px; height: 50px; background: pink; float: left; margin: 20px; } .nav{ width: 600px; height: 50px; background: yellow; float: right; margin: 20px; } .aside{ width: 250px; height: 460px; background: purple; float: left; margin: 20px; } .article{ width: 650px; height: 460px; background: deepskyblue; float: right; margin: 20px; } </style>
<div class="header">
    <div class="logo"></div>
    <div class="nav"></div>
</div>
<div class="content">
    <div class="aside"></div>
    <div class="article"></div>
</div>
<div class="footer"></div>

2）什么是span?

作用: 一般用于配合css修改网页中的一些局部信息

<style> span{ color: red; } </style>
<p>努力到<span>无能为力</span>, 拼搏到<span>感动自己</span></p>

3）div和span有什么区别?

1.div会单独的占领一行,而span不会单独占领一行
2.div是一个容器级的标签, 而span是一个文本级的标签
容器级的标签和文本级的标签的区别?

容器级的标签中可以嵌套其它所有的标签
常见容器级的标签: div h ul ol dl li dt dd …
文本级的标签中只能嵌套文字/图片/超链接
常见文本级的标签:span p buis strong em ins del …
注意点:
不用刻意去记忆哪些标签是文本级的哪些标签是容器级, 在企业开发中一般情况下要嵌套都是嵌套在div中, 或者按照组标签来嵌套(ul>li, ol>li , dl>dt+dd)

4）CSS元素显示模式

在HTML中HTML将所有的标签分为两类, 分别是 容器级 和 文本级
在CSS中CSS也将所有的标签分为两类, 分别是 块级元素 和 行内元素(其实还有一类, 行内块级)

块级元素会独占一行
行内元素不会独占一行
常见容器级的标签: div h ul ol dl li dt dd …

常见文本级的标签:span p buis stong em ins del …
常见块级元素: p div h ul ol dl li dt dd
常见行内元素: span buis strong em ins del

块级元素和行内元素的区别?

• 块级元素，独占一行，如果没有设置宽度, 那么默认和父元素一样宽，如果设置了宽高, 那么就按照设置的来显示
• 行内元素，不会独占一行，如果没有设置宽度, 那么默认和内容一样宽，行内元素是不可以设置宽度和高度的
• 行内块级元素，为了能够让元素既能够不独占一行, 又可以设置宽度和高度, 那么就出现了行内块级元素，不独占一行, 并且可以设置宽高

5）CSS元素显示模式转换

如何转换CSS元素的显示模式?
设置元素的display属性
display取值 ：block块级 、inline行内、inline-block行内块级

三、背景相关属性

1）背景颜色

如何设置标签的背景颜色?
在CSS中可以通过background-color属性设置标签的背景颜色
取值:具体单词、rgb、rgba、十六进制
格式:

<style> div{ width: 100px; height: 50px; } .box1{ background-color: red; } .box2{ background-color: rgb(0,255,0); } .box3{ background-color: rgba(0,0,255,0.7); } .box4{ background-color: #0ff; } </style>

2）背景图片

如何设置背景图片?
在CSS可以通过background-image: url();设置背景图片
格式:

<style> div{ width: 500px; height: 500px; } .box1{ background-image: url(images/girl.jpg); /*background-image: url(http://img4.imgtn.bdimg.com/it/u=2278032206,4196312526&fm=21&gp=0.jpg);*/ } </style>
<div class="box1"></div>

注意点:
图片的地址必须放在url()中, 图片的地址可以是本地的地址, 也可以是网络的地址
如果图片的大小没有标签的大小大, 那么会自动在水平和垂直方向平铺来填充
如果网页上出现了图片, 那么浏览器会再次发送请求获取图片

3）背景平铺

如何控制背景图片的平铺方式?
在CSS中可以通过background-repeat属性控制背景图片的平铺方式的
取值:
repeat 默认, 在水平和垂直都需要平铺
no-repeat 在水平和垂直都不需要平铺
repeat-x 只在水平方向平铺
repeat-y 只在垂直方向平铺

格式:

<style> /* div{ width: 500px; height: 500px; } .box1{ background-color: red; background-image: url(images/girl.jpg); background-repeat: repeat-y; } </style>
<div class="box1"></div>

4）背景定位

如何控制背景图片的位置?
在CSS中有一个叫做background-position属性, 就是专门用于控制背景图片的位置

格式:
background-position: 水平方向 垂直方向;

取值:
具体的方位名词
水平方向: left center right
垂直方向: top center bottom

<style> div{ /*width: 500px;*/ height: 500px; } .box1{ background-color: red; background-image: url(images/girl.jpg); background-repeat: no-repeat; /*background-position: left top;*/ /*background-position: right top;*/ /*background-position: right bottom;*/ /*background-position: left bottom;*/ /*background-position: center center;*/ /*background-position: left center;*/ background-position: center top; } </style>
<div class="box1"></div>

具体的像素
例如: background-position: 100px 200px;
记住一定要写单位, 也就是一定要写px
记住具体的像素是可以接收负数的

<style> div{ /*width: 500px;*/ height: 500px; } .box1{ background-color: red; background-image: url(images/girl.jpg); background-repeat: no-repeat; /*background-position: 100px 0;*/ /*background-position: 100px 200px;*/ background-position: -100px -100px; } </style>

应用场景:
当图片比较大的时候, 可以通过定位属性保证图片永远居中显示

5）背景属性连写

和font属性一样, background属性也可以连写

背景属性缩写的格式
background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;
注意点：

• background属性中， 任何一个属性都可以被省略

6）背景关联

默认情况下背景图片会随着滚动条的滚动而滚动， 如果不想让背景图片随着滚动条的滚动而滚动， 那么我们就可以修改背景图片和滚动条的关联方式

如何修改背景关联方式？
在CSS中有一个叫做background-attachment的属性， 这个属性就是专门用于修改关联方式的
格式
background-attachment：scroll;

取值：

• scroll 默认值， 会随着滚动条的滚动而滚动
• fixed 不会随着滚动条的滚动而滚动

7）插入图片和背景图片的区别

区别1

• 背景图片仅仅是一个装饰, 不会占用位置
• 插入图片会占用位置

区别2

• 背景图片有定位属性, 所以可以很方便的控制图片的位置
• 插入图片没有定位属性, 所有控制图片的位置不太方便

区别3

• 插入图片的语义比背景图片的语义要强, 所以在企业开发中如果你的图片想被搜索引擎收录, 那么推荐使用插入图片

四、css精灵

CSS精灵图是一种图像合成技术, 全称CSS Sprite

CSS精灵图作用

• 可以减少请求的次数, 以及可以降低服务器处理压力
• 如何使用CSS精灵图

CSS的精灵图需要配合背景图片和背景定位来使用
示例

    <style> .box{ width: 86px; height: 28px; background-image: url(images/weibo.png); background-position: -425px -200px; } </style>
    <div class="box"></div>

五、盒模型

1）边框属性

什么边框?
边框就是环绕在标签宽度和高度周围的线条
边框属性的格式

连写(同时设置四条边)

border: 边框的宽度 边框的样式 边框的颜色;
示例代码

<style> .box{ width: 100px; height: 100px; background-color: red; border: 5px solid blue; /*border: 5px solid;*/ /*border: 5px blue;*/ /*border: solid blue;*/ } </style>

注意点:

• 连写格式中颜色属性可以省略, 省略之后默认就是黑色
• 连写格式中样式不能省略, 省略之后就看不到边框了
• 连写格式中宽度可以省略, 省略之后还是可以看到边框
• 按方向连写(分别设置四条边)

border-top: 边框的宽度 边框的样式 边框的颜色;
border-right: 边框的宽度 边框的样式 边框的颜色;
border-bottom: 边框的宽度 边框的样式 边框的颜色;
border-left: 边框的宽度 边框的样式 边框的颜色;
示例代码

<style> .box{ width: 100px; height: 100px; background-color: red; border-top:5px solid blue; border-right:10px dashed green; border-bottom:15px dotted purple; border-left:20px double pink; } </style>

按要素连写(分别设置四条边)

border-width: 上 右 下 左;
border-style: 上 右 下 左;
border-color: 上 右 下 左;
示例代码

<style> .box{ width: 500px; height: 500px; background-color: red; border-width: 5px 10px 15px 20px; border-style: solid dashed dotted double; border-color: blue green purple pink; /*border-color: blue green purple;*/ /*border-color: blue green;*/ /*border-color: blue;*/ } </style>

注意点:
这三个属性的取值是按照顺时针来赋值, 也就是按照上右下左来赋值, 而不是按照日常生活中的上下左右
这三个属性的取值省略时的规律
上 右 下 左 > 上 右 下 > 左边的取值和右边的一样
上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样
上 右 下 左 > 上 > 右下左边取值和上边一样

非连写(方向+要素)

border-top-width: ;
border-top-style:;
border-top-color:;
border-right-width:;
border-right-style:;
border-right-color:;
border-bottom-width:;
border-bottom-style: ;
border-bottom-color:;
border-left-width:;
border-left-style:;
border-left-color:;

<style> .box{ width: 500px; height: 500px; background-color: red; border-top-width: 5px; border-top-style: solid; border-top-color: blue; border-right-width: 10px; border-right-style: dashed; border-right-color: green; border-bottom-width: 15px; border-bottom-style: dotted; border-bottom-color: purple; border-left-width: 20px; border-left-style: double; border-left-color: pink; } </style>

注意点:
同一个选择器中如果设置了多个边框属性, 后面的会覆盖前面的

.box3{ border: 5px solid red; border-right:5px dashed red; }

2）内边距属性

什么是内边距?
边框和内容之间的距离就是内边距

格式
单独设置四条边

padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;

示例代码

<style> div{ width: 98px; height: 90px; border: 1px solid #000; background-color: red; } .box1{ padding-top: 20px; padding-right:40px; padding-bottom:80px; padding-left:160px; } </style>

同时设置四条边
padding: 上 右 下 左;
示例代码

<style> div{ width: 98px; height: 90px; border: 1px solid #000; background-color: red; } .box1{ /*padding:20px 40px 80px 160px;*/ /*padding:20px 40px 80px;*/ /*padding:20px 40px;*/ padding:20px; } </style>

注意点:

• 这三个属性的取值省略时的规律
• 上 右 下 左 > 上 右 下 > 左边的取值和右边的一样
• 上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样
• 上 右 下 左 > 上 > 右下左边取值和上边一样
• 给标签设置内边距之后, 标签占有的宽度和高度会发生变化
• 给标签设置内边距之后, 内边距也会有背景颜色

3）外边距属性

什么是外边距?
标签和标签之间的距离就是外边距
格式
单独设置四条边

margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;

示例代码

<style> .box1{ margin-top:20px; margin-right:40px; margin-bottom:80px; margin-left:160px; } </style>

同时设置四条边
margin: 上 右 下 左;
示例代码

<style> .box1{ margin:20px 40px 80px 160px; /*margin:20px 40px 80px;*/ /*margin:20px 40px;*/ /*margin:20px;*/ } </style>

注意点:

• 这三个属性的取值省略时的规律
• 上 右 下 左 > 上 右 下 > 左边的取值和右边的一样
• 上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样
• 上 右 下 左 > 上 > 右下左边取值和上边一样
• 外边距的那一部分是没有背景颜色的
• 外边距合并现象 , 默认布局的垂直方向上外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的
  示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>外边距合并现象</title>
  <style> span{ display: inline-block; width: 100px; height: 100px; border: 1px solid #000; } div{ height: 100px; border: 1px solid #000; } .hezi1{ margin-right:50px; } .hezi2{ margin-left:100px; } .box1{ margin-bottom:50px; } .box2{ margin-top:100px; } </style>
</head>
<body>
<span class="hezi1">我是span</span><span class="hezi2">我是span</span>
<div class="box1">我是div</div>
<div class="box2">我是div</div>
</body>
</html>

margin-top问题

如果两个盒子是嵌套关系, 那么设置了里面一个盒子顶部的外边距, 外面一个盒子也会被顶下来
如果外面的盒子不想被一起定下来,那么可以给外面的盒子添加一个边框属性
在企业开发中, 一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑padding, 其次再考虑margin(margin本质上是用于控制兄弟关系之间的间隙的)
示例代码

<style> .big{ width: 500px; height: 500px; background-color: red; /*不设置边框, big也会被small的顶部外边距顶下去*/ border: 5px solid #000; } .small{ width: 200px; height: 200px; background-color: blue; margin-top:150px; margin-left:150px; } </style>

text-align:center;和margin:0 auto;区别

text-align: center; 是设置盒子中存储的文字/图片水平居中
margin:0 auto;是让盒子自己水平居中
示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>53-盒子居中和内容居中</title>
    <style> .father{ width: 800px; height: 500px; background-color: red; /*文字图片会居中*/ /*text-align: center;*/ /*盒子自身会居中*/ margin:0 auto; } .son{ width: 100px; height: 100px; background-color: blue; } </style>
</head>
<body>
<div class="father">
    我是文字<br/>
    <img src="images/girl.jpg" alt="">
    <div class="son"></div>
</div>
</body>
</html>

4）盒模型

什么是CSS盒模型?

• CSS盒模型仅仅是一个形象的比喻, HTML中的标签都是盒模型
• CSS盒模型指那些可以设置宽度高度/内边距/边框/外边距的标签
• 这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以HTML标签又叫做盒模型

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>48-CSS盒子模型</title>
    <style> span,a,b,strong{ display: inline-block; width: 100px; height: 100px; border: 6px solid #000; padding: 20px; margin: 20px; } </style>
</head>
<body>
<span>我是span</span>
<a href="#">我是超链接</a>
<b>我是加粗</b>
<strong>我是强调</strong>
</body>
</html>

盒模型宽度和高度
内容的宽度和高度
就是通过width/height属性设置的宽度和高度

元素的宽度和高度
宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框
高度 同理可证

规律
增加了padding/border之后元素的宽高也会发生变化
如果增加了padding/border之后还想保持元素的宽高, 那么就必须减去内容的宽高

元素空间的宽度和高度
宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距
高度 同理可证

box-sizing属性
CSS3中新增了一个box-sizing属性, 这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变

box-sizing取值

content-box
元素的宽高 = 边框 + 内边距 + 内容宽高

border-box
元素的宽高 = width/height的宽高
增加padding和border之后要想保证盒子元素的宽高不变, 系统会自动减去一部分内容的宽度和高度

示例代码

<!--增加padding/border之后元素宽高会变大-->
<style> .box1{ width: 200px; height: 200px; background-color: blue; float: right; border: 20px solid #000; padding: 20px; } </style>
<!--增加padding/border之后元素宽不会变大-->
<style> .box1{ box-sizing: border-box; width: 200px; height: 200px; background-color: blue; float: right; border: 20px solid #000; padding: 20px; } </style>

本文主要来自小码哥 南哥老师
http://bbs.520it.com/forum.php?mod=viewthread&tid=2418