1. 熟练使用DIV标签
   1. 全称division，即为划分
   2. 能够把网页中的内容分割为独立的、不同的部分
2. 块级元素：div,p,h1~h6
   1. 特点：独占一行，可以设置宽高
3. 行内元素：<span></span>，<a></a>
   1. 特点：不会独占一行，不可以设置宽高，即使设置了也不起作用，宽高靠内容撑起
4. 进一步学习CSS属性
   1. 边框属性

border:边框宽度 边框风格 边框颜色;

border:1px solid red;//三个值的顺序是可以打乱的，必不可少的是前两个值(边框宽度和边框风格)

border:1px solid;//不设置边框颜色，默认是黑色

边框风格：

solid//实线

dashed//虚线

1. 宽、高属性
   1. width:200px;//设置标签的宽度为200像素
   2. height:100px;//设置标签的高度为100像素
2. 文本属性
   1. 文本修饰属性：text-decoration
      1. text-decoration:none;//去掉下划线
      2. text-decoration:underline;//加下划线
   2. 文本水平方向的对齐方式：text-align
      1. text-align:center;//水平居中
      2. text-align:left;//水平居左
      3. text-align:right;//水平居右

• 文本首行缩进：text-indent:32px;
  1. 注意：浏览器默认字体大小是16px

1. 文本行高：line-height
   1. line-height:50px;//浏览器默认行高是20px
2. 文本垂直居中
   1. 必须保证标签有个height
   2. 必须保证标签中line-height的值与height值相同

1. 背景属性
   1. 背景颜色
      1. background-color:red;
   2. 背景图片
      1. background-image:url(图片的地址);
      2. 背景图片引入进来默认是平铺的

• 设置背景图片是否平铺：
  1. background-repeat:no-repeat;//不平铺
  2. background-repeat:repeat;//平铺，默认值
  3. background-repeat:repeat-x;//沿x轴横向平铺
  4. background-repeat:repeat-y;//沿y轴纵向平铺

1. 设置背景的一些列属性：background
2. CSS盒模型
   1. 外边距(margin)：标签边框到边框（盒子到盒子）之间的距离

• 通过margin属性来设置外边距的一系列属性

1. 设置块级元素水平居中

1. 内边距(padding)：标签中内容到边框之间的距离

• HTML标签默认有些内外边距，需要清除内外边距：

1. 通配符选择器

*{

Css样式;

}

*代表HTML中的所有标签

1. 浮动属性
   1. CSS定位机制有三种：普通流，浮动，绝对定位
   2. 普通流：是HTML文档默认的从上往下的布局

• 浮动（float）：
  1. 浮动的元素脱离了普通流，不占空间
  2. 加了浮动的元素可以向左向右移动，直到它的边框碰到另一个元素的边框为止。

 

1. 清除浮动：overflow：hidden；
   1. 在含有浮动元素的父级元素上，加overflow:hidden
   2. 成功清除浮动的标志：
      1. 父级元素能够扩展开，
      2. 后面的元素能够正常布局
   3. DIV+CSS进行网页布局
      1. 分析网页结构：
         1. 一般网页分为头部、主体、底部这三部分

 

注意：最外层标签推荐使用ID选择器，内层的标签推荐使用class选择器

1. 新建文件
2. 推荐使用外部样式表
3. 在CSS文件中：
   1. 第一步：清除内外边距