【HTML04】盒子模型

盒子模型

1.Margin(外边距）

• 清除边框外的区域，外边距是透明的，盒子与盒子之间的距离

/四个参数为顺时针方向，上、右、下、左/

/当设置为两个参数的时候 代表的是第一个参数代表上下、第二个参数代表左右的值，设置三个参数是指上、左右、下/

/当设置为一个参数时，所有值都是这一个/

margin-left:左外边距

margin-right：右外边距

margin-top：上外边距

margin-bottom：下外边距

/可以分别设置-top、-bottom、-left、-right/

注意：margin主要用在兄弟同级之间，因为上/下外边距会继承扩展给父级。

块级元素对齐方式：只要左右外边距是auto就能实现页面水平方向居中对齐

①margin: 0 auto;

②margin: auto;

③margin-left:auto;

margin-right:auto;

2.Padding(内边距)

• 清除内容周围的区域，内边距是透明的。盒子与里面的内容之间的距离。一个属性的时候代表的是四个内边距都是一样的；

padding:上下内边距 左右内边距；

padding：上内边距 左右内边距 下内边距；

padding：上内边距 右内边距 下内边距 左内边距

注意：

*父子之间用内边距，兄弟之间用外边距

*为什么父子之间不能用外边距，因为父级会继承扩展儿子的上下外边距。所以父子之间使用内边距

段落中没有width属性，所以padding不会撑开盒子的宽度

3.Content(内容)

盒子的内容，显示文本和图像。

4.Border(边框)

围绕在内边距和内容外的边框。

第一个参数边框大小border-width:

第二个参数边框线型border-style:solid实线

dotted：点状线

dashed：虚线

double：双实线（两个边框线）

outset：3d突出边框

inset：3d嵌入嵌入边框

border-collaspe:collaspe;//合并相邻的边框(表格中）

第三个参数边框颜色border-color: red

盒子模型的真实大小：（一个盒子的真实宽度=宽度(width)+左内边距(padding-left)+右内边距(padding-right)+左边框宽度(border-left-width)+右边框宽度(border-right-witdh)

一个盒子的真实高度=高度(height)+上内边距(padding-top)+下内边距(padding-bottom)+上边框宽度(border-top-width)+下边框宽度(border-bottom-witdh)

1.外边距可以让块级盒子水平居中但必须满足两个条件：

1）盒子必须指定了宽度（width）

2）盒子左右外边距都设置为auto

2.嵌套块元素垂直外边距的塌陷

对于两个**嵌套关系（父子关系）**的块元素，父元素上外边距同时子元素上外边距，此时父元素会塌陷较大的外边距值

解决方法：

1）可以为父元素定义上边框

2）可以为父元素定义内边距

3）为父元素添加overfolw：hidden

3.清除内外边距

行元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转化为块级和行内块元素

让盒子水平居中对齐margin：100px auto;

让图片和盒子一样宽width：100%

盒子与盒子之间的距离多用margin，盒子里面的内容多不用padding，左右距离多用padding

4.盒子阴影

box-shadow:水平阴影的距离 垂直阴影的距离 模糊距离（模糊的还是实的）阴影的大小 阴影的颜色 默认外阴影outset，可改为内阴影inset

5.设置文字阴影

text-shadow:水平 垂直 模糊距离 颜色

可以使用宽度不指定，用padding和字体撑起盒子的宽度

传统网页布局的三种形势：标准流（块行排列），浮动，定位

结尾：
上一篇：03:css选择器
下一篇：05：伪类和伪元素+伪元素的例子