CSS_盒子模型理解笔记

最新推荐文章于 2021-11-05 17:00:20 发布

Sx_Oracle

最新推荐文章于 2021-11-05 17:00:20 发布

阅读量277

点赞数 2

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

本文链接：https://blog.csdn.net/Sx_Oracle/article/details/118726609

版权

CSS_盒模型专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一.概述

在网站的制作或设计中，一个复杂的页面，被我们分成一小块一小块来进行开发丶设计，通过这种划分，把网站的开发化整为零，化繁为简，以达到减少开发的工作，减轻维护压力的目的. 而在网页中，把这种划分后的小块我们来看成一个个的盒子或模块.只有理解了盒子模型我们才能对网页进行更好的排版，更好的编写网站界面.

二.盒子的布局与理解

(1). 盒子模型组成部分说明：

margin：外边距，从边框(border)向外的区域，外边距是透明的.

boder：边框，围绕在内边距与外边距之间的边框.

padding：内边距，从内容与边框之间的空白区域.内边距也是透明的.

content：内容，300*61.950 就是我们盒子的内容，可以显示文本和图像.

(2).教大家怎么来查看到上图.让大家更加直观的看到盒模型

所需工具：VSCode，谷歌浏览器

在新建HTML文件中写入一下代码.
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
</head>

<body>
    <div class="Div1">
        <h5>Content</h5>
    </div>
</body>

</html>
<style>
    .Div1 {
        width: 300px;
        border: 25px solid green;
        padding: 25px;
        margin: 25px;
    }
</style>
2.用谷歌浏览器打开HTML文件,摁下F12后看下图

之后我们就出来了,盒子的模型全貌，我们就可以在下图来好好观察盒模型了

注释：浏览器默认的magin外边距为8px.

三.元素的宽度和高度，以及如何计算总面积.

重要: 当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和外边距.

举个例子吧：我们想要元素的总宽为500px(像素),总高也为500px(像素).

实例：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
</head>

<body>
    <div class="Div1">
        <h5></h5>
    </div>
</body>

</html>
<style>
    .Div1 {
        width: 500px;
        height: 500px;
        border: 25px solid green;
        padding: 25px;
        margin: 25px;
    }
</style>
运行结果：

但是，我们现在所占的地方可不是高500px,宽也500px的地方！让我们自己算算：
500px (宽)
+ 50px (左外边距 + 右外边距)
+ 50px (左边框 + 右边框)
+ 50px (左内边距 + 右内边距)
= 650px

高的计算方式同上.

但是我们现在的总面积是高500px*宽500px,那我们应该怎么来设计呢？
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
</head>

<body>
    <div class="Div1">
        <h5></h5>
    </div>
</body>

</html>
<style>
    .Div1 {
        width: 470px;
        height: 470px;
        border: 5px solid green;
        padding: 5px;
        margin: 5px;
    }
</style>
运行结果如下

现在他的总面积为高500px*宽500px的了,但是Content内容的区域只有470px，所以我们在设计界面时要考虑内边距外边距以及边框后内容所需多少这些问题.

元素的总宽度计算公式如下：

总元素的宽度=宽度+左外边距+右外边距+左边框+右边框+左内边距+右内边距

元素的总高度计算公式如下：

总元素的高度=高度+上外边距+下外边距+上边框+下边框+上内边距+下内边距.

关于兼容问题：

大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和.

虽然有方法解决这个问题，但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。

解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。

四.两种盒子模型的计算方式

w3c的盒子模型： padding 和border 不被包含在定义的 width 和 height 之内. 对象的实际宽度等于设置的width值和border、padding之和，即 ( 元素 width = width + border + padding ) 此属性表现为标准模式下的盒模型.

IE的盒子模型： padding 和 border 被包含在定义的 width 和 height 之内. 对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( 元素 width = 总 width )

注：一般都使用标准的w3c盒子模型，如果需要使用IE的盒子模型，可以使用box-sizing属性进行修改.

w3c的盒子模型

    .Div1 {
        box-sizing:content-box;
        width: 470px;
        height: 470px;
        border: 5px solid green;
        padding: 5px;
        margin: 5px;
    }

IE的盒子模型

 .Div1 {
        box-sizing:border-box;
        width: 470px;
        height: 470px;
        border: 5px solid green;
        padding: 5px;
        margin: 5px;
    }

总结

W3C盒模型是与IE盒模型的区别就是对宽高的定义不同.

W3C认为：宽高是内容区的宽高.

IE认为：宽高是显示效果的实际效果.

Sx_Oracle

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS_盒子模型理解笔记

一.概述在网站的制作或设计中，一个复杂的页面，被我们分成一小块一小块来进行开发丶设计，通过这种划分，把网站的开发化整为零，化繁为简，以达到减少开发的工作，减轻维护压力的目的. 而在网页中，把这种划分后的小块我们来看成一个个的盒子或模块.只有理解了盒子模型我们才能对网页进行更好的排版，更好的编写网站界面.二.盒子的布局与理解(1).盒子模型组成部分说明：margin：外边距，从边框(border)向外的区域，外边距是透明的.boder：边框，围绕...
复制链接

扫一扫

专栏目录