HTML+CSS笔记

1. 盒子模型 div

背景属性

1. 设置背景颜色，background-color
2. 设置背景图像，background-image
3. 设置背景图像平铺，background-repeat
    属性值：
 	repeat，水平和和垂直方向（默认）
 	no-repeat，不平铺（左上角）
 	reapt-x，沿x方向
 	repeat-y，沿y方向
4. 设置背景图像的位置，background-position
5. 设置背景图像固定，background-attachment（与位置一起使用）
     属性值：
	scroll，图像随着页面一起滚动（默认值）
	fixed，体香固定在屏幕上

2. 行内元素 span

有<a>,<strong>,<b>,<em>,<del><span>
特点：
   1、在一行内，不会自动换行；
   2、宽度就是文字或者图片的矿都，默认不可改变；
   3、 设置高度height无效，可以通过line-height来设置；
   4、只能容纳其他文本或者行内元素；
   5、margin和padding只有左右有效，上下无效

3. 块元素与行内元素的转换display

属性值：inline-block(行内块元素)、block（块元素）、inline（行内元素）

4. 浮动：float

属性值：left、right、none

5. 清除浮动：clear

属性值：left、right、both（如果父元素没有定义height，则clear没有作用，需要使用overflow：auto或者hidden来清除浮动）

6. 元素定位 position

属性：relative（相对-父元素）、absolute（绝对-子元素）、fixed（固定定位）使用left:20px;top:20px;来确定位置

7.列表

1. 无序列表ul

<ul>
 <li>列1</li>
 <li>列2</li>
</ul>

2. 有序列表ol

 <ol>
    <li>列1</li>
     <li>列2</li>
 </ol>

3. 定义列表dl

 <dl>
    <dt>名词</dt> //可以定义图片
        <dd>解释1</dd>
        <dd>解释2</dd>
 </dl>

list-style：none//清除列表默认样式（列前面的序号或者点）

8. ** 超链接a**

如果时图片使用超链接时，默认会有边框，使用“border=0”消除

  <a href="# ">超链接</a>

锚点链接

<a href="#id名">锚点链接</a>
<p id=id名>定位的内容</p>

a:link{未访问时的超超链接样式}
a:visited{访问后}
a:hover{经过、悬停时}
text-decoration：none//清除超链接的下划线