[分享]css3块级元素

在前端开发中，CSS是不可避免的一部分。CSS3作为CSS的一种版本，具有更多的新特性及引入了一些新的概念。其中块级元素是CSS3中一个非常重要的概念。 块级元素 1、独占一行 2、可以设置宽高，pa...

在前端开发中，CSS是不可避免的一部分。CSS3作为CSS的一种版本，具有更多的新特性及引入了一些新的概念。

其中块级元素是CSS3中一个非常重要的概念。

 块级元素
  1、独占一行
  2、可以设置宽高，padding，margin
  3、可以容纳内联元素和其他块级元素 

常见的块级元素包括p、h1-h6、div、ul、li等。

举例来说，当我们设置一个div元素的宽度为100px，高度为50px时，这个div元素就会占据页面中独立的一行，并且宽度和高度会按照我们的设置呈现。

 div {
    width: 100px;
    height: 50px;
    background-color: #333333;
    padding: 20px;
    margin: 10px;
  } 

同时，我们还可以在div元素中嵌套其他的块级元素和内联元素，比如：

 <div>
    <p>这是一个段落标签。</p>
    <ul>
      <li>这是一个列表项</li>
      <li>这是另一个列表项</li>
    </ul>
  </div> 

在这个例子中，我们在div元素内容中嵌套了一个p标签和一个ul标签。p标签是一个块级元素，所以它会独占一行。而ul元素包含的两个li元素是内联元素，所以它们会出现在同一行。

总的来说，块级元素是CSS3中一个非常重要的概念，它们具有独占一行、设置宽高、容纳其他元素等特性，是网页布局中不可或缺的一部分。通过灵活地使用块级元素，我们可以轻松地创建出美观、实用的网页。