盒子模型
conten 内容区域 padding 内边距 border 边框 margin 外边距
1、height 与 width 针对content设置 ,如果无height 或height 会自适应宽度和通过文字,内容形成高度。
对于行内元素,height 与width 是无效的,是靠里面内容撑开。
例子:
<div style="height:100px;width:100px;border:1px solid red;">
大家好<br/>好好好
</div>
大家好<br/>好好好
</div>
针对行内元素:height 与width 是无效
<span style="width:100px;height: 100px ;border: 1px solid black">
一点都不好
<br/>
</span>
一点都不好
<br/>
</span>
2、常规流设置:margin padding 注意事项:
a1、margin: 针对块级元素 垂直方向margin 会发生重叠,两个div上下布置的最后距离取两者最大值。
水平方向无重叠现象。
<div style="width:100px;height:500px;border: 1px solid red">
<div style="width:100px;margin-bottom:20px;border: 1px solid black">
df
</div>
<div style="width:100px;margin-top:20px;border: 1px solid black">
sf
</div>
</div>
<div style="width:100px;margin-bottom:20px;border: 1px solid black">
df
</div>
<div style="width:100px;margin-top:20px;border: 1px solid black">
sf
</div>
</div>
a2、margin : 针对内嵌元素 垂直方向margin 无效果
水平方向有效果,不会发生重叠。
<div>
<span style="margin-right:20px;margin-top:20px;border: 1px solid red">
开始测试
</span>
<span style="margin-top:20px;border: 1px solid red">
开始测试
</span>
</div>
<span style="margin-right:20px;margin-top:20px;border: 1px solid red">
开始测试
</span>
<span style="margin-top:20px;border: 1px solid red">
开始测试
</span>
</div>
b1、padding :针对块级元素 都有效果
b2、padding :针对内嵌元素 垂直方向无效果
水平方向有效果
<div style="border:1px solid red;float: left">
<div style="border:1px solid black;padding: 10px 20px 30px 40px">
开始测试
</div>
</div>
<div style="border:1px solid black;padding: 10px 20px 30px 40px">
开始测试
</div>
</div>
这个例子也可以让我们看明白浮动的包裹性。
3、浮动产生的破坏性和包裹性
a、破坏性问题1
<div style="clear:both;border:10px solid darkslategray;">
<span style="float:left;border: 10px solid red">
开始测试
</span>
</div>![]()
<span style="float:left;border: 10px solid red">
开始测试
</span>
</div>
我们可以看到因为数字浮动的原因,字已经跑出来,而里面没有内容撑住,就塌陷了。
怎样才能让他不塌呢,只需要使用overflow:hidden;就可以了。
解决办法1:
<div style="overflow:hidden;clear:both;border:10px solid darkslategray;">
<span style="float:left;border: 10px solid red">
开始测试
</span>
</div>
<span style="float:left;border: 10px solid red">
开始测试
</span>
</div>
a、破坏性问题2:
<div style="width: 200px;height: 200px;border: 1px solid blue">
<div style="border:1px solid black;float: left">
开始测试
</div>
<div style="border: 1px solid red">
开始测试
</div>
</div>
<div style="border:1px solid black;float: left">
开始测试
</div>
<div style="border: 1px solid red">
开始测试
</div>
</div>
因为浮动的原因,两个块在一行,用clear清除下浮动对象即可。
解决办法2:
<div style="width: 200px;height: 200px;border: 1px solid blue">
<div style="border:1px solid black;float: left">
开始测试
</div>
<div style="clear:both;border: 1px solid red">
开始测试
</div>
</div>
<div style="border:1px solid black;float: left">
开始测试
</div>
<div style="clear:both;border: 1px solid red">
开始测试
</div>
</div>
注:clear:both;要跟在float: left(浮动元素)后面才会有效果。
b、包裹性