0017 认识css 盒子模型

目录

• padding 内边距
• 外边距 margin
• 默认margin 外边框
• 元素 居中显示
• 练习题

1.盒模型设计思路，页面展示的部分就是在body标签内的数据，在body标签内，区域的划分可以
在一个div内，也可以在多个div内，可以是父子关系，也可以是兄弟关系，

黄色范围和蓝色之间的空间是margin 外边距，外边距一般是盒子于盒子之间的间隙，相当于房子和房子之间的院墙。 
盒子的margin的常用设置在 margin:0 auto 在盒子内居中显示。
 
蓝色范围和红色之间的空间是border  边框所处的空间，border-width越大 边框越粗。背景色只能作用到边框内部。图二显示

红色和黑色范围是padding  内边距，文本和边框之间的空间

最内部黑色范围是content文本内容 常见的设置文本宽高的样式   width: 100px;  height: 100px; 

padding 内边距

设置内边距的距离 
            padding-top: 50px;       上
            padding-bottom: 50px;    下
            padding-left: 50px;      左
            padding-right: 50px;     右
 简写的方式
             /*padding: 10px; */
            /*默认是4个边距都是10像素*/
            /*padding: 10px 20px;*/
            /*上下10,左右20*/
             padding: 10px 20px 30px;

外边距 margin

外边距一般是盒子于盒子之间的间隙，相当于房子和房子之间的院墙。 
为一个元素 设置了自己的外边距的

默认margin 外边框

默认游览器的页面标签是body，body的margin外边框默认有8像素的，去掉margin数值，新加的元素就贴紧了游览器的边框

元素 居中显示

左右居中显示
margin： 0 上下为零，auto 自动适用父级标签左右的距离

练习题