盒子模型与定位

CSS盒模型本质上是一个盒子，封装周围得html元素。包括了margin,border,padding,content。每个盒子都有自己的大小和位置，同时也影响着其他的盒子的大小和位置。

块级元素

• 一个块级元素独占一行。元素的height\width\line-height以及margin\padding都可以设置。
• 设置display:block可以将元素转换为块级元素

<div> <p> <h1>... <ul>.. <table> <address> <form>

内联元素

• 和其他元素都在一行上，高度、宽度和顶部和底部边距不可设置。
• 设置display:inline 可以将块级元素转换为内联元素。

如：<a>、<span>、<br>、<strong>、<em>

内联块级元素

• 和其他元素都在一行上，元素的高、宽以及底部和底部边距可设置。
• 设置display:inline 可以将块级元素转换为内联元素。

如：<img> <input>

---

padding

padding: 10px 10px 10px 10px  //上 右 下 左

padding: 10px 10px  //上下  左右

---

两种盒子模型类型

1. box-sizing:content-box(默认)

• 元素的width = content的宽度，自己会膨胀

2. box-sizing:border-box

• 元素width = content + padding + border,自己不会膨胀
• 设计中一般情况下直接设置为border-box

注意

• 行级元素，margin-top和margin-bottom无效。
• 行级元素，padding-top和padding-bottom显示上有效果，但是对周围元素没有影响，实际上无效。
• 外边距合并：当上下相邻的两个块级元素相遇时，上面的元素有margin-bottom,下面的元素有margin-top，两者之间的垂直距离不等于两者margin之和，而是两者中的较大者。这种现响呗程为相邻块元素垂直外边距的合并（外边距塌陷）。解决方法：display:inline-block，即使两个元素都变为行内块级元素。
• 对于两个嵌套关系的块元素，如果父元素没有上内边距以及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。解决方法：给父元素设置边框或者内边距。

盒子模型布局稳定性

• 使用优先级： width > padding > margin

网页设计流程顺序建议

确定结构 -> 布局方式 -> 行内元素？ -> 盒子类型？ -> width/height? -> padding? -> margin?

---

定位（Position）/css3

1. absolute: 绝对定位，脱离文档流的布局，遗留下来的空间由后面的元素填充。相对于最近的父元素定位，否则为body文档本身。
2. relative：相对定位，相对于原本位置定位。不脱离文档流的布局，只改变自身的位置，原先位置会保留空白。
3. fixed：固定定位。类似absolute，但是不随滚动条滚动。
4. static：默认值。忽略top,bottom,left,right和z-index
5. sticky: 粘性定位。

• 配合top,bottom,left,right和z-index使用