css盒子模型、display属性

最新推荐文章于 2025-05-16 23:31:53 发布

原创最新推荐文章于 2025-05-16 23:31:53 发布 · 1.7k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css

前端基础入门同时被 2 个专栏收录

22 篇文章

订阅专栏

css/css3

15 篇文章

订阅专栏

本文详细介绍了CSS中的盒子模型，包括高和宽设置、边框、内边距和外边距的调整，以及盒模型的计算方式。特别提到了在不同浏览器环境下max-width和min-width的兼容性问题。此外，还深入探讨了display属性，指出行内元素无法设置垂直方向的margin。

<html>
    <head>
        <meta charset="UTF-8">
        <title>display属性</title>
        <style type="text/css">
          /*样式补充*/
          *{
            margin: 0;
            padding: 0;
            font-family: "宋体";
          }
          .big{
            width: 150px;
            background-color: #f2f4f6;
            text-align: center;
            margin: 0 auto;
          }
          .div1,.div2,.div3{
            width: 100%;
            border-bottom: 1px solid #d9dde1;
          }
          ul{
               display: none;
              background-color: white;
              border:1px solid #d9dde1;
              line-height: 2em;
          }
          li{
            list-style: none;
          }
       .div1:hover ul{
            display: block;
          }
        .div2:hover ul{
            display: block;
        }
        .div3:hover ul{
            display: block;
        }
        </style>
    </head>
    <body>
    <div class="big">
        <div class="div1">
            <h3>家电</h3>
            <ul class="elec">
                <li>冰箱</li>
                <li>洗衣机</li>
                <li>空调</li>
            </ul>
        </div>
        <div class="div2">
            <h3>洗护</h3>
            <ul class="wash">
                <li>洗衣液</li>
                <li>消毒液</li>
                <li>柔顺剂</li>
            </ul>
        </div>
        <div  class="div3">
            <h3>衣物</h3>
             <ul class="clothes">
                <li>衬衫</li>
                <li>裤子</li>
                <li>卫衣</li>
            </ul>
        </div>
      </div>
</body>
</html>