CSS 的盒子Day03(2)

在Web 开发中, CSS 盒子模型是指如何在浏览器引擎中对 HTML 元素进行建模和如何从CSS属性导出 HTML 元素的尺寸。 [3]盒模型的指导方针由 Web 标准万维网联盟 (W3C)特别是 CSS 工作组描述。在 20 世纪 90 年代末和 2000 年代初的多数时间里,主流浏览器中存在着不符合标准的盒模型的实现。直到1998 年CSS2的出现,引入了box-sizing属性,这个问题基本上才得到了解决。

所有 HTML 元素都可以被视为“框”,其中包括div标签、 p标签或a标签。

每个盒子都有五个可修改的尺寸:
height和width是指盒子实际内容的尺寸(文本、图像……)
padding是指该内容与框边框之间的空间
border是指是围绕框的任何类型的线(实线、点线、虚线…)(如果存在
margin是指是边框周围的空间
1996 年,W3C 成功发布,之后在1999 年,对 CSS1 规范进行了修订。当为任何块级元素显式特定的宽度或高度时,它只能确定可见元素的宽度或者高度、paddingborder、以及随后应用的边距。 [4] [5]在 CSS3 发布之前,这种盒模型被称为W3C 盒模型,之后它又被称为content-box

( 1 ) 框的总宽度可以被计算为为:left-margin + left-border + left-padding + width + right-padding + right-border + right-margin
( 2 ) 盒子的总高度可以被计算为:top-margin + top-border + top-padding + height + bottom-padding + bottom-border + bottom-margin

CSS 的盒子

  • 设计一个 “ 盒子 ”

设计一个 “ 盒子 ”

既然是盒子,那一定是用于区分于其他具有某种属性的“模块”

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画一个CSS盒子title>
    <style>
    .aqua{
      width: 100px;
      height: 100px;
      background-color: aqua;
    }

    .lightgreen{
      width: 200px;
      height: 200px;
      background-color: lightgreen;
    }
  style>
  head>

  <body>
    <div class="aqua">Div1div>
    <div class="lightgreen">Div2div>
  body>
html>

CSS 的盒子Day03(2)_第1张图片

你可能感兴趣的:(HTML+CSS+JS,css,前端,1024程序员节)