8、盒模型

目标：

　　1、国字形（大型网站常用类型）　　　　　　

　　　　

 　　　　如图所示，我们可以看出，国字型页面结构主要分为五个部分

　　　　头部：包含网站的标题或横幅广告条、搜索等功能

　　　　左、中、右侧：按自己实际所需修改自己的内容

　　　　底部：一般包括一些基本信息、联系方式、版权声明等内容　

盒模型

　　

网页中的盒模型

　　

　　网页中盒子模型是用于排版布局的矩形块
　　


内容的设置

　　宽度属性和高度属性
　　　　宽度使用width属性表示
　　　　高度使用height属性表示

　　　　

　　边框的设置
　　　　border-width 属性设置元素边框宽度
　　　　border-color 属性设置元素边框颜色
　　　　border-style 属性设置元素边框线性

　　　　

　　边框属性的值

　　　　

 

模型小结

　　

 

边框--2px红色实线

　　

 

边框复合属性
　　Border 复合属性可以在一个属性中设置边框的所有属性值

　　

 

如何设置一侧边框样式

　　

单独设置某个方向上的边框
　　通过border-方向词，可单独设置上下左右某一方向上的边框效果

　　

 

去掉边框的方法
　　去掉边框的方法有两大类

　　

 

如何使内容和边框有间距？

　　

 

内边距
　　Padding 是设置内容与边框之间距离的CSS属性
　　可以设置不同方向的padding值

　　

内边距复合属性

　　

内边距

　　Padding 复合属性可以在一个属性中设置内边距的所有值

　　

 

内边距复合属性

　　

属性值个数与方向的关系

　　

 

外边距
　　Margin 属性设置盒子间距离的CSS属性
　　与padding属性类似，也可以设置不同方向的外边距

　　

 

外边距复合属性

　　

 

内边距
　　margin复合属性可以在一个属性中设置外边距的所有值

　　

 

外边距复合属性语法检测

　　

 

属性值个数与方向的关系

　　

 

内容小结

　　

 

内容水平居中
　　margin：0 auto；实现水平居中显示效果

标签默认样式

　　

 

div标签
　　div标签定义 HTML 文档中的一个分隔区块或者一个区域部分。
　　经常与 CSS 一起使用，用来布局网页。

　　

 

div 与 span 的区别