前端开发知识点三之DIV+CSS盒子模型

之前我们学习了HTML CSS

今天我们来学习DIV+CSS

那DIV究竟是什么呢

01  简介

DIV：是HTML的一个标签，它是一个块级元素。这意味着它的内容自动地开始一个新行。

DIV+CSS：一种流行的网页布局技术，之前的网页布局为常使用TABLE表格布局，TABLE设计由来已久，显示效果很好，不会出现错位情况，但DIV+CSS在部分浏览器中会发生页面错位的情况，因此在进行设计的时候也要考虑到不同浏览器的情况，进行更改和调试。

优势：

页面代码精简，提高浏览器的访问速度

易于维护和改版

02 盒子模型

在了解盒子模型前我们先学习一下div的几个常用属性

Height:设置DIV的高度

Width:设置DIV的宽度

margin:用于设置DIV的外延边距

padding:用于设置DIV的内边距（内如子元素与DIV边界的距离）

border:设置DIV的边框样式；

display:设置显示属性。其值有block、none

float:设置DIV在页面上的流向，其值有left(靠左显示)、right(靠右显示)、none

background:设置DIV的背景样式，background后可直接跟背景的颜色、背景图片、平铺方式等样式

现在我们来完成一个盒子模型

第一步：我们来用div做一个矩形块(此div的id为father)，为其设计黑色边框为5px，宽410px，高310px(这两个数值涉及到后面的盒内部的计算)，背景色为绿，并使其在网页居中：

源代码如下：

浏览器效果：

步骤分析：

div是一个块级元素，只有配合CSS样式使用才有意义，在案例中，我们通过选择div的id#father设计div的样式

*{}：相当于选择器，代表html所有的元素，包括html标签、body标签，其中margin：0px；padding：0px用于清除div在浏览器默认的内外边距

margin： auto；设置外边距为自动，使页面居中

background用来设置背景颜色(样式)，color用于设置字体颜色

第二步： 在已经建成的父div内创建一个小div，设计div的外边距(div框到父框区域的距离)和内边距(自身div框到内部区域的距离)，设计边框像素5px，并设置背景色，在其内部区域填充图片：

源代码如下：

浏览器效果：

步骤分析：

该图片完全填充子div

子div框的面积为div本身设计的width*height与其内边距的面积和

这个盒子的设计有一个运算，父div宽410px，子div宽200px，其左右侧的margin（外边距值）都为50px，其左右侧的padding(内边距值)都为50px，其左右边框的像素都为5px，我们就得到410=200+50*2+50*2+5*2，也就是父div的宽度=子div的宽度+子div的边线border占用宽度+子div的外边距宽度+子div的内边距宽度，高度的运算同理

现在有一个问题：

父div的内边距会和子div的外边距重合吗？如果设置父div的内边距值，盒子会有怎样的变化？

思考片刻，我来揭晓答案..........

在#father{}样式中增加一条语句  padding: 25px 50px 25px 50px; 设置父div的内边距(原父div无内边距)，观察盒子是否变化，如图

我们发现盒子变大了，父div框的大小也增加了

使用Dreamweaver更容易观察效果：

从外到内的层次分别是 父div的padding-子div的margin-子div的padding-子div的内容

在DIV+CSS模型中

还有一个知识点经常使用

就是DIV的float浮动

这里就不详细介绍啦

感兴趣的小伙伴可以了解一下哦

多年编程经验，今年1月整理了一批2019年最新WEB前端教学视频，不论是零基础想要学习前端还是学完在工作想要提升自己，这些资料都会给你带来帮助，从HTML到各种框架，帮助所有想要学好前端的同学，学习规划、学习路线、学习资料、问题解答。只要加入WEB前端学习交流qun：296212562，即可免费获取，学习不怕从零开始，就怕从不开始。