HTML5基础加强css样式篇（css属性：怪异盒模型解析）（四十六）

最新推荐文章于 2024-08-06 14:46:11 发布

咸鸭蛋炒饭

最新推荐文章于 2024-08-06 14:46:11 发布

阅读量1.7k

点赞数

分类专栏： HTML5基础篇文章标签： css html5 经验 css3

本文链接：https://blog.csdn.net/u010853130/article/details/69569491

版权

HTML5基础篇专栏收录该内容

121 篇文章 7 订阅

订阅专栏

1.怪异盒模型和border有关：

设置border宽度可以影响其他元素的布局：但是在IE5及以下里面只是影响其子元素；

2.可以同时设置 box-sizing属性来使用这一特性，是其改变border宽度也不影响其他元素；

3,.box-sizing:简单理解就是盒子大小基于什么计算的;

2.使用如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box-wrapper {
            margin: 100px 0 0 100px;
            width: 600px;
            height: 500px;
            background-color: orange;
        }
        .box{
            height: 200px;
            width: 200px;
            float: left;
        }
        .box-1{
            background-color: pink;
        }
        .box-2{
            background-color: #00f;
            border: 10px solid yellow;
            /*当设置边框，或者内边距导致元素大小改变时，不期望所占有的空间变化*/

            box-sizing: border-box;
            /*默认值 content-box 宽高基于文本盒子计算 */
            /*box-sizing: content-box;*/

            /*计算宽高 ： 盒子的边框+内边距+内容区*/

            padding: 10px;
        }
        .box-3{
            background-color: green;
        }
 
    </style>
</head>
<body>

<div class="box-wrapper">
    <div class="box box-1"></div>
    <div class="box box-2">Hello</div>
    <div class="box box-3"></div>
</div>

<script type="text/javascript">
</script>
</body>
</html>