CSS盒模型

盒子模型

盒子模型是什么
CSS盒子模型就是在CSS技术所使用的一种思维模型。CSS假定所有的HTML文档元素都生成一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。通过定义一系列与盒子相关的属性，可极大地丰富和促进各个盒子乃至整个HTML文档的表现效果和布局结构。CSS盒子模型由内容区、填充、边框和空白边四部分组成。内容区是盒子模型的中心，呈现盒子的主要信息内容；填充是内容区和边框之间的空间；边框是环绕内容区和填充的边界；空白边位于盒子的最外围，是添加在边框外周围的空间。
盒子模型有标准 W3C 盒子模型和 IE（怪异）盒子模型
1.标准W3C盒子模型
(1)代码块

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            padding: 30px;
            border: 10px solid red;
            margin: 10px;
            background-color: purple;
            /* box-sizing: border-box; */
            box-sizing: content-box;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

(2)执行结果and解释盒子
在这里插入图片描述

(3)由图得：盒子的大小为280*280即（width = 内容区（w）+padding（左右）+border（左右））height一致。

IE 盒子模型
1.手动添加（box-sizing: border-box;）属性，把标准盒模型转换成怪异盒模型
2.执行结果

3.由图得：盒子的大小为200*200即（width = w（内容区+padding（左右）+border（左右）））height也一致。
总结
1.标准盒子模型和怪异盒子模型是可以相互转换的通过box-sizing：属性值；
2.box-sizing默认为标准盒子模型（content-box）
3.怪异盒子模型（ box-sizing: border-box; ）

OVER

本文链接：https://blog.csdn.net/cwq521o/article/details/105534210

智能推荐

CSS盒模型

盒模型拓展到了一些概念，该篇不只是单纯的对怎样产生一个盒模型来介绍的。首先CSS中元素分为块级元素和行内元素从语义上理解块级元素在网页中霸占一行不与其他元素并列。这是CSS中块级元素与行内元素的分类，那么盒子在CSS中用处很多，我们在未转换的情况下只能对块级元素添加盒子，盒子属性：width（宽）、height（高）、padding（填充）、border（边框）、margin（盒子间距）那...

CSS 盒模型

盒模型的定义：盒模型是页面设计和布局时用到一种思维模型。盒模型由，Margin (外边距), Border (边框) ，Padding(内边距／填充) 和Content（内容）组成。其中外边距margin是透明的，不会遮挡周边的其他元素。标准盒模型里，用CSS对元素设置width 和 height 属性时，设置的其实是content 部分的宽和高，元素实际占位空间，还需要加上Pa...

CSS盒模型详解

CSS盒模型常见问题： 1. 基本概念：标准模型+IE模型 2. 标准模型和IE模型区别 3. CSS如何设置这两种模型 4. JS如何设置获取盒模型对应的宽和高 &nbs...

理解CSS盒模型

CSS盒模型是网页布局中一个很重要的概念，在前端面试题中也会经常出现。本文将从以下几个方面讲解CSS盒模型： CSS盒模型的概念标准盒模型和IE盒模型元素的实际宽高计算更改盒模型模式一、CSS盒模型的概念在网页中，所有的HTML元素都可以看做一个盒子。那么CSS盒模型其本质上就是一个盒子，它封装HTML元素，包括：外边距（margin），边框（border），内边距（padding），和...

CSS盒模型

1.元素的分类：HTML的标签元素大体被分为三种不同的类型：块状元素、内联元素（行内元素）和内联块状元素。常用的块状元素有：<div>、<p>、<h1>……<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote&...

CSS盒模型

盒子模型

智能推荐

猜你喜欢