CSS3: 盒模型-优快云博客

本文链接：https://blog.youkuaiyun.com/u012872771/article/details/103666545

本文探讨了IE6盒模型与标准盒模型的区别，通过实例代码展示了两种盒模型下元素尺寸的计算方式。重点讲解了在特定场景下，如导航栏布局，如何利用IE6盒模型解决元素尺寸问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

IE6盒模型

标准盒模型

ie6盒模型宽度由width决定（content、padding、margin都在里面），标准盒模型由width+border+padding决定。

        <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>盒模型</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 10px solid orange;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

标准盒模型

ie6盒模型的使用之处:

比如我有一个导航栏，这个导航栏中的ul不能变，但是li中要增加border,这里ul就会被挤换行，所有我们需要使用ie6盒模型。

定义显示方式 box-sizing: content-box(标准) | border-box(ie6)

        <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>盒模型</title>
    <style>
 nav {
 display: block;
 margin: 0 auto;
 width: 302px;
        }
 ul {
 display: inline-block;
 width: 300px;
 height: 40px;
 margin: 10px auto;
 border: 1px solid #ff2d51;
 font-size: 0;
 padding: 0;
        }
 li {
 width: 100px;
 height: 40px;
 line-height: 40px;
 display: inline-block;
 font-size: 16px;
 text-align: center;
 border: 2px solid #44cef6;
 box-sizing: border-box;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li>标题1</li>
            <li>标题2</li>
            <li>标题3</li>
        </ul>
    </nav>
</body>
</html>

其他好玩的东西:

使用outlink改变input的外边框

        <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>盒模型</title>
    <style>
 div {
 width: 164px;
 margin: 0 auto;
        }
 input {
 height: 35px;
 width: 160px;
        }
 input:focus {
 outline: #44cef6 2px solid;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" placeholder="请对焦时看我的外边框">
    </div>
</body>
</html>