首页 > 代码库 > css 盒子模型
css 盒子模型
为什么要理解盒子模块：
html界面的布局就像由多个盒子组成的界面，
理解盒子的结构，以满足不同的业务场景需要的布局。
Css 盒子模型:
CSS中， Box Model叫盒子模型（或框模型），Box Model规定了元素框处理元素内容（element content）、
内边距（padding）、边框（border） 和 外边距（margin） 的方式。在HTML文档中，每个元素（element）
都有盒子模型，所以说在Web世界里（特别是页面布局），Box Model无处不在。下面是Box Model的图示：
说明：上图中，由内而外依次是元素内容（content）、内边矩（padding-top、padding-right、padding- bottom、padding-left）
、边框（border-top、border-right、border-bottom、border- left）和外边距（marging-top、margin-right、margin-bottom、margin-left）。
内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。而且，外边距可以是负值，而且在很多情况下都要使用负值的外边距
下图是Css模型边距图解：
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/** 通配符,代表所有标签 */
*{
padding: 0px;
margin: 0px;
}
/*ID选择器*/
#myDiv{
/*实际的宽高,width -左右边距+ 左右边框*/
width: 200px;
height: 300px;
border: 1px solid red;
/*
padding填充,内边距
*/
/*
1.上下左右的值
2.上下,左右
3.上,左右,下
4.上,右,下,左
*/
padding: 0px 10px 0px;
margin: 10px 20px 10px;
}
#myDiv2{
width: 200px;
height: 300px;
border: 1px solid green;
}
/*类选择器*/
.title{
color: blue;
font-size: 14px;
}
/*混合使用*/
span.title{
font-size: 25px;
}
div > p{
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<div id="myDiv">
<p>abcdef</p>
</div>
<div id="myDiv2">
</div>
<span class="title">
Javascripttest
</span>
<i class="title">ActionScript</i>
</body>
</html>
css 盒子模型
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。