超全的css新手学习笔记

来源：互联网发布：ubuntu 开启端口编辑：程序博客网时间：2024/06/06 16:25

1.CSS三大特性

继承性、层叠性、优先级

继承性：子元素可以继承父元素的样式。

什么样的属性才可以继承：

color，以text-,font-,line-开头的属性都是可以继承的

这些关于文字样式的，都能继承；而所有关于盒子、定位、布局的属性都不能继承。

具体应用：在写页面之前我们会通过给body设置一个字体，来将页面上所有的标签都能够继承这个属性。

特殊性：

a标签的颜色不能继承，如果一定要修改a标签的颜色直接作用在a标签上面。
h标签的大小不能继承，如果一定要修改h标签的大小直接作用在h标签上面。

层叠性：是浏览器处理冲突的一个特性。

如果一个属性通过两个选择器设置到同一个元素上面，那么这个时候一个属性就会将另一个属性层叠掉。
如果多个不同的属性通过两个选择器设置到一个元素上面，那么不会发生层叠。

优先级

！important>行内样式>id选择器>类选择器>标签选择器>通配符>继承

变数：!important

虽然important是一个变数，但是不能作用在继承上。!important属性无法继承。

关于important：

正确的：

1 font-size:60px !important;

错误的：

1 font-size:60px; !important; → 不能把!important写在外面

2 font-size:60px important; → 不能忘记感叹号

!important需要强调3点：

1） !important提升的是一个属性，而不是一个选择器

1 p{

2 color:red !important; → 只写了这一个!important，所以就字体颜色属性提升权重

3 font-size: 100px ; → 这条属性没有写!important，所以没有提升权重

4 }

5 #para1{

6 color:blue;

7 font-size: 50px;

8 }

所以，综合来看，字体颜色是red（听important的）；字号是50px（听id的）;

2） !important无法提升继承的权重，该是0还是0

比如HTML结构：

1 <div>

2 <p>哈哈哈哈哈哈哈哈</p>

3 </div>

有CSS样式：

1 div{

2 color:red !important;

3 }

4 p{

5 color:blue;

6 }

由于div是通过继承性来影响文字颜色的，所以!important无法提升它的权重，权重依然是0。干不过p标签，因为p标签是实实在在选中了，所以字是蓝色的（以p为准）。

3）!important不影响就近原则

如果大家都是继承来的，按理说应该按照“就近原则”，那么important能否影响就近原则呢？

答案是：不影响。远的，永远是远的。不能给远的写一个important，干掉近的。

! important做站的时候，不允许使用。因为会让css写的很乱。

权重：

行内样式：1000
id：100
class：10
标签：1

选择器的一个工作原理：

选择器在查找元素的时候不是从左往右找，而是从右往左找！

例一：

#father p.c2{

color:black;

}/*找到一个p标签标签的类名叫c2,判断这个标签是否有一个父元素叫father*/

例二：

divdiv{ /*找到一个元素div,判断它的父元素是否是div*/

color:blue;

}/*从右往左找*/

div{color:red;}

</style>

<div>文字（红色）

<div>文字（蓝色）

<div>试问这行字体是什么颜色的？（蓝色）</div>

</div>

例三：

span{

color:green;

}

.nav{

color:red;

}

.navul li{

color:blue;

}

</style>

<ul>

</ul>

</div>

例四：同一个标签携带多个类名有冲突

总结：在开始算权重之前，一定要看看是不是真的选中文字所在的最内层标签，如果不是那么最内层标签权重为0！如果大家都为0，就近原则！

2.属性—文本

Ø text-indent:2em; 设置首行缩进。

Ø text-align: 设置文本的位置

center:设置内容在容器的水平方向上居中。

left:设置内容在窗口的水平方向上靠左

right:设置内容在容器的水平方向上靠右

Ø text-decoration: 设置文本的装饰

none:没有任何装饰

underline:下划线

Ø margin: 0 auto; 设置容器自身水平居中。

Ø 加粗、倾斜、下划线

1 font-weight:bold;

2 font-style:italic;

3 text-decoration:underline;

3.属性—背景

Ø background-color: 设置背景颜色

Ø background-image: 设置背景图片

background-image:url(图片的路径);

默认情况下图片如果比容器要小，它会平铺满盒子。并且padding区域有背景图

Ø background-repeat: 设置背景是否平铺：

no-repeat:不平铺

repeat-x：在水平方向上平铺

repeat-y:在垂直方向上平铺

repeat:平铺

Ø background-position: 设置背景图片的位置

Ø background-attachment:fixed; 设置背景否固定

fixed：背景会被固定住，即不会被滚动条滚走

Ø background-postion: x y;

注意：x,y可以是具体的数值，也可以是一些英文单词。

x轴（水平方向）: left 左 center 中 right 右

y轴（垂直方向）: top 上 center 中 bottom下

定位属性可以是负数：

þ 背景的连写方式：

background: background-color background-image background-repeatbackground-position;

比如：background:blue url(images/wuyifan.jpg) no-repeat 100px 100px;

4.元素与元素之间的嵌套

1.行内元素

代表标签：a,span,b,u,i,s,strong,em,ins,del

特点：

² 一行里面可以显示多个

² 无法设置宽高

² 大小由内容来决定

缺点：

² 不能设置宽高

² 属性：display: inline

2.块级元素

代表标签：p,h1-h6,div,ul,li,ol,li,dl,dt,dd

特点：

² 独占一行

² 可以设置宽高

² 默认宽度一整行

缺点：

² 独占一行。

² 属性： display:block

3.行内块级元素

代表标签：img,input

特点：

² 可以设置宽高

² 一行内可显示多个

² 属性：display:inline-block

R 元素之间显示方式切换：修改display属性！

比如：想设置块级元素在同一行显示，可以设置display: inline。

² 行内块元素与行内块元素之间有间隙，为了让他们之间紧挨着，可是给他们都添加浮动：float：left

4.元素之间的嵌套

标签之间是不能够随意嵌套的。

如果一定要嵌套，要满足下面几条：

行内元素只能包含行内元素
块级元素可以包含所有的行内元素和部分块级元素。
p标签，h标签都不能包含块级元素

5.伪类

1.锚伪类：

Ø a:link 给a标签设置没有被访问过的样式

Ø a:visited 给a标签设置被访问过的样式

Ø a:hover 给a标签设置鼠标悬停时的样式

Ø a:active 给a标签设置被点击的样式

代码：

a: link {

color: red;

font-size: 30px;

}

注意：

在使用的时候一定遵守这样的顺序：a:link,a:visited,a:hover,a:active，否则会失效！
记忆方法：爱恨原则：love-hate
有些锚伪类除了可以作用在a标签上还可以作用来其它标签上：

:link 只能用于a标签

:visited只能用于a标签

:hover 其它标签也可以使用这个伪类

:active 其它标签也可以使用这个伪类

超链接的美化

a标签在使用的时候，非常的难。因为不仅仅要控制a这个盒子，也要控制它的伪类。

我们一定要将a标签写在前面，:link、:visited、:hover、:active这些伪类写在后面。

a标签中，描述盒子；伪类中描述文字的样式、背景

1 .nav ul li a{

2 display: block;这里必须设成块级！

3 width: 120px;

4 height: 40px;

5 }

6 .nav ul li a:link ,.nav ul li a:visited{

7 text-decoration: none;

8 background-color: yellowgreen;

9 color:white;

10 }

11 .nav ul li a:hover{

12 background-color: purple;

13 font-weight: bold;

14 color:yellow;

15 }

记住，所有的a不继承text、font这些东西。因为a自己有一个伪类的权重。

最标准的，就是把link、visited、hover都要写。但是前端开发工程师在大量的实践中，发现不写link、visited浏览器也挺兼容。所以这些“老油条”们，就把a标签简化了：

a:link、a:visited都是可以省略的，简写在a标签里面。也就是说，a标签涵盖了link、visited的状态。

1 .nav ul li a{

2 display: block;

3 width: 120px;

4 height: 50px;

5 text-decoration: none;

6 background-color: purple;

7 color:white;

8 }

9 .nav ul li a:hover{

10 background-color: orange;

11 }

6.行高：line-height

定义：两行文本之间基线的距离就是做行高。

Ø 默认情况下一行文本的行高分为：上间距+文本的高度+下间距，并且上间距是等于下间距的。所以如果行高等于容器的高度那么元素在父容器中垂直居中！

Ø 行高是可以继承的。

Ø 行高的单位：

a.具体的像素值

b.使用em：em指的是当前标签设置的字体大小。如果当前标签字体大小为16px，那么2em=32px，如果当前标签字体大小为20px，那么3em=60px;

c.使用%百分号：与em一样，如果当前字体大小为18px，那么 line-height:200%=36px;

d.可以什么单位都不带：与em一样，也是当前标签的字体大小为基数。

注意：

在设置行高的时候，如果单位是em或%，将来行高会先计算出来结果再继承给子元素。

在设置行高的时候，如果单位是没有，将来行高会先继承给子元素再计算出行高。

Ø 浏览器的默认字体大小是多小？谷歌默认大小是16px.

font属性

font连写：font: font-style font-weight font-size/line-heightfont-family

为了防止用户电脑里面，没有微软雅黑这个字体。就要用英语的逗号，隔开备选字体，就是说如果用户电脑里面，没有安装微软雅黑字体，那么就是宋体：

1 font-family: "微软雅黑","宋体";

备选字体可以有无数个，用逗号隔开。

我们要将英语字体，放在最前面，这样所有的中文，就不能匹配英语字体，就自动的变为后面的中文字体：

1 font-family: "Times New Roman","微软雅黑","宋体";

所有的中文字体，都有英语别名，我们也要知道：

微软雅黑的英语别名：

1 font-family: "Microsoft YaHei";

宋体的英语别名：

2 font-family: "SimSun";

font属性能够将font-size、line-height、font-family合三为一：

2 font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";

7.盒子模型

在写一个html页面的时候，其实就相当于在这个页面中叠盒子！

思想：万物皆盒子。

具体内容：

盒子的挡板---------border

盒子的泡沫---------padding

盒子中的物品--------内容：width、height

盒子与盒子之间的距离---------margin

1.border

１.1 border-color:边框的颜色

border-top-color

border-right-color

border-bottom-color

border-left-color

１.2 border-width:边框的宽度

border-top-width

border-right-width

border-bottom-width

border-left-width

１.3 border-style:边框的样式

border-top-style

border-right-style

border-bottom-style

border-left-style

取值：solid：实线 dashed：虚线 dotted：点线

１.4 边框的连写方法：border:border-width border-style border-color;

１.5 去掉单元格之间的间隙border-collapse: collapse;

2.padding

作用：设置盒子的内容与边框之间的距离。

取值：

padding: 40px;给上右下左所有的内边距都设置了40像素的距离

padding: 40px 80px;给上下内边距设置了40像素，下左右边距设置了80像素

padding: 40px 60px 80px;给上边距设置了40像素，左右设置60像素，下设置80像素

padding: 40px 60px 80px 100px;以顺时针方向进行设置，依次为上右下左

padding-top padding-right padding-bottom padding-lef

注意：

小属性层叠大属性，不要把小属性写在大属性上面，会被大属性层叠

1 padding: 20px;

2 padding-left: 30px;

这种写法是错误的

3 padding-left: 30px;

4 padding: 20px;

padding（盒子中的填充物）会改变盒子的大小（跟日常生活中有区别），特殊情况下padding不会改变盒子的大小：

当一个大盒子包含一个小盒子，并且大小盒子都是块级元素，而且小盒子的宽是继承自大盒子的话，那么设置小盒子的padding-left和padding-right不会改变小盒子的大小。

小盒子的宽度会继承自大盒子，但是小盒子的高度不会继承自大盒子！

<style>

.father{

background:red;

width:500px;

height:300px;

}

.son{

background:blue;

height:150px;

padding-left:10px;

}

</style>

<divclass="son">追命</div>

</div>

3.margin

作用：设置盒子与盒子之间的距离。

取值：

margin: 10px;给上右下左所有的外边距都设置了10像素的距离。

margin: 10px 20px;给上下外边距设置了10像素，左右外边距设置了20像素

margin: 10 px 20px 40px;上10px，左右20px，下40

margin:10px 20px 40px 80px;上10，右20，下40，左80

maring-top margin-right margin-bottom margin-left

þ 注意：很多标签默认带有margin和padding，所以将来进行页面的布局的时候一定要清除这些标签的默认的margin和padding.

例如：

1)body标签默认带有margin: 8px的属性

2)p标签默认带有margin: font-size 0;

3)h标签也默认带有margin-top和margin-bottom

4)ul默认带有上下的margin以及左边的padding

......

清除的方法：

* {

margin: 0;

padding: 0;

}

注：width和height指的是内容的宽和高，background指的是内容的填充padding的颜色！

& margin两种特殊现象

外边距的合并现象：

如果两个div上下排序，给上面一个div设置margin-bottom，给下面一个div设置margin-top，那么两个margin会发生合并现象，合并以后的值较大的那个。

<style>

.one {

height: 100px;

background: red;

margin-bottom: 50px;

}

.two {

height: 200px;

background: blue;

margin-top: 100px;

}

</style>

<divclass="one">div1</div>

<divclass="two">div2</div>

margin塌陷现象：

如果一个大盒子中包含一个小盒子，给小盒子设置margin-top，大盒子会一起向下平移。

解决方案：

给大盒子加一个边框

给大盒子设置一个overflow属性 overflow:hidden

浮动也可以

<style>

.father {

width: 400px;

height: 300px;

background: red;

}

.son {

margin-top: 10px;

width: 200px;

height: 150px;

background: blue;

}

</style>

<divclass="father">

</div>

从上一个案例中，可以总结：

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

& margin的使用补充

Ø margin: 0 auto; 让容器水平居中。

Ø margin-right: auto; 如果不设置其它属性只设置这个属性，那么浏览器在解析的时候会将一个盒子的所有的默认的margin全部给margin-right

Ø margin设置为负数：

如果margin-left设置为负数，那么将盒子会向左移动。

如果margin-right设置为负数，那么盒子会向右移动。

& 关于使用margin：0 auto的注意事项

1）使用margin:0 auto; 的盒子，必须有width，有明确的width

2）只有标准流的盒子，才能使用margin:0 auto; 居中。

也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0auto;

3） margin:0 auto;是在居中盒子，不是居中文本。

文本的居中，要使用：text-align:center;

关于text-align的补充

text-align:left; 没啥用，因为默认居左

text-align:right; 文本居右

8.浮动

作用：解决一行中显示多个盒子的问题（并且这些盒子的位置可控。）

浮动的性质：脱标、贴边、字围、收缩

浮动的特点：

Ø 浮动的元素会脱离标准流

Ø 浮动以后的元素会覆盖在标准流的元素之上。

Ø 浮动规则：浮动找浮动，不浮动找不浮动

浮动找浮动：只有写在同一个结构下面的浮动才会浮动找浮动

Ø 浮动显示的位置与原本不浮动之前的位置是对应的

Ø 浮动的重点：同一等级，浮动的元素只会影响下面的元素，不会影响上面的元素！

<style>

div {

width: 200px;

height: 200px;

}

.one {

background: red;

}

.two{

height: 150px;

background: blue;

float: left;

}

.three {

background: pink;

}

</style>

<divclass="one"></div>

<divclass="three"></div>

Ø 浮动的元素会改变显示方式：不管元素是行内元素还是块级元素将来在显示的时候都会在同一行中显示。显示方式与行内块级元素一样。

Ø 浮动以后的元素可以设置宽高。

Ø 兄弟关系的盒子，只要有一个加浮动，其余都要加浮动！

案例1：制作导航条

<style>

.nav {

width: 760px;

height:32px;

background: red;

margin: 0 auto;

background: url(img/button1_bg.jpg);

}

li {

list-style: none; //去除无序列表前面的点等样式

}

a {

float: left;

display: inline-block;

text-decoration: none;//去除a标签的下划线等样式

color: deeppink;

line-height: 32px;

width: 80px;

height: 32px;

background: url(img/button1.jpg);

text-align: center;

font-size: 12px;

}

a:hover {

background: url(img/button2.jpg);

}

</style>

<divclass="nav">

<ul>

</ul>

</div>

案例2：文字环绕图片

<style>

img {

width: 200px;

height: 200px;

padding-right: 20px;

padding-bottom: 20px;

float: left;

}

</style>

<imgsrc="img/1.jpg" alt="">这是一个很会写代码的狗，日子过得还算不错。这是一个很会写代码的狗，日子过得还算不错。这是一个很会写代码的狗，日子过得还算不错。这是一个很会写代码的狗，日子过得还算不错。

这是一个很会写代码的狗，日子过得还算不错。这是一个很会写代码的狗，日子过得还算不错。这是一个很会写代码的狗，日子过得还算不错。这是一个很会写代码的狗，日子过得还算不错。

清除浮动

浮动对页面的影响：如果一个父盒子中有一个子盒子，并且父盒子没有设置高，子盒子在父盒子中进行了浮动，那么将来父盒子的高度为0.由于父盒子的高度为0，下面的元素会自动补位，所以这个时候要进行浮动的清除。

& 额外标签法：

在浮动的盒子之下再放一个标签，对这个标签设置clear:both，来清除浮动对页面的影响。

a.内部标签：会将这个浮动盒子的父盒子高度重新撑开

b.外部标签：会将这个浮动盒子的影响清除，但是不会撑开父盒子。

注意：一般不会使用这一种方式来清除浮动。这种清除浮动的方式会增加页面的标签。

& overflow属性：

先找到浮动盒子的父元素，再在父元素中添加一个属性：overflow:hidden

注意：一般也不会使用这种方式。overflow:hidden有一个特点，离开了这个元素所在的区域以后会被隐藏。

& 伪元素：

伪元素：在页面上不存在的元素，但可以通过css添加上去。每个元素都有自己的伪元素

<style>

p:before {

content: "h";

font-size: 20px;

color: brown;

}

p:after {

content: "d你好，鸿飞";

display: block;

height: 100px;

width: 100px;

line-height: 100px;

background: cadetblue;

text-align: center;

}

</style>

:after 在…之后

:before 在…之前

content:”” 添加内容

默认添加的伪元素是行内元素，所以前面的h和后面的ello，worl连在一起。后面的d由于设置了display:block，所以转行显示。

下面是利用伪元素来清楚浮动的方法：在页面的clearfix元素后面添加了一个空的块级元素（这个元素的高为0，行高也为0，并且这个元素清除了浮动）

<style>

.father {

width: 500px;

border: 10px solid #000;

}

.son {

width: 200px;

height: 200px;

background: red;

float: right;

}

.one {

width: 500px;

height: 300px;

border: 10px solid deeppink;

}

.clearfix:after{

content: "";//添加内容为空

height: 0;//内容高度为0

line-height: 0;//内容文本的高度为0

display: block;//将文本设置为块级元素

clear: both;//清除浮动

visibility: hidden;//将元素隐藏

}

.clearfix {

zoom: 1;/*为了兼容ie6*/

}

</style>

<divclass="father clearfix">

<divclass="son"></div>

</div>

<divclass="one"></div>

浏览器兼容问题

第一，IE6，不支持小于12px的盒子，任何小于12px的盒子，在IE6中看都大

解决办法很简单，就是将盒子的字号，设置小（小于盒子的高），比如0px。

12 height: 4px;

13 _font-size: 0px;

我们现在介绍一下浏览器hack。hack就是“黑客”，就是使用浏览器提供的后门，针对某一种浏览器做兼容。

IE6留了一个后门，就是只要给css属性之前，加上下划线，这个属性就是IE6认识的专有属性。

比如：

1 _background-color: green;

解决微型盒子，正确写法：

1 height: 10px;

2 _font-size:0;

第二，IE6不支持用overflow:hidden;来清除浮动的

解决办法，以毒攻毒。追加一条

1 _zoom:1;

完整写法：

1 overflow: hidden;

2 _zoom:1;

9.定位

解决页面上盒子与盒子之间页面层叠的问题！使用position

1.static:静态定位

Ø 所有的标准流中的元素都是静态定位。

2.relative:相对定位

Ø 使用的时候还要配合：top,left,right,bottom来使用

Ø 是相对于自己原来的位置发生偏移，在页面上仍然占据位置，会覆盖其他内容！

Ø 不脱标，老家留坑，形影分离！

<style>

div {

width: 100px;

height: 100px;

}

.one {

background: red;

}

.two {

background: blue;

position: relative;

top: 10px;

left: 10px;

}

.three {

background: green;

}

</style>

<divclass="one"></div>

<divclass="two"></div>

<divclass="three"></div>

用途：微调元素、做绝对定位的参考

相对定位的定位值：

可以用left、right来描述盒子右、左的移动；

可以用top、bottom来描述盒子的下、上的移动。

↘：

2 position: relative;

3 top: 10px;

4 left: 40px;

↙：

3 position: relative;

4 right: 100px; →往左边移动

5 top: 100px;

↖：

3 position: relative;

4 right: 100px;

5 bottom: 100px; →移动方向是向上。

↗：

9 position: relative;

10 top: -200px; →负数就是相反的方向，如果是正，就是下边，如果是负数就是上边

11 right: -200px;

↗：

4 position: relative;

5 right: -300px;

6 bottom: 300px;

完全等价于：

7 position: relative;

8 left: 300px;

7 bottom: 300px;

如图，有几种相对定位的移动方法？

方法1：

1 position:relative;

2 top:100px;

3 left:200px;

方法2：

1 position:relative;

2 bottom:-100px;

3 right:-200px;

方法3：

16 position:relative;

17 top:100px;

18 right:-200px;

方法4：

14 position:relative;

15 bottom:-100px;

16 left:200px;

3.absolute:绝对定位

绝对定位的参考点：

Ø 如果这个元素没有父元素，相对于body来定位的

Ø 如果绝对定位的元素有父元素，但是父元素没有定位，还是相对于body来定位的

如果用top描述，那么定位参考点就是页面的左上角，而不是浏览器的左上角：

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

Ø 如果绝对定位的元素有“父”元素，而且父元素有非static定位，那么这个绝对定位的元素偏移是以自己的“父”元素为基础。要听最近的已经定位的祖先元素的，不一定是父亲，可能是爷爷！

Ø 绝对定位的儿子，无视参考的那个盒子的padding。

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

Ø 绝对定位之后的元素在页面不会占据位置（绝对定位以后的元素会脱离标准流）

Ø 子绝父相：子元素使用绝对定位，父元素使用相对定位

案例：如果小盒子在大盒子中要定位并且水平居中

先left: 50%，将小盒子在大盒子平移大盒子的一半，再设置margin-left：-(小盒子宽度的一半),注意一定是负数，那么将来小盒子在大盒子中就可以水平居中了。

<style>

.big {

position: relative;

width: 200px;

height: 100px;

background: red;

}

.small {

position: absolute;

width: 100px;

height: 30px;

background: blue;

bottom: 5px;

left: 50%;

margin-left: -50px;

}

</style>

<divclass="big">

<divclass="small"></div>

</div>

4.fixed：固定定位

Ø 不管页面有多大，固定定位的元素永远是相对于浏览器的边框来的。

Ø 固定定位的元素也脱离了标准流（不在页面上占据位置）

z-index：设置盒子的层级

Ø z-index值表示谁压着谁。数值大的压盖住数值小的。

Ø 只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的东西不能用。

Ø z-index值没有单位，就是一个正整数。默认的z-index值是0。

Ø 如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。

Ø 从父现象：父亲怂了，儿子再牛逼也没用。

补充：

Ø 图文对齐

如果文本与图片在同一行中，那么将来文字与图片的默认对齐方式是文字的基线对齐图片的底线。也就是底部对齐

vertical-align：middle 将中线对齐设置文本与图片的对齐方式：

vertical-align与display:inline-block一起使用效果最好。

Ø overflow:溢出

取值：

hidden：会将超出容器的部分隐藏起来

scroll：给容器加上滚动条

auto：根据具体情况判断容器是否要加上滚动条

Ø 元素的隐藏：

overflow:hidden//将超出的部分裁剪掉

visibility: hidden//可以将元素隐藏，但是在页面上还保留着原来的位置！（停薪留职）

<style>

.one {

width:100px;

height:100px;

background:red;

visibility:hidden;

}

.two {

width:100px;

height:100px;

background:blue;

}

</style>

<divclass="one"></div>

<divclass="two"></div>

display: none;//可以将元素隐藏，不保留原来的位置！

Ø 如果定位的盒子没有宽高，那么默认宽高为0;

如果给子盒子设置宽度为100%,那么这个子盒子的宽与父盒子一样宽。

Ø 透明度：

opacity:不透明度 opacity:0.5; 取值在0-1之间的小数。

这个属性ie6不支持，如果要在ie6中设置透明，要用：filter: Alpha(opacity=50);

10.emmet语法快捷键

生成id名和类名

标签名.类名#id名+tab

没有标签名.类名+tab ==>div

生成同级元素：标签名+标签名+标签名“+”tab

生成子类标签

标签名>子标签名>子标签名>子标签名+tab

生成与子类标签的同级标签：标签名>子标签名>子标签名>子标签名^^子标签名+tab

带固定数量的标签:ul>li*5+tab

带有序号名称：ul>li.abc$*3+ tab

生成带有内容的标签：ul>li>a{item}*5

生成带有属性的标签ul>li>a[href=”#”]

11.精灵图/雪碧图

精灵图：将页面上一些较小的图片放在一张大图上。

精灵图的使用：一张大的图片上有很多小的图片，那么如何将这个小的图片拿出来呢？

Ø 如果我们需要的一张图片在精灵图，必须要了解这个图片的大小和在精灵图上的位置。比如：我们要淘宝上面的阿里旺旺的图标，得到了宽高为60*60,得到图标所在的位置：0 *133.

Ø 在页面上将这个图片显示出来，在显示的时候一定要注意我们容器的大小一定要和这个图标的大小一样：比如：我们要html页面上放了一个div，宽高为60*60

Ø 将精灵图设置为容器的背景图片，并且根据图片所在的位置将背景图片进行平移：

制作精灵图：

Ø 精灵图必须是一些小的图片

Ø 精灵图的多个小图之间一定要留有足够的间隙

Ø 完成精灵图后一定要在精灵图的下方留足够的空隙，方便将来再次添加其它的精灵图

Ø 如果是页面上一个像素的背景图片不要放在精灵图上面

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="UTF-8">

5 <title></title>

6 <style type="text/css">

7 span {

8 float: left;

9 background: url(img/zimubiao.jpg) no-repeat;

10 }

12 .l {

13 width: 48px;

14 height: 78px;

15 background-position: -161px -104px;

16 }

18 .h {

19 width: 70px;

20 height: 80px;

21 background-position: -429px -9px;

22 }

24 .f {

25 width: 62px;

26 height: 82px;

27 background-position: -294px -0px;

28 }

30 .e {

31 width: 60px;

32 height: 82px;

33 background-position: -232px -0px;

34 }

36 .i {

37 width: 48px;

38 height: 78px;

39 background-position: -0px -104px;

40 }

42 </style>

43 </head>

44 <body>

45 <span class="l"></span>

46 <span class="h"></span>

47 <span class="f"></span>

48 <span class="e"></span>

49 <span class="i"></span>

50 </body>

51 </html>

1 0

超全的css新手学习笔记

1.CSS三大特性

继承性：子元素可以继承父元素的样式。

层叠性：是浏览器处理冲突的一个特性。

优先级

2.属性—文本

3.属性—背景

4.元素与元素之间的嵌套

1.行内元素

2.块级元素

3.行内块级元素

4.元素之间的嵌套

5.伪类

1.锚伪类：

超链接的美化

6.行高：line-height

font属性

7.盒子模型

1.border

2.padding

3.margin

8.浮动

案例1：制作导航条

案例2：文字环绕图片

清除浮动

浏览器兼容问题

9.定位

1.static:静态定位

2.relative:相对定位

3.absolute:绝对定位

4.fixed：固定定位

z-index：设置盒子的层级

补充：

10.emmet语法 快捷键

11.精灵图/雪碧图

10.emmet语法快捷键