DIV相关的技术

div它是一个html标签，一个块级元素（单独显示一行）。它单独使用没有任何意义，必须结合CSS来使用。它主要用于页面的布局。

span它是一个html标签，一个内联元素（显示一行）。它单独使用没有任何意义，必须结合CSS来使用。它主要用于对括起来的内容进行样式的修饰。

CSS概述

CSS指层叠样式表（Cascading Style Sheets）

样式定义如何显示HTML元素

样式通常存储在样式表中

把样式添加到HTML4.0中，是为了解决内容与表现分离的问题

外部样式表可以极大提高工作效率

外部样式表通常存储在CSS文件中

多个样式定义可层叠为一

CSS的作用

HTML：它是整个网站的骨架。

CSS：它是对整个网站骨架的内容进行美化（修饰）。

CSS如何使用

语法和规范

选择器{

属性名1：属性值1；

属性名2：属性值2；

属性名3：属性值3；

}

CSS的引入方式

css的引入方式分为三种

第一种：行内引入

<div style="color:red;font-size:100px;">
    javaEE
</div>

第二种：内部引入

<style type="text/css">
    div{
        color:red;
        font-size:100px;
        }
</style>

第三种方式：外部引入

div{
    color:red;
    font-size:100px;
}

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title rel="stylesheet" type="text/css" href="../../css/style.css"/>
    </head>
</html>

CSS的浮动

浮动的框可以向左或向右踢动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

请看下图，当把框1向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

再请看下图，当框1向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它处于文档流中，所以它不占据空间，实际上覆盖住了框2,使框2从视图中消失。

如果把所有三个框都向左移动，那么框1向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其他浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么他们向下移动时可能被其他浮动元素“卡住”：

盒子模型

盒子取值计算

我们在修改页面元素位置的时候，需要设定它相对于盒子的位置，那么我们有必要清楚关于盒子模型里面的取值相关问题。

在CSS中，width和height指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。而默认情况下，内边距、边框和外边距的值均为0.

占据页面大小的区域是整个元素框的总尺寸！默认情况，padding、margin、border均为0，假如我们设定了区域内容的width和height，那么此时整个元素框的总尺寸就是该区域内容的宽高了，此时，如果设定了margin值，那么整个元素框的总尺寸会发生变化（变大了)，但是我们希望它的整体布局不发生变化！所以我们可以修改区域内容的尺寸（原有大小减去设定的margin值）。

附：图解说明盒子模型取值问题

【前端】DIV & CSS