css基础，这一篇就够了

1.前端的结构

HTML 超文本标记语言 从语义的角度描述页面结构。

CSS 层叠式样式表 从审美的角度负责页面样式。

JS JavaScript 从交互的角度描述页面行为。

2.示例

遵循key：value;的格式，直接写在head标签的方式，以后会直接在css文件中写

<style type="text/css">
p{
color:red;
font-size: 30px;
text-decoration: underline;
font-weight: bold;
text-align: center;
font-style: italic;
}
h1{
color:blue;
font-size: 50px;
font-weight: bold;
background-color: pink;
}
</style>

属性：

color:blue; 字符颜色

font-size:19px; 字号大小

backgroud-color:blue; 背景颜色

font-weight:bold/normal; 加粗/正常

font-style:italic/normal; 斜体/正常

text-decoration:underline/none; 下划线/无下划线

3.选择器

标签选择器：所有的标签，都可以是选择器，例子h1，页面中所有的h1就会变成下面的样式

h1{
color:blue;
font-size: 50px;
font-weight: bold;
background-color: pink;
}

id选择器:以#形式定义的css，调用id=“name”调用，name的命名规则：只能是字母开头，有字母数字下划线组成，不能与标签同名。

<style type="text/css">
#idname{
color:red;
}
</style>

<p id="idname">我是id选择器</p>

<!--一个页面中不能出现同名id-->

类选择器-class：与id相似，但是class可以重复使用

.self{
color: red;
}
.your{
color: red;
}

<!--同一标签，可用多个类选择器，用空格分开-->
<h3 class="self your">类选择器示例</h3>

id和class选择器

尽量用class设计页面，id是用js调用的

后代选择器：用空格隔开，.div1下的所有p的颜色是红色的。

.div1 p{
color:red;
}

<div class="div1">
<ul>
<li>
<p>段落</p>
<p>段落</p>
<p>段落</p>
</li>
</ul>
</div>

并集选择器：逗号隔开

h3,li{
color:red;
}

交集选择器：以标签名开头

h3.zhongya{
color:red;
}

通配符：*，所有元素，效率低，不用

*{
color:red;
}

子类选择器（ie7开始兼容）

div>p{
color:red;
}

<!--能够选择：-->
<div>
<p>我是div的儿子</p>
</div>
<!--不能选择：-->
<div>
<ul>
<li>
<p>我是div的重孙子</p>
</li>
</ul>
</div>

时序选择器（ie8开始兼容）：可用class选择器实现兼容

<!--ul第一项-->
ul li:first-child{
color:red;
}

<!--ul最后一项-->
ul li:last-child{
color:blue;
}

下一个选择器+

h3+p{
color:red;
}

<h3>我是一个标题</h3>
<p>我是一个段落</p>

4.css的特性

css的继承性

能够被继承的：关于文字样式的

color、 text-开头的、line-开头的、font-开头的

所有关于盒子的、定位的、布局的属性都不能继承

层叠性

选择器重复选中同一个地方，听谁的?

如果选中了，那么以（id数，类数，标签数）来计权重。谁大听谁的。如果权重一样，以后写的为准.

如果没有选中，那么权重是0。如果大家都是0，就近原则(层级接近)。

如果同一标签，携带多个类名有冲突话，以定义处后写的为准。

!important,手动提高权重，为无限大。提升属性的权重，但是不影响就近原则，无法提升选择器权重，不用这个，因为会让css显得很乱。

font-size:60px !important;

5.盒子模型

所有的标签都是盒子，无论是div、span、a都是盒子。图片、表单元素一律看作文本。

简介

width是“宽度”的意思，CSS中width指的是内容的宽度，而不是盒子的宽度。

height是“高度”的意思，CSS中height指的是内容的高度，而不是盒子的高度

padding是“内边距”的意思

border是“边框”

margin是“外边距”

Padding

小属性

padding-top: 30px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 100px;

综合属性（大属性）

<!--上右下左-->
padding:30px 20px 40px 100px;
<!--上右下，左跟右一样-->
padding:30px 20px 40px;
<!--上右，下跟上一样，左跟右一样-->
padding:30px 20px;
<!--上右下左一样-->
padding:30px;

小属性可以替换大属性，反之不行

padding: 20px;
padding-left: 30px;

一些元素，默认带有padding,比如ul标签，所以用的时候，为了便于控制，总是清除这个默认的padding

*{
margin: 0;
padding: 0;
}

但是*的效率不高，所以使用并集选择器，罗列所有的元素

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
margin:0;
padding:0
}

border

三个属性：粗细、线型（solid、dashed、dotted……）、颜色

border: 1px dashed red;

border属性能够被拆开，有两大种拆开的方式：

1） 按3要素:border-width、border-style、border-color
2） 按方向：border-top、border-right、border-bottom、border-left

如果某一个小要素后面是空格隔开的多个值，那么就是上右下左的顺序：

border-width:10px 20px;
border-style:solid dashed dotted;
border-color:red green blue yellow;

用法可以拆拆拆……

实际用法：简单着来，小属性替换大属性

border:10px solid red;
border-right-color:blue;

border可以没有，

border:none;

某一条边没有：

border-left: none;

也可以调整左边边框的宽度为0：

border-left-width: 0;

6.标准文档流

1） 块级元素

霸占一行，不能与其他任何元素并列

能接受宽、高

如果不设置宽度，那么宽度将默认变为父亲的100%。

2） 行内元素

与其他行内元素并排

不能设置宽、高。默认的宽度，就是文字的宽度。

3） 文本级、容器级

文本级：p、span、a、b、i、u、em

容器级：div、h系列、li、dt、dd

4） 所有的文本级标签，都是行内元素，除了p，p是个文本级，但是是个块级元素。

所有的容器级标签都是块级元素。

5） 块级元素和行内元素的相互转换

display: inline;
display: block;

7.脱离标准文档流的三种手段

浮动 float：right;浮动的元素脱标，可并排，并可以设置宽高，不管是行内元素还是块级元素

绝对定位

固定定位

浮动性质：

脱标

收缩：浮动元素不设置宽高，自动收缩为文字的宽度。

贴边

字围

贴边

浮动清除

浮动元素的上级元素加高度。

clear:both; 但是margin失效。

添加一个空白的标签隔开或者在内部添加标签-内墙法。

overflow:hidden;溢出的内容隐藏掉.一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden; 那么，父亲就能被儿子撑出高了。而且margin生效。

8. margin

标准文档流中，竖直方向的margin不叠加，以较大的为准。

盒子都浮动了，竖直方向的margin叠加.

盒子居中margin:0 auto;

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

善于使用父亲的padding，而不是儿子的margin

9. 行高和字号

line-height: 40px;

文字在行中居中，行高字号一般是偶数，这样差可以被2整除。

—————————————————————————

font: 14px/24px “宋体”;

font: 14px/100% “宋体”;

font-size:14px;
line-height:24px;
font-family:"微软雅黑","宋体","黑体";

10. 超链接

<!--依次是没有点击、已经点击、鼠标悬停、点击时的效果，而且顺序固定-->

a:link{
color:red;
}
a:visited{
color:orange;
}
a:hover{
color:green;
}
a:active{
color:black;
}

标准的，就是把link、visited、hover都要写。实际工作中不写link、visited浏览器也挺兼容。a:link、a:visited都是可以省略的，简写在a标签里面。也就是说，a标签涵盖了link、visited的状态。

.nav ul li a{
display: block;
width: 120px;
height: 50px;
text-decoration: none;
background-color: purple;
color:white;
}
.nav ul li a:hover{
background-color: orange;
}

11. background

background-color，三种方式表示颜色

background-color:red/rgb(255,0,0)/#ff00000;

background-image

background-image:url(images/wuyifan.jpg);

background-repeat

background-repeat:no-repeat;   不重复
background-repeat:repeat-x;    横向重复
background-repeat:repeat-y;    纵向重复

background-position ：css精灵通过此属性实现

background-position:向右移动量 向下移动量;

background-position: right bottom;
background-position: left bottom;

background-attachment:背景是否固定。

background-attachment:fixed;

background综合属性

background:red url(1.jpg) no-repeat 100px 100px fixed;

等价于（可任意省略）

background-color:red;
background-image:url(1.jpg);
background-repeat:no-repeat;
background-position:100px 100px;
background-attachment:fixed;

12. 相对定位（不脱标）

position: relative;
top: 10px;
left: 40px;
top: 100px;
bottom: 100px;

13. 绝对定位（脱标）

span{
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
background-color: pink;
}

一个绝对定位的元素，如果父辈元素中出现了也定位了的元素，那么将以父辈这个元素，为参考点。

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

width: 600px;
height: 60px;
position: absolute;
left: 50%;
top: 0;
margin-left: -300px;   → 宽度的一半

14. 固定定位（脱标，ie6不兼容）

固定定位，就是相对浏览器窗口定位。页面如何滚动，这个盒子显示的位置不变。

15. Z-index

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

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

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

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

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

没有单位：

1z-index: 100;