盒子模型
盒子模型: 就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。
盒子模型有元素的内容、边框(border)、内边距(padding)、和外边距( margin)组 成。
盒子里面的文字和图片等元素是 内容区域
盒子的厚度 我们成为 盒子的边框
盒子内容与边框的距离是内边距;盒子与盒子之间的距离是外边距
2.盒子边框
语法:border : border-width || border-style || border-color
border: 1px solid red;
表格的细线边框 :table{ border-collapse:collapse; }
3.内边距
padding属性用于设置内边距。 是指 边框与内容之间的距离。
4个值 padding: 上内边距 右内边距 下内边距 左内边距
实际高度: Height = content height + padding + border
实际宽度:Width = content width + padding + border
通过给设置了宽高的盒子,减去相应的内边距的值,维持盒子原有的大小
4.布局稳定性
按照 优先使用 宽度 (width) 其次 使用内边距(padding) 再次 外边距(margin)
原因:
(1) margin 会有外边距合并 还有 ie6下面margin 加倍的bug## 标题所以最后使用。
(2)padding 会影响盒子大小, 需要进行加减计算 其次使用。
(3)width 没有问题我们经常使用宽度剩余法 高度剩余法来做
5.外边距
margin属性用于设置外边距。 margin就是控制盒子和盒子之间的距离
外边距合并
相邻块元素垂直外边距的合并 :取两个值中的较大者
嵌套块元素垂直外边距的合并(塌陷)
(1)可以为父元素定义上边框。 (2) 可以为父元素定义上内边距 (3)可以为父元素添加overflow:hidden。
块级盒子水平居中; margin:0 auto;
文字水平居中是 text-align: center
插入图片 移动位置只能靠盒模型 padding margin
背景图片我们一般用于小图标背景 或者 超大背景图片 背景图片 只能通过 background-position
清除元素的默认内外边距:padding:0;margin:0;