CSS 框模型(Box Model)

CSS框模型概述
摘自W3SChool
CSS 框模型(Box Model)_第1张图片

说明:
- 元素框的最内部分是实际内容,直接包围内容的是内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。
- 内边距、边框和外边距都是可选的、默认值是零(那么此时元素的宽和高就是盒子的宽和高
- 在css中,width和height指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸

用div来分析

CSS代码:


<html>
    <head>
        <meta charset="utf-8" />
        <title>title>
        <style type="text/css">
            #outer{
                border: 5px solid blue;
                width: 650px;
                height: 400px;
            }
            #inner{
                border: 5px solid red;
                width: 640px;
                height: 390px;
            }
        style>
    head>
    <body>
        <div id="outer">
            <div id="inner">
                <img src="img/雏田女神.png"/>
            div>

        div>
    body>
html>

效果如下:
CSS 框模型(Box Model)_第2张图片
说明:
1、有两个div,id分别为outer、inner,蓝色的包裹着红色的,将两个div的边框的宽度都设置为5px,内边距外边距都没设置,所以都默认为零。
2、外面的div(outer)设置的宽和高分别为650px、400px
3、里面的div(inner)设置的宽和高分别为640px、390px,也就是说里面div(inner)的宽度加上左右两边的边框宽度等于650px,就是外面的div(outer)设置的宽度,高度也一样。
4、也就是说此时外面div(outer)设置的宽度和高度,就是边框里面所有区域的宽高。就是红色框框部分的区域,包括红色边框。
下面设置一下div(outer)的内边距

#outer{
                border: 5px solid blue;
                width: 650px;
                height: 400px;
                padding-left: 50px;
            }

效果如下:
CSS 框模型(Box Model)_第3张图片

这里就可以验证这句话:在css中,width和height指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。
所以,如果想维持住一个div的大小,就需要保证,元素宽度+左右内边距为固定值,元素高度+上下内边距为固定值

你可能感兴趣的:(CSS)