盒子模型

div
div 可定义文档中的分区（division）。
div 标签可以把网页分割为独立的、不同的部分。

image

可以看成以下结构：

image

<div> 不像 h1，p标签，没有任何默认样式，其主要作用是标识网页上的某块区域。常见做法是通过给div元素加上id或class

，然后通过css选中某个div，对其进行样式美化。

每个div可以看成一个盒子

一个盒子中主要的属性有5个：width、height、padding、border、margin。如下：

width：内容的宽度。CSS中 width 指的是内容的宽度，而不是盒子的宽度。盒子的宽度=内容宽度+padding+border

height：内容的高度。CSS中 height 指的是内容的高度，而不是盒子的高度。盒子的高度=内容高度+padding+border

padding：内边距。

border：边框。

margin：外边距。

border: 1px solid blue
padding:30px 30px 30px 30px 上右下左 顺时针
padding:30px 30px 30px 上 左右 下
padding:30px 30px 上下 左右

外边距的妙用

网页居中对齐
前提，居中对齐的网页元素必须设定宽度。

margin:0px  auto;

盒子型模的尺寸

image

盒子模型总尺寸=border-width+padding+margin+内容宽度

元素默认样式

很多标签都有自己的默认样式

我们在chrome浏览器中运行时，可以通过开发者工具(快捷键Ctrl+Shift+I)来一个个审查元素，来看看它们的默认样式
body标签的margin为8px

image

p标签的上下外边距为16px

image

h1标签的上下外边距为21.440px

image

ul标签的上下外边距也为16px，左内边距也为40px

image

重置默认样式

为了兼容性，凡是浏览默认的样式，都不要使用。
重置默认样式 (css reset)

/*默认样式重置(css reset)*/
        body, p, h1, h2, h3, h4, h5, h6, dl, dd {
            margin: 0;
            font-size: 12px; /* 中文字体大小的最小值 */
        }

        ol, ul {
            list-style: none; /* 去除列表样式 */
            padding: 0;
            margin: 0;
        }

        a {
            text-decoration: none;
        }