Java网络 2.2 盒模型

盒子中的区域

一个盒子中主要的属性 5 个: width, height, padding, border, margin.

• width (宽度): CSS 中 width 指的是内容的宽度, 而不是盒子的宽度
• height (高度): CSS 中 height 指的是内容的高度, 而不是盒子的高度
• padding (内边距)
• broder (边框)
• margin (外边距)

盒模型的示意图:

代码演示:

认识 width 和 height

一定要知道, 在前端开发工程师眼中, 世界中的一切都是不同的. 比如丈量一个包子多宽? 前端开发工程师, 只会丈量包子馅:

丈量稿纸, 前端开发工程师只会丈量内容宽度:

丈量人脸, 只会丈量五官:

下面两个盒子, 真实占有宽高, 完全相同, 都是 302*302:

<style type="text/css">
        .box1 {
            width: 100px;
            height: 100px;
            padding: 100px;
            border: 1px solid red;
        }

        .box2 {
            width: 250px;
            height: 250px;
            padding: 25px;
            border: 1px solid red;
        }
</style>

真实占有宽度= 左 border + 左 padding + width + 右 padding + 右 border.

这两个盒子的盒模型图, 见下表:

练习

答案:

.box1 {
        width: 400px;
        height: 400px;
        border: 1px solid red;
}

.box2 {
        width: 200px;
        height: 200px;
        padding: 95px;
        border: 6px solid;
}

.box3 {
        width: 0px;
        height: 0px;
        padding: 200px;
        border: 1px solid red;
}

这三个盒子的模型图:

如果想要保持一个盒子的真是占有宽度不变, 那么加 width 就要减 padding. 反之, 加 padding 就要减 width.

认识 padding

padding 就是内边距. padding 的区域有背景颜色, css2.1 前提下, 并且背景颜色一定和内容区域的相同. 也就是说, background-color 将填充所有 boder 以内的区域.

padding 是 4 个方向的, 所以我们能够分别描述 4 个方向的 padding. 方法有两种, 第一种写小属性. 第二种写综合属性, 用空格隔开.

小属性

1. padding-top: 30px;
2. padding-right: 20px;
3. padding-bottom: 40px;
4. padding-left: 100px;

top 上, right 右, bottom 下, left 左.

这时如果不写 padding-left 那么就是没有左内边距. 快捷键就是 pdt, pdr, pdb, pdl 然后按 tab.

综合属性

如果写了 4 个值:

padding:30px 20px 40px 100px;

空格隔开的, 四个数字就是上, 右, 下, 左.

如果只写 3 个值:

padding: 20px 30px 40px;

上, 右, 下, (和右一样).

如果只写 2 个值:

padding: 30px 40px;

上, 右, (和上一样), (和右一样).

也就是说:

padding: 30px 40px;

等价于:

padding-top: 30px;
padding-bottom: 30px;
padding-left: 40px;
padding-right: 40px;

要懂得, 用小属性层叠大属性:

padding: 20px;
padding-left: 30px;

对应的盒模型图:

错误写法:

padding-left: 30px;
padding: 20px;

不能把小属性, 写在大属性前面.

练习

下面的题, 做会了, 说明你听懂了.

第一题

说出下面盒子真实占有宽高, 并画出模型图:

div {
        width: 200px;
        height: 200px;
        padding: 10px 20px 30px;
        padding-right: 40px;
        border: 1px solid #000;
}

真实占有宽度 = 200 + 20 + 40 + 1 + 1 = 262px.

die

div {
        width: 200px;
        height: 200px;
        padding-left: 10px;
        padding-right: 20px;
        padding: 40px 50px 60px;
        padding-bottom: 30px;
        border: 1px solid #000;
}

“padding-left: 10px;” 和 “padding-right: 20px;” 没用, 因为后面的 padding 大属性, 层叠掉了他们.

强调一点, padding-left 不是 padding-left-with.

padding-left:10px; √
padding-left-width:30px; ×

第三题

给出盒模型, 请尝试用最简单的方法写出代码.

div {
        width: 123px;
        height: 123px;
        padding: 20px 40px;
        border: 1px solid #000;
}

第四题

div {
        width: 123px;
        height: 123px;
        padding: 20px;
        padding-right: 40px;
        border: 1px solid #000;
}

一些元素, 默认带有 padding, 比如 ul 标签.

所以, 我们为了开发页面的时候, 便于控制. 总是喜欢清除这个默认的 padding:

*{
    margin: 0;
    padding: 0;
}

* 的效率不高, 所以我们使用并集选择器, 罗列所有的标签 (不用背):

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
    margin:0;
    padding:0
}