css盒模型和定位

最新推荐文章于 2023-07-22 14:52:35 发布

周运金

最新推荐文章于 2023-07-22 14:52:35 发布

阅读量370

点赞数

分类专栏： css html 文章标签： css html 盒子模型

本文链接：https://blog.csdn.net/qq_27552077/article/details/61423586

版权

html 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

一、CSS盒模型
盒模型在CSS当中是非常重要的，同时也是非常基础的东西。但是有一些开发人员往往会忽略其中的细节问题。
首先什么是盒模型呢？可以打开firebug的布局功能项看到：
这里写图片描述
这就是一个盒模型。里面有内容的长宽、内边距、边框、外边距。相对应的css属性是：width/height、padding、border、margin。这几个属性从内到外，一级一级包围.
来一个具体的代码和效果看一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>style</title>

    <style>
        #div{
            width:100px;
            height:100px;
            padding:10px;
            border:10px solid black;
            margin-bottom: 10px;
            background:blue;
        }
        #div2{
            width:50px;
            height:50px;
            background:red;
        }
    </style>
</head>
<body>
    <div id="div">

    </div>
    <div id="div2">

    </div>
</body>
</html>

这里写图片描述
从可以很清晰地看出每个属性所体现的效果。
但是你猜一下盒子的大小为多少？
结果如图：

140px *140px，也就是说不包括margin的值，那可以得出以下结论了：
盒子的大小包括：width/height、padding、border并不包括margin的值。其实想想也是，margin是用来与元素旁边的块状元素进行分隔，如果这个算进盒子里面那么盒子的大小就有点界定模糊了，因为当两个块状元素都定义了相邻的margin值的话浏览器会采用较大的那个margin值，最终的结果是那个难以界定盒子的大小。

我们再来看这一种情况：前面的代码不变，#div里面加一个属性：
box-sizing:border-box;
看一下效果：
这里写图片描述
结果是不是很奇怪，当定义这个属性之后，盒子的大小就变成了width/height的大小了。这个就是怪异模型,怪异模型会让盒子的实际大小按照所给的width/height去设置，这个在设置两个并列的块状元素的时候很有用，因为这时候不用去考虑border和padding影响，而我们默认的模型是标准模型(box-sizing:content-box)，其中的长和宽只是content里面的长和宽。

二、定位
postion有四个值：
static、relative、absolute、fixed
1、static
默认值，在这种情况下left、top、right、bottom、z-index
是不起作用的。这个没有什么好说，就是默认情况。

2、Relative
从字面上的意思可知，这是一个相对布局，而相对的参考就是元素本身的位置，但是要注意的是，当元素移动之后原来的位置没有脱离文档流（将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流，其实就是该在什么位置就在什么位置，其中absolute和fixed是脱离文档流的）。也就是还占据着那个位置。

    #div{
            width:100px;
            height:100px;
            padding:10px;
            border:10px solid black;
            margin-bottom: 10px;
            background:blue;
            position: relative;
            left: 50px;
            top:20px;
            /*box-sizing:border-box;*/
        }

修改一下上面的代码，测试一下结果：
这里写图片描述

就是这种效果，左边有一块空出来的其实是被原来的位置占用了。

3、绝对定位
把上面#div代码改成绝对定位的话，那么#div就会脱离文档流了，效果如下：
这里写图片描述

可以看到小块的顶上去了，大块的浮起来了，说明已经脱离了文档流了。绝对定位left、right、top、bottom相对的是有位置定位(position为除了static之后的定位)的父元素，如果没有父元素具有定位，那么就以body为参考。比如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>style</title>

    <style>
        #div{
            width:100px;
            height:100px;
            padding:10px;
            border:10px solid black;
            margin-bottom: 10px;
            background:blue;
            position: absolute;
            left: 50px;
            top:20px;
            /*box-sizing:border-box;*/
        }
        #div2{
            width:50px;
            height:50px;
            background:red;
            margin-top:15px;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="div">
        <div id="div2">

        </div>
    </div>
</body>
</html>

这里写图片描述
这次我把小div放进大的div，这样就是相对于大的body，当我把大的div的position设置为absolute呢

这里写图片描述
这时候就是以大的div为参考了。

4、fixed就很好理解了
可以理解为以body为参考的absoult，它不会去在意父元素是什么，我行我素，你left/top/right/bottom给我多少我就多少，超出了浏览器就会出现滚动条。同时fixed也是脱离文档流的控制高低的方法是用z-index；
如果没有设置
z-index采取后来居上的原则。
对于父子关系的元素，如果定义了父亲的z-index而且不为auto，儿子肯定在父亲上面，当父亲不设置z-index或者为auto然后再设置儿子z-index为负值就下去了。如：

#div{
            width:100px;
            height:100px;
            padding:10px;
            border:10px solid black;
            margin-bottom: 10px;
            background:blue;        
            left: 50px;
            top:20px;
            position: absolute;
            /*box-sizing:border-box;*/
        }
        #div2{
            width:50px;
            height:50px;
            background:red;
            top:50px;
            left: 50px;
            position: absolute;
            z-index: -1;
        }

这里写图片描述
这样的话只能通过firebug调试工具才发现小的div的位置。

总结
css的盒模型由content(内容)、padding(内边距)、border(边框)、margin(外边距)组成。
在w3c和模型中，设置的width/height是content的宽度/高度，在怪异模式中width/height设置的是content+padding+border宽度/高度。
在w3c盒子模型中盒子的大小由content、padding、border决定，在在怪异模式中盒子大小由width和height决定。
定位有四个值static(静止)、relative(相对)、absolute(绝对)、fixed(固定)。
left、top、right、bottom、z-index不能对static起作用。

周运金

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css盒模型和定位

一、CSS盒模型盒模型在CSS当中是非常重要的，同时也是非常基础的东西。但是有一些开发人员往往会忽略其中的细节问题。首先什么是盒模型呢？可以打开firebug的布局功能项看到：这就是一个盒模型。里面有内容的长宽、内边距、边框、外边距。相对应的css属性是：width/height、padding、border、margin。这几个属性从内到外，一级一级
复制链接

扫一扫

专栏目录