HTML中的标签系列-03-DIV标签&CSS

一、DIV简介

 div就是html页面的一个普通标签，进行区域划分。它的特性是：独自占用一行。独自不能实现复杂效果，必须配合CSS样式进行渲染。

• ＜div＞标签是一个块级元素(单独占一行)，他单独使用没有意义，必须结合CSS样式使用，主要用于页面的布局。
• ＜span＞标签是一个内联元素(显示在一行)，他单独使用也没有意义，必须结合CSS使用，主要用于对内部内容进行样式的设置。

二、CSS

1.CSS简介

 CSS通常称为CSS样式或者层叠样式表，主要用于设置HTML页面中的文本内容(字体，大小，对齐方式等)、图片的外形(高度，边框样式，边距等)以及版面的布局等外观显示样式。
 CSS可以使HTML页面更好看，css色系的搭配可以让用户更舒服，css+div布局更加的灵活，更容易绘制出用户需要的结构。

2.CSS代码的特点

• css样式选择器严格区分大小写，属性和属性值不区分大小写。
• 多个属性之间必须用英文的分号隔开，最后一个属性后的分号可以省略，但不建议省略。
• 在编写css代码时，为了提高代码可读性，最好加上注释
• 在css代码中空格是不被解析的。

3.CSS的3种引入方式：指定CSS文件存放的位置

• 行内引入：直接将CSS样式的代码写到元素标签里面去，通过style属性。
• 内部引入：在＜head＞标签里面使用＜style＞标签，写入CSS样式代码。
• 外部引入：又称为链入式，CSS代码单独写在一个css文件中，不需要使用style标签，最后在html页面中使用＜link＞标签引入该css文件。
• 注意：css样式的优先级问题，采用的是就近原则！

4.CSS的选择器：获取需要设置样式的元素

• 基本选择器
  • id选择器：#加标签id值，元素的id值设置唯一，一般用于给单个元素设置。
  • 类选择器：标签的class值设置为一致，设置一样的具有相同的样式。一般用于对一样标签的部分元素设置相同的样式。
  • 元素选择器：对一类标签设置同样的样式。
  • 元素选择器和类选择器组合使用：元素名.类名{}的方式。
• 其他选择器
  • 层级选择器：先找一个不同的外部的元素，然后空格，再写里面的元素。
  • 属性选择器：元素名称[属性名=’属性值’]，对具有对应属性的一类元素进行样式的设置。

5.CSS的样式

• 表框和尺寸：border、width、height
  • border：设置边框的样式，格式：宽度 样式 颜色
    例如：border:1px solid red; 即1像素边框，实边，红色。
  • width和height：用于设置标签的宽度和高度，单位都是像素值。
    例如：width:200px; height:200px; 即宽200个像素值，高200个像素值。
• 布局：float、clear
  • 通常默认的排版方式，将页面中的元素从上到下一一罗列，而实际当中，需要左右方式进行排版，就需要使用浮动。float就是设置元素浮动，取值有：
    • left：元素向左浮动
    • right：元素向右浮动
    • none：元素不浮动，默认值
  • 由于浮动元素不再占用原文档流的位置，所以他会对页面中其他元素的排版产生影响。如果要避免影响，需要使用clear属性进行清除浮动。他的取值有：
    • left：不允许左侧有浮动元素，即清除左侧浮动的影响
    • right：不允许右侧有浮动元素，即清除右侧浮动的影响
    • both：同时清除两侧浮动的影响
• 转换：display
  • HTML提供丰富的标签，这些标签被定义成不同的类型，一般分为：块标签和行内标签。
    • 块标签：以区域块方式出现。每个块标签独自占据一行或多行。常见的块元素有：＜h1＞、＜div＞、＜ul＞等。
    • 行内标签：不必在新的一行开始，同时也不强迫其他元素在新的一行显示。常见的行内标签有：＜span＞、＜a＞等。
  • 在开发中，如果希望行内标签具有块元素的特性，需要使用display样式进行转换。取值有：
    • inline：此元素将显示为行内元素，他是行内元素默认的display值。
    • block：此元素将显示为块元素，他是块元素默认的display值。
    • inline-block：将对象呈递为内联对象，但是对象的内容作为块对象呈递。
    • none：此元素将被隐藏，不显示，也不占用页面空间。
• 字体：color、font-size。例如：color:red; font-size:20px; 即字体显示为红色，大小为20个像素值。
• 背景色：background-color。例如：background-color:red; 即背景色为红色。

6.CSS的盒子模型

 CSS框模型(Box Model)规定了元素框处理元素内容、内边距、边框和外边距的方式。取值：默认它占据的高度为内容的高度(默认情况内边距、外边距、边框值均为0)，如果设置了内边距等值，为了保证它占据的高度不发生变化，那么必须重新设置它的高度(原有的-设置的值)。

• 内边距：padding
  • padding:10px; 表示内边距上、右、下、左均为10个像素值。
  • padding:10px 20px; 表示：内边距上、下均为10个像素值;内边距左、右均为20个像素值。
  • padding:10px 20px 30px 40px; 表示：内边距上、右、下、左分别为10px/20px/30px/40px。
  • 还可以分别对某一个方位设置值。
      padding-top:10px;
      padding-right:10px;
      padding-bottom:10px;
      padding-left:10px;
• 边框：border
  • border-top-style：设置上边框
  • border-right-style：设置右边框
  • border-bottom-style：设置下边框
  • border-left-style：设置左边框
• 外边距：margin
  • margin-top:设置上外边距
  • margin-right:设置右外边距
  • margin-bottom:设置下外边距
  • margin-left:设置左外边距