html基础点知识

<title>
display 设置inline 显示为内联后，div的宽度由其内容来决定，如何想要一个固定的宽度，显示可以用"行内块" 为 inline-block,另一个显示的值
是"弹性布局（flexble box）","flex"要为父级元素设置,flex在这里有自动变为行内块的排列，接下来，设置"弹性方向",设置div margin: auto
外边距自动,自动按照全部宽度进行弹性布局
<link rel="stylesheet" href="styles.css">
选择器筛选规则，例如 只会为section内既有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>