笔记创作

标题：「理解 CSS」第四届字节跳动青训营 - 前端专场｜ 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第2天

`

css-por

<style>
    html {
        background: rgb(17, 17, 17);
        color: #fff;
    }
    
    #div1 {
        font-size: 20px;
        width: 10em;
        /* overflow-wrap: break-word; */
        background: #411;
        line-height-step: 10px;
    }
    
    em {
        display: inline-block;
        width: 3em;
        background: #33c;
    }
    
    span {
        line-height: 3;
        border: 2px solid red;
        background: coral;
    }
    
    #div2 {
        line-height: 1.5;
        background: lime;
    }
    
    .container {
        background: rgb(97, 141, 117);
    }
    
    .box {
        display: none;
        float: left;
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 100px;
        background: red;
    }
    
    img {
        float: left;
    }
    
    nav {
        position: fixed;
        line-height: 3;
        background: rgb(78, 9, 206, 0.3);
        width: 100%;
    }
</style>

<nav>
    <a href="#">首页</a>
    <a href="#">导航一</a>
    <a href="#">导航二</a>
</nav>
<main>
    <section>1</section>
    <section>2</section>
    <section>3</section>
    <section>4</section>
    <section>5</section>
    <section>6</section>
</main>


<section>
    <img src='https://i.niupic.com/images/2022/07/25/a1am.png' height='100' width='200' alt='Big Boat' />

</section>

<div class="container">
    <div class="box"></div>
    <p>段落内容段落内容 1</p>
    <p>段落内容段落内容 2</p>
    <p>段落内容段落内容 3</p>
    <p>段落内容段落内容 4</p>
</div>



<span>
    This is a text and
    <div id="div2">block</div>
    and other text.
</span>


<div id="div1">

    This is a paragraph of text with long word Honorificabilitudinitatibus. Here is an image
    <img src="https://assets.codepen.io/59477/cat.png" alt="cat"> And <em>Inline Block</em>
</div>

`