- Objective: - Breadcrumb: # 概念阐释 - 如果在其他元素外面再加上一个`<div>`元素，相当于加了一个“盒子” ```css <div> <img> <p>$5</p> </div> ``` ```css <div> <p>apple</p> <p>orange</p> <p>banana</p> </div> ``` - 因为`div` 里面嵌入了其他元素，所以这里的**div叫做父级元素**，其它元素叫做子级元素。 - 在css里，只有3个元素只影响外面的盒子`border padding margin`， 其它元素全部可以**继承ingeritance**。 # 实例 <iframe src="https://codepen.io/harryzhu313/pen/GRByxRW" width="720" height="400"></iframe> - 上面的例子中`p` 的样式全部继承于`div`，所以选择器写一个`div`就可以。就像`body`可以改变页面中的所有元素。 - 例子中的`text-align`和`color`控制的是继承元素`p`中的文字。`margin:auto` **只能控制盒子居中，且需要设定width** `text-align`**控制盒子里的内容居中。** - 所以内嵌在`div`中的`p`这个盒子也能居中，但文字仍然不可以，想要文字居中必须是`text-align`。 - `p{text-align:center;}` 可以让apple orange banana文字居中。  # 相关内容 # 参考资料