CSS盒子模型

前面的课程一方面讲解了一些常用的HTML元素，另一方面引入CSS样式style的概念。对布局的知识只是提到了块元素、行内元素，其他方面提到的较少。开发过客户端软件都有图形交互界面GUI设计的常识，基于浏览器开发普通的内容网页要求HTML和CSS知识都要熟练，元素标签名字影响搜索引擎解析，影响SEO，CSS侧重于界面视觉效果，对用户视觉体验有影响。对于做Web应用的项目而言，不太关注HTML的SEO的优化，就像客户端软件开发一样，把界面设计好就行，这时候更多需要侧重于学习CSS，设计出更好的界面。当然也不是说Web应用完全不考虑SEO，Web应用和传统的客户端通用最大的区别就是可以通过超链接随意传播，可以通过搜索引擎搜索，关于HTML标签的知识、SEO的知识肯定掌握的越多越好，术业有专攻，选择自己该学习的就好。

内边距padding

一个div里面嵌套一个div

一个div元素可以理解为一个盒子，外面的div盒子里面嵌套了一个div盒子。外面的盒子设置了红色背景，没有设置盒子宽高度，里面的盒子设置了蓝色背景，同时设置宽高度都是300像素。前面说过块元素独占一行，观察页面的显示效果可以看出，红色区域占据了一行，蓝色方块区域位于红色区域左侧,说明元素都是默认靠左排列。你可以尝试把里面的蓝色div元素删除，刷新网页可以看到，红色区域也没了，这一点好理解，盒子就像食品袋一样里面没东西就是扁的，外面的盒子没有强制定义宽度和高度，那么他的高度就取决于里面的文字或其它元素支撑起来。最外面的div里面随意输入一些文字就可以看到网页上显示的文字，同时背景是红色。这时候你应该明白，盒子一方面具有自由伸缩性，另一方面可以自定义尺寸，CSS这样设计自然有大的用途，自由伸缩性的特点是能对里面的子元素自由响应。比如一个p标签没有定义尺寸，标签里面的文字占据的面积有多大，它就有多大，如果没有自由伸缩性，你每次都要尝试输入p标签不同的宽高度，直至刚好覆盖文字，如果高度太小，文字就会溢出，显示在盒子的外面，有兴趣可以了解网页的响应式布局。

<div style="background-color: red">
    <div style="width: 300px;height: 300px;background-color: blue"></div>
</div>

body标签添加背景色

body标签里面添加绿色背景，刷新页面可以看到整个页面都是绿色，你所有自定义的元素外面都有一个最大的body盒子，body字面意思就是身体，整个网页的躯体，现在你也应该能够理解为什么大多数标签，都要写在body开始标签和结束标签之间，它们为什么都是body元素的子孙元素。通过body这个案例，可以知道随着知识增长，你也会对一直陌生的head标签里面都是什么子标签产生认识，知道为什么W3c设置head这个标签。

<body style="background-color: green">

padding

外层div添加样式属性padding: 50px，padding的意思是内边距，内层元素里面的元素与外层元素边线直接的距离。网页上可以看到蓝色区域与红色区域的间隔，你现在可以把外层div的高度强制设置为 100px;可以看出当外层div宽度小于内层div宽度的时候，内层div会溢出，但是内边距的左侧和上面，会得到优先满足，这一点和布局一样，遵循先左后右，先上后下的原则。如果把width的属性值设置为300px ，刚好下面的内边距也可以得到满足，也就是说平时写的宽度width、高度height不包括内边距的padding尺寸。

<div style="background-color: red;padding: 50px">

外边距margin

margin-top

在上面代码的基础之上，内层div标签里面添加margin-top: 50px，可以看到，红色区域向下移动50个像素，margin-top定义的是一个元素的上边界距离另一个元素上边界的距离，这个距离不受 padding影响，同时存在padding和margin-top，视觉效果是两者相加。上面的padding属性写在外层标签里面，现在定义的margin-top属性在写在内层div标签里面，这也就是说，padding是在定义一个父元素的子元素相对父元素的位置布局，margin-top属性是在定义一个div元素相对另一元素的位置。使用margin属性的时候，两个元素不一定是父子关系，你可以在外层div后面增加两个与外层div并列的div元素，然后定义margin属性margin-top: 50px，可以看到div元素自动间隔50px。

<div style="background-color: red;padding: 50px;height: 300px; ">
    <div style="width: 300px;height: 300px;background-color: blue;margin-top: 50px"></div>
</div>
<div style="width: 300px;height: 300px;background-color: blue;margin-top: 50px"></div>
<div style="width: 300px;height: 300px;background-color: blue;margin-top: 50px"></div>

margin-left

margin属性不仅可以定义top位置的距离，也可以定义左右侧的距离，比如你给所有div标签添加margin-left: 50px样式约束语句，可以看多div元素相对body元素的左边界向右偏移50px，不知你是否观察到，body父元素里面嵌套了三个子元素，body标签里面的第一个子元素div里面页嵌套了一个子元素div，这个div元素相当于body的孙元素，孙元素里面还可以继续嵌套子元素，形成body的曾孙、玄孙...元素，观察页面显示效果可以知道，子元素与父元素的外边距50px，子元素与孙元素的外边距50px，这些嵌套元素的外边距会叠加起作用，也就是说孙元素与父元素的外边距相当于100px，两个50px之和。

边框的样式border

设置线宽、颜色、实线

CSS样式属性	含义
border-width	外边框宽度，比如值为1px、10px
border-style	线条样式，比如值为solid代表实线，dashed代表虚线
border-color	线框颜色

    <style>
        div{
            border-width: 50px;
            border-style:solid;
            border-color:black;
        }
    </style>

在style标签里面定义边框样式，查看页面效果可以知道，元素显示的尺寸和位置，受边框粗细、内边距padding、外边距margin影响、元素的宽度width高度height属性影响，要注意区分他们的关系，这些尺寸没有包含关系，都是个各自独立定义。

boder边框属性简写

定义边框的属性的时候往往上面三个属性会同时定义，可以采用下面的简写形式，比较方便，实际工程中也是如此。简写格式参见下面代码：border: 线宽线条样式颜色;

    <style>
        div{
            /*border-width: 50px;*/
            /*border-style:solid;*/
            /*border-color:black;*/
            border: 1px solid black;
        }
    </style>

外边距margin、内边距padding和boder一样也有自己的简写方式，参考下面的总结。

总结

padding

写法	含义
padding: 30px	所有内边距30px
padding: 10px 20px	参考语文上下左右语序原则，上下内边距10px，左右内边距20px
padding: 10px 20px 30px 40px	对应顺序是上右下左

代码案例

要求实现两个不同颜色的方块嵌套效果，里面的方块区域长宽均为200px，两个方块区域间距30px。

<div style="width: 300px;height: 300px;background-color: #00bb00;padding: 30px">
    <div style="width: 300px;height: 300px;background-color: #0000cc"></div>
</div>

首先要做的是写两层div，把它们的宽高度都定义为300px，这时两个div元素区域完全重合，然后在外层的div标签里面引入padding属性，属性的值为30px，这个时候，外面的方形区域的边长是360px，如果上面的题目，要求里面的方形区域边长300px，更改为外面的方形区域要求边长为300px，这时候应该怎样设置。

margin

CSS属性	含义
margin	简写
margin-bottom	下外边距
margin-right	右外边距
margin-left	左外边距
margin-top	左外边距

简写方式

写法	含义
margin:10px	所有外边距10px
margin:10px 20px	与padding一样，上下左右原则，上下外边距10px，左右外边距20px
margin:10px 20px 30px;	上外边距10px，左右外边距20px，下外边距30px
margin:10px 20px 30px 40px;	对应顺序是上、右、下、左

无需记忆，用的时候查一下，时间一长自然能记下来

长度值

值	含义
px	像素单位，比如10px
auto	缺省，常用于居中
%	相对父元素尺寸百分比，比如width:20%
inherit	继承，与父元素的外边距设置一样