盒子模型 学习理解

盒子模型

1页面布局的本质

• 首先利用CSS设置好盒子的大小，然后摆放盒子的位置。
• 最后把网页元素比如文字图片等等，放入盒子里面。
• 以上两步 就是网页布局的本质

2.盒子模型

概念：就是html页面中的布局元素看做是一个矩形盒子，一个成容器的容器

盒子模型有元素的内容、边框、内边距、和外边距组成
盒子里面的文字和图片等元素的内容区域
盒子的厚度是 盒子的边框
盒子的内容与边框的距离是内边距(类似单元格的cellpadding)
盒子与盒子之间的距离是外边距(类似单元格的cellspacing)

3.盒子边框

基本格式：border: border-widt || border-style || border-color

border-width 定义边框粗细，单位是px
border-style 边框的样式
border-color 边框颜色

边框的样式：

none:没有边框及忽略所有边框的宽度(默认值)

solid：边框为单实线

dashed：边框为虚线

dotted：边框为点线

4.内边距

padding属性用于设置内边距，是指边框与内容之间的距离

属性：

padding-left： 左内边距

padding-right： 右内边距

padding-top： 上内内边距

padding-botypm： 上内边距

值的个数: 表达意思

1个值 padding：上左下右内边距

2个值 padding：上下内边距左右内边距

3个值 padding：上内边距左右内边距下边距

4个值 padding：上内边距右内边距下内边距左内边距

盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框

5.外边距

margin属性用于设置外边距，就是控制盒子和盒子之间的距离

margin-left 左外边距

margin-right 右外边距

margin-top 上外边距

margin-bottom 下外边距

可以用于块级盒子水平居中，条件是盒子必须指定了宽度

格式：margin：0 aute；

6.盒子模型的布局稳定性

大部分情况下内外边距可以混用

根据稳定性建议优先使用 宽度(width) 其次 内边距(padding) 再次 外边距(margin)

补充

很多元素都有默认的内外边距，为了更加方便的控制页面的元素，我们需要将元素的默认内=内外边距清除

相邻块元素垂直外边距的合并，当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。解决方案：尽量给只给一个盒子添加margin值

嵌套块元素垂直外边距的合并（塌陷）。对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者。解决方案：1可以为父元素定义上边框。2可以为父元素定义上内边距3可以为父元素添加overflow:hidden。

文字居中和盒子居中的区别

1.盒子内的文字居中是text-align：center，而且还可以让行内元素和行内块居中对齐

2.块级元素水平居中 左右margin改为aute

插入图片和背景图片的区别

1.插入图片多用于产品展示 移动位置只能靠盒模型padding margin

2.背景图片一般用于小图标背景或超大背景图片 移动只能通过background-position

圆角边框（css3）

border-radius：值

值可以是数值或百分比形式，50%可以把正方形变圆

盒子阴影（css3）

基本格式：box-shadow：水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影；

水平阴影和垂直阴影必需，其他可选有默认，外部阴影（outset）为默认外阴影需设inset