- Objective:
- Breadcrumb:
# 概念阐释
### content （文字、logo、图片、background-position的细节修改）
- text-indent: px
- text-align:
- vertical-align:
- background-position
### box
- padding: 改变盒子内部，无论怎么修改都不会影响盒子与其它盒子之间的间距
- margin: auto
- 自动平分水平左右的间距
- 必须是块级元素
- 必须要定义盒子的宽度（因为不定义会占满整行，盒子居中就是没意义的条件）
- span元素想要居中，需在外面先有块级元素盒子，然后用position定位才行
<iframe src="https://codepen.io/harryzhu313/pen/MWBwrEZ" width="720" height="400"></iframe>
- margin collapsed: horizontal（相加） vertical（选择最大的）
### 元素定位
{ float：; width: ; height: ; }
{ position: relative,absolute; left: right: top: bottom: }
使用float和position的同时要定义width和height（option），通常用%，有的情况px；
### 网格布局
- 12格布局，把不同大小的格子都写在css里，用哪个直接引用.col属性
- 内嵌网格布局
### 全局修改
{
box-sizing:border-box;
margin:0px;
padding:0px;
}
# 实例
# 相关内容
什么东西不适用于这个概念？哪个更好？有什么区别？
与“”的关系？关联？
与“”的相似指数？
启发了我怎样的思考？
# 问题
1. 在课程38中，为什么menu-item-decrption的文字想要整体宽度缩小时使用了padding调整？为什么不用width？
```html
<div class="menu-item-description col-sm-7">
<h3>Veal with Mixed Vegetables</h3>
<div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorum accusantium exercitationem commodi? Beatae maiores doloribus itaque magni voluptas perferendis consectetur sit rem labore quidem voluptate, rerum magnam accusamus cumque facere?</div>
</div><!-- end col7 -->
```
```css
.menu-item-description {
padding-right: 30px;
}
```
2. 在课程38中，为什么xs时，图片居中用的是`margin：auto`，price居中用的是`text-align`？
# 问题答案
#### 1
- 调整width和height相当于“放大”整个盒子。和margin、padding没有直接关系。
- 比如下方这个图，因为col-md-6这层盒子的大小不变，所以我调整p的宽度80%、90%，显示的margin是相对变化的。
- 所以上述的问题，因为menu-item-description 属于col-sm-7这层盒子。如果我用width的百分比，等于在放大和缩小整个盒子的大小，这很容易影响到它与相邻盒子的位置。
- 那怎样缩小里面内容的宽度？整体调整padding。
#### 2
因为图片的盒子有定义*width*，price的盒子没有定义*width*，沾满整行。
# 参考资料