CSS盒子模型及用法

在这里插入图片描述

模型中内容指什么？
1.当标签不嵌套，例如：
     <div class=”dv1”>新闻</div>      //”新闻”是内容,  “新闻”是个文本
     <div class=”dv2”>故事</div>      //”故事”是内容   “故事”也是个文本

2.当标签嵌套时，例如：
     <div class=”dv1”>
        <div class=”dv2”>新闻</div>   //<div class=”dv2”>新闻</div>板块 是内容  
     </div>

margin–在父元素和子元素之间应用（重点）
　（1）在子元素中设置水平方向的margin值
　　　将子元素的margin-left设置为了100px;效果如下：

<head>
	<meta charset = "UTF-8">
	<style>
		*{padding : 0; margin : 0; border : 0;}
		.father{
			     width : 500px;
			     height : 500px;
			     background:red;
			   }
	       .son{
	    	    width : 100px;
	    	    height : 100px;
	    	    background : green;
	    	    margin-left : 100px;
	           }
	</style>
</head>
<body>
	<div class = "father">
		<div class = "son">宽度为100px,margin-left为100px</div>
	</div>
</body>

在这里插入图片描述
同级元素之间的margin不会考虑到padding,但是在父元素和子元素就不同了，那么如果父元素中如果有padding，效果会是什么样的呢？

<head>
	<meta charset = "UTF-8">
	<style>
		*{padding : 0; margin : 0; border : 0;}
		.father{
			     width : 500px;
			     height : 500px;
			     padding : 100px; 
			     background:red;
			   }
	       .son{
	    	    width : 100px;
	    	    height : 100px;
	    	    background : green;
	    	    margin-left : 100px;
	           }
	</style>
</head>
<body>
	<div class = "father">
		<div class = "son">宽度为100px,margin-left为100px</div>
	</div>
</body>

在这里插入图片描述
但是经过测量可以发现子元素的左边框距离父元素的左边框之间的距离为200px，因为其中还有100px的左padding值，前面的例子因为我没有设置padding值，所以没有观察出来，因此这就说明了在子元素中设置margin-left，其值实际上是子元素的左边框距离父元素左padding内侧的距离。

CSS盒子模型及用法

猜你喜欢