前端开发知识点三之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本身设计的widthheight与其内边距的面积和 这个盒子的设计有一个运算，父div宽410px，子div宽200px，其左右侧的margin（外边距值）都为50px，其左右侧的padding(内边距值)都为50px，其左右边框的像素都为5px，我们就得到410=200+502+502+52，也就是父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浮动

这里就不详细介绍啦

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

“我自己是一名从事了5年前端的老程序员，辞职目前在做讲师，今年年初我花了一个月整理了一份最适合2019年学习的web前端干货，从最基础的HTML+CSS+JS到移动端HTML5到各种框架都有整理，送给每一位前端小伙伴，这里是小白聚集地，欢迎初学和进阶中的小伙伴。"

QQ学习群：615094426 渡老师微信：webdu123

转载于:https://juejin.im/post/5ce37131f265da1bc94ec226