CSS盒子模型

CSS盒子模型:只针对block元素或者inline-block元素,也就是可以设置size的元素

CSS盒子模型_第1张图片

 

  1.  在元素上设置的height和width是作用在内容区域的。
  2. background作用在contect + padding的区域。
  3. 盒子模型的size是content + padding + border,也就是盒子占有的空间大小。
  4. margin表示盒子模型距离其他元素的距离。
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .container {
            display: flex;
            height: 100px;
            background: grey;
        }
        .c1 {
            width: 100px;
            background: red;
        }
        .c2 {
            /* margin表示该元素距离其他元素有多远,margin-left 20px表示距离左边元素20px */
            margin-left: 20px;
            /* 计算盒子模型占用空间的大小要加上padding和border */
            padding: 20px;
            border: 5px solid black; 
            /* 直接作用在元素上的height和width是内容的size,内容的size不是整个元素所占用的空间(也就是盒子模型的size),它还要加上border和padding */
            height: 20px;
            width: 200px;
            background-color: blue;
        }
    style>
head>
<body>
    <div class="container">
        <div class="c1">leftdiv>
        <div class="c2">rightdiv>
    div>
body>
html>

CSS盒子模型_第2张图片

 

 

可以看到:

  • 元素的height和width 200 * 20是直接作用在content部分的。
  • background是作用在content + padding区域的
  • 盒子的size即元素占用的空间是加上padding和border的。
  • margin表示该元素距离其他的元素有多远。

你可能感兴趣的:(CSS盒子模型)