核心提示：HTML基础学习-18- p css容器 盒子模型学习1!DOCTYPE html!--p和 span一个是块级元素I个是内联p 和 span可以相互转换容器边距空白问题 margin外围增加，不撑大...
HTML基础学习-18- p css容器 盒子模型学习1
<!DOCTYPE html>
<!--
p 和 span
一个是块级元素 I个 是内联
p 和 span可以相互转换
容器边距空白问题
margin外围增加，不撑大盒子本身
border 会将当前区域一起算到盒子中，增大容器和padding一样
padding向外扩展增大容器
容器
但三者都会在 外部容器宽高一定的情况下
当 额外设置 margin border 和 padding那么久应该将 容器本身的宽高减去 相应的 margin border padding 所占内容
-->
<head>
<title>
p 加 css 1
</title>
<meta charset="utf-8">
<style type="text/css">
/*
p{
background-color:green;
}
span{
background-color:green;
}
body{
margin:0;
}
*/
.parenta{
margin:0 auto;
background-color:red;
width:600px;
height:600px;
}
.childa{
float:left;
background-color:blue;
width:240px;
height:240px;
}
.childb{
float:left;
background-color:green;
width:240px;
height:240px;
}
.parenta p{
margin:10px;
border:solid 10px;
padding:10px;
}
</style>
</head>
<body>
<p class="parenta">
<p class="childa">
</p>
<p class="childb">
</p>
</p>
</body>
</html>
