css-盒子模型

总结：

  • 盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。

  • 盒子里面的文字和图片等元素是 内容区域

  • 盒子的厚度 我们成为 盒子的边框

  • 盒子内容与边框的距离是内边距（类似单元格的 cellpadding)

  • 盒子与盒子之间的距离是外边距（类似单元格的 cellspacing）

 

 

 

 

 

 

 

 

 

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
    <style>

        /* div{
            width: 300px;
            height: 400px;
            border: springgreen 3px solid;
        }
        input{
            width: 300px;
            height: 40px;
            border: rgb(119, 0, 255) 3px solid ;
            outline: none;
            border-radius: 15px;
        } 
        */
        /* div{
            width: 100%;
            height: 50px;
            border-top: orange 3px solid;
            border-bottom: black 2px solid;
        } */
        ul{
            width: 100%;
            height: 50px;
            display: inline-block;
            border-top: orange 3px solid;
            border-bottom: black 2px solid;
        }
        li{
            display: inline-block;
            height: 50px;
            text-align: center;
        }
        a{
            padding: 10px;
            color: black;
            width: 100px;
            height: 30px;
            text-align: center;
            text-decoration:none;
            display: inline-block;
            font-size: 16px;
        }
        a:hover{
            background-color:dimgray;
            color: fuchsia;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li><a href="#">设置首页</a></li>
            <li><a href="#">手机新浪网</a></li>
            <li><a href="#">移动客户端</a></li>
            <li><a href="#">博客</a></li>
            <li><a href="#">微博</a></li>
            <li><a href="#">关注我</a></li>
        </ul>
    </div>

    <!-- <div>

    </div>
    <input type="text"> -->
</body>
</html>
复制代码

  • 宽度

    Element Height = content height + padding + border （Height为内容高度）

  • 高度

    Element Width = content width + padding + border （Width为内容宽度）

  • 盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框

 

 

 

 

外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

(1). 相邻块元素垂直外边距的合并

  • 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom

  • 下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和

  • 取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

解决方案：尽量给只给一个盒子添加margin值。

(2). 嵌套块元素垂直外边距的合并（塌陷）

  • 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框

  • 父元素的上外边距会与子元素的上外边距发生合并

  • 合并后的外边距为两者中的较大者

解决方案：

  1. 可以为父元素定义上边框。

  2. 可以为父元素定义上内边距

  3. 可以为父元素添加overflow:hidden。

还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题，后面咱们再总结。。。

 

复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻列表综合案例</title>

    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .box {
            width: 300px;
            height: 226px;
            border: 1px solid #777573;
            margin: auto;
            margin-top: 10%;
            padding: 10px;
            background-image: url(./16-综合案例-新闻列表/images/line.jpg);
        }
        h2{
            border-bottom: 1px solid #b6b3af;
        }

        li {
            /* 去掉默认样式 */
            /* 文字垂直居中：
            height: 30px;
               line-height: 30px;
               这两个值相等即可 */
            padding-top: 10px;
            height: 30px;
            padding-left: 20px;
            list-style: none;
            background: url(./16-综合案例-新闻列表/images/arr.jpg) no-repeat 5px center;
            /* 下边框虚线 */
            border-bottom: 1px dashed #ccc;
        }

        a {
            padding-left: 5px;
            color: black;
            text-decoration:none;
        }
        a:hover{
            color: rgb(162, 162, 170);
        }
    </style>
</head>

<body>

    <div class="box">
        <!-- 标题盒子 -->
        <h2>最新文章/New Articles</h2>
        <!-- 列表盒子 -->
        <ul>
            <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
            <li><a href="#">体验javascript的魅力</a></li>
            <li><a href="#">jquery世界来临</a></li>
            <li><a href="#">网页设计师的梦想</a></li>
            <li><a href="#">jquery中的链式编程是什么</a></li>
        </ul>
    </div>

</body>

</html>
复制代码

去掉列表默认的样式

无序和有序列表前面默认的列表样式，在不同浏览器显示效果不一样，而且也比较难看，所以，我们一般上来就直接去掉这些列表样式就行了。 代码如下

li { list-style: none; }

 

posted on   白嫖老郭  阅读(231)  评论(0)  编辑  收藏  举报

编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南

导航

< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示
AI IDE Trae