05 - 标准盒模型和怪异盒子模型

最新推荐文章于 2024-05-22 16:28:54 发布

xyyojl

最新推荐文章于 2024-05-22 16:28:54 发布

阅读量1k

点赞数

分类专栏：前端 html+css 文章标签：标准盒模型怪异盒模型

本文链接：https://blog.csdn.net/xyyojl/article/details/81254810

版权

前端同时被 2 个专栏收录

32 篇文章

订阅专栏

html+css

21 篇文章

订阅专栏

两种盒子模型

普通盒模型:

这里写图片描述

普通盒模型触发方式:

box-sizing: content-box;

宽高到底怎样计算?

正常情况:(普通盒模型)内容盒子

盒子的整体宽度 = width + border + padding/左border+左padding+width+右padding+右border

盒子的整体高度 = height+ border + padding/上border+上padding+height+下border+下padding

盒子宽高不算上margin外边距,加上margin只是占位符的大小

不会影响内容,先有盒子内容

代码展示:

<head>
    <style>
        .box{
            box-sizing: content-box;/*默认情况 靠文本内容设置宽度和高度*/
            width: 100px;/*设置盒子的内容区域的大小*/
            height: 100px;
            border: 2px solid red;
            padding: 100px;
            margin: 100px;
        }  
    </style>
</head>
<body>
    <div class='box'>123</div>
</body>

怪异盒模型

怪异盒模型: 为了不改变总体布局弄出来的属性
这里写图片描述
怪异盒模型的触发方式:

box-sizing: border-box;

盒子实际占位的宽高,内容区域是?

整体宽度 = width = padding + border + content

整体高度 = height = padding + border + content

从已知的宽度和高度分别减去边框和内边距的宽度才能得到内容的宽度和高度

怪异盒模型里面的padding打过盒子的宽高会把盒子撑大

<head>
    <style>
        .box{
            box-sizing: border-box;/*默认情况 靠文本内容设置宽度和高度*/
            /*盒子大小的设置*/
            width: 100px;/*设置盒子的内容区域的大小*/
            height: 100px;
            border: 10px solid red;
            padding: 10px;
            margin: 100px;
        }

    </style>

</head>

<body>
    <div class='box'>123</div>
</body>

如何让盒子右边距贴合

盒子在水平方向的计算:盒子的实际大小+ 盒子的左margin + 盒子右margin = 大盒子的宽度

margin: 10px 10px 10px auto;/* 把另外3个固定了,剩下那个自适应 */

加载图片经过哪些途径?

发送请求,从服务器当中下载下来,发送请求,服务器响应请求

选择器使用不能直接使用元素选择器

引用图标实现在标题栏上出现一个图标

<link rel='shortcut icon' href='https://www.baidu.com/favicon.ico'>

通俗易懂的两种模型:
padding标准盒模型和怪异盒子模型