Day8 Html常用标签_3

区块div

区块的概念在网页里十分重要，当我们要针对特定的地方做CSS设定时，就会用到区块的概念。可以把它想像成一个矩形的范围，针对这里面的范围去做设定。而网页就是由很多很多的矩形所构成的。

假设今天有一标题h1跟段落p，我想要设定h1跟段落p这个范围里是蓝色的

<body>
    <div style="background-color: blue;">
        <h1>我想要在这个范围里是蓝色</h1> 
        <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        </p>
    </div>
</body>

行内元素span

div跟span常常拿来比较，因为他们都是一个范围的性质，而差别在哪呢?span是用在当你想要在一个小区域内设定、或是你不想要占用到整个栏位时。

<body>
    <div style="background-color: blue;">
        <h1>我想要在这个范围里是蓝色</h1> 
        <p>内容内容内容内容内容 <span style="background-color: red;">内容内容内容内容内容内容内容内容内容内容内容内</span>容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        </p>
    </div>
</body>

你可以对里面的内容作设定，而不会像div设定会占用到整拦导致换行。

<body>
    <div style="background-color: blue;">
        <h1>我想要在这个范围里是蓝色</h1> 
        <p>内容内容内容内容内容 <span style="background-color: red;">内容内容内容内容内容内容内容内容内容内容内容内</span>容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容
            <div style="background-color: aqua;">内容内容内容内容内容内容内容内容内容内容内容内</div> 容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        </p>
    </div>
</body>