·您当前的位置:首页 > 技术教程 > Html5技术 >

[html5]CSS盒子模型的介绍与说明

时间:2017-08-21 17:48酷播
[html5]CSS盒子模型的介绍与说明

CSS盒子模型是一个围绕HTML元素——并且HTML元素定义了边框border,内边距padding和外边距margin 的矩形空间。

  • Border:——定义了包含元素的最大面积。边框可以可见,也可以不可见,可以定义它的高度和宽度等。
  • Padding:——定义边框和元素之间的间距。
  • Margin:——定义边框和任何相邻元素之间的间距。

40 个重要的 HTML5 面试问题及答案

例如下面就是一段简单的定义了box边框,外边距和内边距值的CSS代码。

.box {
    width: 200px;
    border: 10px solid #99c;
    padding: 20px;
    margin: 50px;
}

现在,如果我们应用上述CSS代码到DIV标记,如下所示,那么你的输出将会如下图所示。我创建了两个文本,“Some text”和“Some other text”,这样我们可以看到margin属性函数是怎么样的。

<div align="middle" class="box">
Some text
</div>

Some other text

40 个重要的 HTML5 面试问题及答案

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器