CSS基本知识

★CSS基本选择器

1.标记选择器 <p>对应p,<a>对应a,

2.类别选择器 （可以重复利用）以（.）开头

.r{ color:red; }

.b{ color:bule; }

<p class=”r”>哈哈</p> 对应.r

3.ID选择器（id不能重名，只能一次性）以（#）开头

#p1{ color:red; }

#p2{ color:bule; }

<p id=”p1”>哈哈</p> 对应#p1

★CSS复合选择器

1)“交集”选择器（一个地方多种样式）

p.c{ font-size=20px; }（中间加点）同时满足p的样式和.c的样式 ，三种不同样式叠加

2)“并集”选择器（多个地方相同样式）

p,h1,.c,#d1{ background-color:#EEE; }（中间加逗号） 给不同的地方，同时赋值

3)“后代”选择器（所有后代，样式）

p span{ color:red;} （中间加空格）p中的span

4)“子”选择器（直接后代）

div>span{ color:red; }

5）邻接选择器

Tr+td

★在HTML中引入CSS方法

1、行内样式 <p style=”color:red;”>行内样式</p>

2、内嵌式<title></title><style type=”text/csss”> p{}</style>

3、链接式写一个CSS文件，<link href=”red.css” type=”text/css” rel=”stylesheet”>

加载的时候，有个指向，当有p标签的时候，再去加载。（性能好一些）（用的最多）

4、导入样式<style type=”text/css”> @import url(yellow.css);  </style>（注意分号）

加载的时候，全部都加载进去。（性能差一些）

5、几种方式的优先比较

行内样式 > 链接式 > 内嵌式 > 导入式（链接式在下面）

行内样式 > 内嵌式 > 导入式 > 链接式（链接式在前面）

导入样式和 链接式。同时存在，哪个在下，用哪个

后面的会覆盖前面的，内层的样式会覆盖外层的样式（重写）

★层叠样式的规则：

行内样式（style）> ID样式（id）> 类别样式（class）> 标记样式（p）

★盒模型

相框边框：border

画与相框边框的距离：padding

相框之间的距离：margin

1、行内元素之间的水平margin

margin-right + margin-left ， 块1  块2 左右和在一起

2、块级元素之间的数值margin

margin-bottom margin-top  上下模型，相互重叠，以大的为标准。（取大的）

3、嵌套盒子之间的margin

子块的margin将以父块的内容为参考（父块对外）（子块对内）

4、Margin属性可以设置成为负值

可能重叠

★块级元素和行内元素

块级元素：以一个块的形式展现，跟同级兄弟块依次竖直排列，左右撑满（div）

行内元素：以普通DOM节点展现，跟同级兄弟元素横向排列，排满后自动换行（span）

盒子的display属性

display: inline; 把元素变成内联元素；（不会换行）

display: block; 把元素变成块级元素；（自动换行）

★盒子浮动与定位

浮动：float

默认为none，标准流定位；

Left：左悬浮；

right右悬浮（叠加）

清除浮动：clear

默认为none，允许两边都可以有浮动对象

Left：不允许左边有浮动对象；

right：不允许右边有浮动对象

Both：不允许有浮动对象（叠加）

定位：position

默认为static，标准流定位

Relative：相对定位，相对于原本的标准位置偏移指定的距离

Absolute：绝对定位，以它的包含框为基准进行偏移。（如果父类有position，或Fixed算包含框）（都没写的话，包含框为body）

Fixed：固定定位，以浏览器窗口为基准进行定位；

空间位置：z-index

默认为0，z-index值大的页面位于其值小的上方