likes
comments
collection
share

CSS盒子模型（Box Model）

作者站长头像
站长
· 阅读数 297

重要属性

写在前面：上午一直在复习编译原理，还有两天考试了，今天又捡回了好多知识点，LR(1)的展望符的求法、好几个易错的判断题等，下午还要接着看属性文法，和第一章的概念，概念理解就容易记住了，Continuing pursue。

盒子模型（Box Model）是将CSS设置样式的区域抽象为一个个盒子，一个套着一个，这些盒子就是一个个矩形区域，通过改变这些区域的样式，从而达到想要的效果。

CSS盒子模型（Box Model）

属性说明
Margin(外边距)清除边框外的区域，外边距是透明的。
Border(边框)围绕在内边距和内容外的边框。
Padding(内边距)清除内容周围的区域，内边距是透明的。
Content(内容)盒子的内容，显示文本和图像。

使用示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>盒子模型演示</title>
    <style>
      div {
          background-color:cadetblue;
          width: 200px;
          border: 10px solid lightblue; 
          padding: 25px;
          margin: 50px;
      }
    </style>
</head>
<body>
    <p>CSS盒模型本质上是几个封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>
    <div>这里是盒子内的实际内容。可以计算出这个盒子的总大小是：200+2*10+2*25+2*50=370</div>
</body>
</html>

实现效果：CSS盒子模型（Box Model）说明：1、Content区域是必备的，其他三个都是可选的，它有三个属性：width、height、overflow。当内容的区域装不下的时候设置overflow属性来指定溢出部分处理的方式。2、Margin、Padding都有-top, -bottom, -left, -right四个方向的属性，可以分别设置距离，都可以使用像border一样的简写方式。3、border就是和我之前的博客写的border是一样的，有-width, -style, -color三个属性。大家学习完之后一定要坚持敲完代码，不要直接复制粘贴。CSS盒子模型（Box Model）