您的位置：首页 > Web前端 > CSS

HTML基础学习-18- div css容器盒子模型学习1

2017-06-11 21:23 471 查看

<!DOCTYPE html>

<!--
div  和 span
一个是块级元素  I个  是内联

div 和 span可以相互转换

容器边距空白问题

margin外围增加，不撑大盒子本身

border 会将当前区域一起算到盒子中，增大容器和padding一样
padding向外扩展增大容器

容器

但三者都会在  外部容器宽高一定的情况下
当 额外设置 margin border  和  padding那么久应该将 容器本身的宽高减去 相应的 margin  border  padding 所占内容

-->
<head>
<title>
div 加 css 1
</title>
<meta charset="utf-8">
<style type="text/css">
/*
div{
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 div{
margin:10px;
border:solid 10px;
padding:10px;
}
</style>

</head>
<body>
<div class="parenta">
<div class="childa">

</div>
<div class="childb">

</div>
</div>

</body>

</html>

跟随视频学习，手写记录自己学习过程中的点点滴滴，一起加油吧。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html div-css

相关文章推荐

新的分享

章节导航

HTML基础学习-18- div css容器 盒子模型学习1

HTML基础学习-18- div css容器盒子模型学习1