css学习笔记

CSS（Cascading Style Sheets层叠样式表）

- 外部样式表

     <link rel="stylesheet" type="text/css" href=""/>

- 内部样式表

	 <style type="text/css">
	</style>

- 行内样式表

	<p style="color: red;">世上人如玉，公子世无双</p>

为了网站的性能和可维护性，一般都是用外部样式表

---

css选择器

1. 元素选择器
2. id选择器
3. class选择器
4. 后代选择器
5. 群组选择器

后代选择器

p strong{
font-size：14px；   **strong为p的子元素**

字体

---

文本

---

边框

消除边框：border-top：0；border-top：0px；border-top：none；

---

列表

list-styly-type：none；

---

表格

---

图片

---

背景

---

超链接

---

CSS盒子

只有块元素才可以设置width和height，行内元素是无法设置width和height的（不考虑inline-block）img元素虽然不是块元素，但是它却是inline-block元素，是可以设置width和height这两个属性的

---

浮动布局

float：文字环绕
clear：left； 清除左浮动
right；清除右浮动
both；同时清除

定位布局

固定定位：fixed
相对定位：relative
绝对定位：absoluted
静态定位：static

1. 固定定位（相对浏览器的定位，不会随着滚动条改变位置）

position：fixed；
top：像素值；
bottom：像素值；
left：像素值；
right：像素值；

2. 相对定位（相对原始位置）

position：relative；
top：像素值；
bottom：像素值；
left：像素值；
right：像素值；

3. 绝对定位（相对浏览器而言，独立出来浮于其他元素之上，一般只会用到下面其中俩个）

position：absoluted；
top：像素值；
bottom：像素值；
left：像素值；
right：像素值；

4. 静态定位（没有指定position时候就是静态定位的）