需求说明

完成这部分作业需要了解CSS box model

按照下列要求补全 style/index.css, 完成每一步之后观察页面有什么变化，最后与mockups文件夹下的mockup图片对比，看是否一致

注意：不要修改或删除任何现有的HTML和CSS代码

• 设 #banner 高度为350px.
• 给 h1 添加 border style, 样式参考mockup.
• 设置 h3 border 样式参考mockup.
• 设置 .navigation li elements to have 10 pixels of padding.
• 设置 .share a elements to have 14 pixels of padding.
• 设置每个段落向上 margin 为 40 px.
• 设置 .share a margin 为 10 px.
• 使用简写, 设置 h3 上下 margins 30 px, 左右 margins 20 px.
• 使用简写, 设置 h3 上下 padding 20 px, 左右 padding 30 px.
• 设置 .pull-quote 的宽度为 400 px. 并且通过 margin 使其水平居中.
• 设置 #main 的 margin 使其内容水平居中 .
• 设置 #main 宽度为500px, 高度为800px, 并且超出可以滚动.
• 重置 body 的 margin and padding default values.
• 隐藏 .global

本练习知识点

• The box model comprises a set of properties used to create space around and between HTML elements.
• The height and width of a content area can be set in pixels or percentage.
• Borders surround the content area and padding of an element. The color, style, and thickness of a border can be set with CSS properties.
• Padding is the space between the content area and the border. It can be set in pixels or percent.
• Margin is the amount of spacing outside of an element’s border.
• Horizontal margins add, so the total space between the borders of adjacent elements is equal to the sum of the right margin of one element and the left margin of the adjacent element.
• Vertical margins collapse, so the space between vertically adjacent elements is equal to the larger margin.
• margin: 0 auto horizontally centers an element inside of its parent content area, if it has a width.
• The overflow property can be set to display, hide, or scroll, and dictates how HTML will render content that overflows its parent’s content area.
• The visibility property can hide or show elements.