盒子模型:
所有HTML元素可以看作盒子,在CSS中,"box model"是用来设计和布局时 使用。
CSS盒模型本质上是一个盒子, 封装周围的HTML元素, 它包括:边距,边框,填充和实际内容。
外边距属性:设置对象四边的外部边距
- 内联块级元素和块级元素的可以设置外边距。
- 内联元素可以设置左、右两边的外边距;若要设置上、下两边的外边距,必须先使该元素变为块级元素或内联块级元素。
- 如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。
- 如果提供两个,第一个用于上、下,第二个用于左、右。
- 如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。
内边距属性:设置对象四边的外部边距
- 设置内联块级元素和块级元素的内边距。
- 行内元素可以设置左、右两边的内边距;若要设置上、下两边的内边距,必须先使该元素变为块级或内联块级元素。
- 改变padding的值,就改变了content的大小
- 而改变margin的值,则不改变content的大小
1 <style type="text/css"> 2 #container{ 3 border: 2px black solid; 4 width: 700px; 5 height: 800px; 6 } 7 #child{ 8 border: 2px black solid; 9 width: 400px; 10 height: 400px; 11 margin: 100px auto;/* 设置外边距 */ 12 padding: 100px;/* 设置内边距 */ 13 } 14 </style> 15 </head> 16 <body> 17 18 <div id="container"> 19 <div id="child">div1</div> 20 </div> 21 </body>