CSS盒子（Box）模型入门

论您是CSS的新手还是经验丰富的老手，了解和理解box模型都很重要。让我们更好地了解它。

每个初学者都应该从基础开始。以CSS为例，基础是学习Box模型。在继续学习其他CSS概念之前，您应该首先掌握它!

盒子（Box）模型是CSS的基本元素。

它确实会让初学者感到困惑，所以现在是时候纠正错误了。在这里，您将了解box模型的所有基本元素以及它们是如何使用的。

在深入研究之前，每个人都需要了解web设计中的每个元素都是一个矩形框。您可能已经听过很多次了，但是这是每个开发人员都应该注意的一个重要概念。

现在，让我们来解释一下神秘的盒子模型!

盒子模型结构

如上所述，box模型的结构包括：

Content (height and width).

Padding.

Border.

Margin.

这些是浏览器呈现框模型所需的所有元素。值得庆幸的是，有了CSS，我们可以单独地控制它们。让我们来看看。

在本文中，我们将使用以下代码并逐渐添加到其中。

HTML

<div class="box">Lorem ipsum dolor amet whatever woke cronut, 
farm-to-table church-key tousled edison bulb. </div>

CSS

.box {
 background-color: hotpink;
 color: #fff;
}

The Content

Content非常清晰。它是具有特定宽度和高度的元素的内容。可以使用CSS属性的高度和宽度设置固定的高度和宽度，也可以由内容本身决定。

现在，有一件事让人有点困惑，那就是使用内联或块级元素。

使用内联和块级元素（Using Inline and Block Level Elements

）

为了刷新您的内存，内联元素和块元素之间的区别在于块元素占用了容器宽度的100%，而内联元素只占用了内容需要的空间量。

在使用内联元素时，不可能为该元素设置固定的宽度或高度，因为元素没有预先确定的宽度和高度(因为宽度和高度由内容决定)。这可以通过将元素转换为块元素来克服。

与内联元素不同，使用块级元素时，可以轻松地为其设置固定的宽度或高度。由于在默认情况下，块级元素占容器宽度的100%，我们可以通过设置一个固定的宽度轻松覆盖它。

您还可以将元素转换为inline-block。当使用inline-block时，元素具有内联元素的行为(只占用内容的空间)，但是您可以像使用块元素那样操作它。

现在，当我们有一个块级元素时，我们可以给它一个宽度和高度。

CSS

.box {
 height: 200px;
 width: 200px;
 background-color: hotpink;
 color: #fff;
}

结果如下图：

The Padding

接下来，我们将在我们的框中添加一些填充。

padding定义了内容和框的边缘之间的空间。

让我们看看它在我们的例子中的作用

CSS

.box {
 height: 200px;
 width: 200px;
 background-color: hotpink;
 color: #fff;
 padding: 10px;
}

结果如图:

在图像中，我们看到padding如何影响框的整体外观。框的内容和四边都有10px的空间。我们也可以向四面八方单独添加padding,使用padding-top padding-bottom,padding-left padding-right。

The Border

因为我们是从内到外，下一步就是定义border。border围绕着内容，您不必使用它，但它仍然存在。这意味着border的宽度为0。

现在我们添加一个边框。

CSS

.box {
 height: 200px;
 width: 200px;
 background-color: hotpink;
 color: #fff;
 padding: 10px;
 border: solid 3px black;
}

The Margin

框模型的最后一个方面是margin。正如你们所知道的，margin是border外的空间。它是元素之间的空间。

在实际示例中演示这一点的最佳方式是向您展示两个元素是如何放置的，以及如何使用和不使用margin边距。

HTML

<div class=”box”></div>
<div class=”box”></div>

CSS

.box {
 height: 200px;
 width: 200px;
 background-color: hotpink;
 color: #fff;
 padding: 10px;
 border: solid 3px black;
 margin: 0
}

在这个例子中，我们看到，没有边距，两个元素是如何结合在一起的，它们之间没有空间。

现在，添加margin

CSS

.box {
 margin: 20px;
}

现在,这看起来更好。我们在Box之间增加了一些空间。我们还可以使用margin - top、margin - bottom、margin - left或margin - right来单独添加元素的每一侧上的空间。

总结

恭喜，你终于完成了这篇文章!那么，我们学到了什么?

网页上的每个元素基本上都是一个框。

box模型的方面是content, padding, border, and margin.。

使用内联元素时，不能为该元素设置固定的宽度或高度，而使用块和内联块元素则可以。

希望这能帮助你学到一些新的东西或者刷新你的记忆。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    /*总体的样式*/
    <style>
    	/*盒子样式*/
        #box{
            width: 350px; //宽
            height: 450px; //高
            border: 1px solid black; //边框
            border-radius: 10px; //边框弧度
            font-family: 黑体; //字体
            letter-spacing:8px; //段间距
            word-spacing: 10px; //字间距
            line-height: 40px; //行高
            font-size: 18px; //字大小
            padding: 20px; //内边框
        }
        /*给'注册'赋予样式*/
        .register{
            width:280px ; //宽
            height: 50px; //高
            background-color: skyblue; //背景颜色
            border-radius: 10px; //边框弧度

        }
        /*将所有边框都改变*/
        *{
            border-radius: 5px; 边框弧度
        }
        /*使用class选择器，赋予number宽高和边框*/
        .number{
            width: 185px; //宽
            height: 27px; //高
            border-width: 1px; //边框宽度

        }
        /*id选择器*/
        #two{
            width: 55px; //宽
            border-width: 1px; 边框宽度
        }
        /*id选择器*/
        #phone{
            width: 103px; //宽
        }
        /*class 选择器*/
        .boxs{
            zoom: 75%; //清除浮动
            color: darkgray; //颜色
        }
        /*class选择器*/
        .box_a{
            width: 50px; //宽
            height: 50px; //高
            background-image: url("../image/04.jpg "); //背景图片
            background-repeat: no-repeat; // 是否平铺
            background-size: 50px 25px; //背景尺寸
            position: relative; //定位 相对定位
            left: 310px; //定位后左移
            bottom: 32px; //定位后下移

        }
    </style>
</head>
<body>
<div id="box">
    <h1>请注册</h1>
<p style="color: darkgray">已有帐号?<a href="https://im.qq.com/index">登录</a></p>
<form action="" method="post">
    <label for="name">用户名</label>
    <input type="text" placeholder="请输入用户名" id="name" class="number"> <br>
    <label for="phone">手机号</label>
    <select name="" id="two" class="number">
    <optgroup>
        <option style="" class="">+86</option>
    </optgroup>
    </select>
    <input type="text" placeholder="请输入手机号" id="phone" class="number"> <br>
    <label for="mima">密 码</label>
    <input type="password" placeholder="请输入密码" id="mima" class="number"> <br>
    <label for="mima">验证码</label>
    <input type="password" placeholder="请输入验证码" id="is" class="number">
    <div class="box_a"></div>
    <div class="boxs">
        <input type="radio" id="" class="accept">阅读并接受协议<br>
    </div>
    <input type="submit" value="注册" class="register" >

    </form>
</div>


</body>
</html>
在这里插入图片描述

)CSS 标准盒子模型(Box Model)

在网页中所有HTML元素可以看作盒子,在CSS中,"box model"术语是用来设计和布局时使用的;CSS盒模型本质上是一个盒子,封装周围的HTML元素包括:外边距(margin)边框(border)内边距(padding)实际内容(content)四个属性,所以布局时每个元素所占的总宽高是这4个属性的总和;比如宽度:总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

1.1Margin(外边距)清除边框外的区域,外边距是透明的

1.2Border(边框)围绕在内边距和内容外的边框

1.3Padding(内边距)清除内容周围的区域,内边距是透明的

1.4Content(内容)盒子里填充的内容比如文本,图像等

标准盒子模型

宽度为100px的div

根据盒子模型得出该元素的总宽度为:100+(20+20)+(15+15)+(15+15)(由里至外)因此如果想在此div中放置一个宽度为100px的元素,此元素的总宽度必须小于等于100px

2)DIV+CSS布局

Div+CSS布局就是将网页内容用<div>分割为块,之后使用css设置每个块的大小,位置等

DIV+CSS布局最重要的是灵活运用float(浮动)属性,其值:1)left 2)right 3)both

clear属性作用是清除浮动,其值为:1)left 2)right 3)both

d2向右浮动 float:right

因为div是块级元素,如果都没有脱离文档流div就会按照从上到下的顺序放置

d2设置为右浮动其他两个div位置的变化:

1)d1没有脱离文档流会占据一行,所以d2只能浮动到d1下面的右面如上图所示

2)d2脱离文档流,d3自动填充到d2的位置

d1,d2全部设置为右浮动

1)当d1,d2都设置为右浮动时:因为css中d1在d2上面先设置,因此d1在右侧,如果d2在d1上面先设置样式,则d2在右侧,d1在左侧,自己测试不再截图

2)当d1,d2都设置为右浮动时:d3就会跑到上图中d2的位置

3)如果3个div都设置左或右浮动,当3个width加一起<=100%就会在第一行显示(d1,d2,d3)

 <style type="text/css">
      #d1 {
      margin: 0px;
      background-color: red;
      padding: 0px;
      width: 50%;
      height: 100px;
      float:right; 
    }
    #d2 {
      margin: 0px;
      background-color: yellow;
      padding: 0px;
      width: 50%;
      height: 100px;
      float:right; 
    }
    #d3 {
      margin: 0px;
      background-color: green;
      padding: 0px;
      width: 50%;
      height: 100px;
    }
  </style>

d2清除左浮动,d3设置为右浮动

当d2清除了左浮动,d3设置为右浮动,就会如上图所示;如果d2清除的是右浮动,d2就会在d1上面,d3就会定位在d1下面的右面,自己测试不再截图

当d2清除了左浮动,如果想要d2紧挨着d1(与d1在一行上),可以通过position脱离文档流设置其上下左右属性使其定位在d1右侧,自己测试

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>div+CSS布局</title>
  <style type="text/css">
      #d1 {
      margin: 0px;
      background-color: red;
      padding: 0px;
      width: 30%;
      height: 100px;
      float:left; 
    }
    #d2 {
      margin: 0px;
      background-color: yellow;
      padding: 0px;
      width: 40%;
      height: 100px;
      clear: left;     
    }
    #d3 {
      margin: 0px;
      background-color: green;
      padding: 0px;
      width: 30%;
      height: 100px; 
      float: right; 
    }
  </style>
</head>
<body>
    <div id="d1"><span style="font-size: 50px;">d1</span></div>
    <div id="d2"><span style="font-size: 50px;">d2</span></div>
    <div id="d3"><span style="font-size: 50px;">d3</span></div>
  </body>
</html>

DIV+CSS布局综合运用position+上下左右属性与float属性为网页进行布局

注意:浏览器的兼容性问题,特别是使用IE内核的浏览器对W3C的规范不怎么遵守

在线咨询

上一篇：编写你的第一行 HTML 代码，来帮助蝙蝠侠写一封情书
下一篇：HTML常用代码集合，背完这些基本可以自己做表白网页了

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

CSS盒子（Box）模型入门

您的项目需求