<title>
display 設(shè)置inline 顯示為內(nèi)聯(lián)后，div的寬度由其內(nèi)容來(lái)決定，如何想要一個(gè)固定的寬度，顯示可以用"行內(nèi)塊" 為 inline-block,另一個(gè)顯示的值
是"彈性布局（flexble box）","flex"要為父級(jí)元素設(shè)置,flex在這里有自動(dòng)變?yōu)樾袃?nèi)塊的排列，接下來(lái)，設(shè)置"彈性方向",設(shè)置div margin: auto
外邊距自動(dòng),自動(dòng)按照全部寬度進(jìn)行彈性布局
<link rel="stylesheet" href="styles.css">
選擇器篩選規(guī)則，例如 只會(huì)為section內(nèi)既有feature-box又有sales的div類添加樣式
</title>

<style>
    body {
        background: rgb(58,58,58);
        color: white;
        font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
        margin: 0;
        padding: 0;
    }

    header {
        background-color: black;
        background-image: url("images/hero.jpg");
        background-size: 100%;
        background-position: center;
        padding: 20px;
        height: 400px;
        padding: 20px;
        text-align: center;
    }

    header a {
        color: white;
        text-decoration: none;
        text-transform: uppercase;
        margin-top: 40px;
    }

    header .logo a {
        background-color: red;
        background-size: 300px;
        background-repeat: no-repeat;
        display: inline-block;
        height: 80px;
        position: relative;
        text-indent: -99999999px;
        top: -30px;
        width: 300px;
    }

    .features {
        background: white;
        color: gray;
        padding: 20px;
        display: flex;
        flex-direction: row;
    }
   .features figure {
       background-color: blue;
        margin: auto;
        width: 200px;
       text-align: center;
       text-transform: uppercase;
    }

   .features figure img {
       border: 1px solid white;
       border-radius: 50%;
       box-shadow: gray 0 0 10px;
       width: 200px
   }


    ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    li {
        display: inline-block;
        background: gray;
        border-radius: 3px;
        padding: 2px;
        margin-left: 20px;
    }

    li:first-child {
        margin-left: 0;
    }

    a {
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
    }

    footer {
        background: black;
        padding: 10px 20px;
    }
</style>

 <header>
    <nav>
        <ul>
            <li><a href="index04.html">Home</a></li>
            <li><a href="locations.html">locations</a></li>
            <li class="logo"><a href="index04.html">Artisan Bakery logo</a></li>
            <li><a href="contact.html">contact</a></li>
        </ul>
    </nav>
    <h1></h1>
</header>
<section class="features">
    <figure>
        <img src="images/breads.jpg" alt="amazing fresh baked bread">
        <figcaption>Fresh Baked Bread</figcaption>
    </figure>
    <figure>
        <img src="images/coffee.jpg" alt="amazing fresh baked coffee">
        <figcaption>Fresh Baked coffee</figcaption>
    </figure>
    <figure>
        <img src="images/goods.jpg" alt="amazing fresh baked goods">
        <figcaption>Fresh Baked goods</figcaption>
    </figure>
</section>
<section class="feature-box closeouts">
    <div>section d</div>
    <div>section e</div>
</section>
<footer>footer</footer>