<div>和<span>标签
- 最大优点：没有任何的默认样式渲染
- 最大区别：
- <div>标签是块元素
- <span>标签是内联元素
- 作用
- 结构化HTML元素
- DIV+CSS网页布局
- 提高网页加载速度
注：1、<div>和 <span>标签可以相互转换（display属性）
2、规范角度而言，<span>标签中不内嵌<div>标签
<style>标签注意事项：
1、应写在<head>标签之间；
2、加上type=“text/css”属性
字体属性：
| 属性 | 描述 |
| font-style | 设置字体风格 |
| font-weight | 设置字体粗细 |
| font-size | 设置字体的尺寸 |
| font-famliy | 设置字体系列 |
| font | 简写属性，作用是把所有针对字体的属性设置在一个声明中（注意顺序） 例如：font:italic bold 16px "楷体" |
文本属性：
| 属性 | 描述 |
| color | 设置文本的颜色，如red |
| line-height | 设置文本的行高 |
| text-align | 设置文本的对齐方式，如left，right，center |
| text-decoration | 设置文本装修，如underline、none、line-through |
设置页面元素的背景样式
| 属性 | 描述 |
| background-color | 背景色，取值如，red |
| background-image | 背景图片，如：background-image:url("./images/bg.png"); |
| background-position | 背景位置 |
| background-repeat | 背景填充方式，取值：repeat-x | repeat-y | no-repeat |
| background | 合写方式为 background:#fff url(bg.png)left top no-repeat |
超链接伪类，鼠标形状控制：
| 属性 | 描述 | 举例 |
| list-style-image | 将列表设置为列表标志 | list-style-image:url() |
| list-style-type | 设置列表项标志的类型：disc(实心圆）cicle（空心圆）square（正方形） | list-style-type:cicle; |
| list-style | 以上属性的合并简写，或none去掉默认属性的设置 | list-style:square url(); |
a:link {color.red} //未访问的链接
a:visited {color:blue} //已访问的链接
a:hover{color.green} //当有鼠标悬停在链接上
a:active{color.yellow} //被选择的链接
float 属性：
取值：left，right,none
作用：
1、块元素同行排列显示，一般用于排版，分栏显示
2、设置浮动属性后，脱离文档流向指定的左或右边对齐，直到父元素的边界或浮动的元素
注意：使用浮动后要及时清除，以免影响其后的网页元素。
清除浮动的必要性：
1、浮动后，脱离文档流不占网页空间
2、浮动后的网页元素会影响同级元素
clear属性清除浮动：
取值：left,right,both,none
注：表明容器框的哪边不挨着浮动框
overflow属性：
作用:定义溢出元素内容区的内容会如何处理
取值：visible（默认），auto,hidden,scroll
position属性：
1、relative（相对定位）
- 相对它原来的位置，通过指定偏移，达到新的位置
- 仍在标准流中，它对父级盒子和相邻盒子都没有任何影响
2、absolute（绝对定位）
- 相对于已设定非static定位属性的父元素计算偏移量
3、fixed（相对浏览器固定定位，IE6不支持）
4、static（默认）
偏移量设置
- x轴（left、right 属性）与y轴（top、bottom属性）
- 可取值像或百分比
扫一扫
3517
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
