三种盒模型
- 说到盒模型,其实在网上通常指的是css版本的标准盒模型和IE的IE标准盒模型,实际两者差距不大,只是在内容“content”的划分上不一样而已,即宽度计算上的差异;而我这里所说的第三种呢,是css3版本里的弹性盒模型,它是一个同等重要的概念,因为在互联网的发展里,APP将越来越有可能被网页打包的app所替代,那么网页适配不同屏幕、网页的响应式则非常需要弹性盒模型的特殊性!
两种标准盒模型
- 大家看两种模型的宽高计算,标准盒模型里宽高是不包含border边框和border内边距的,而IE盒模型的宽高却包括了。
- 相比较而言,两种盒模型对于内容的容器的友好程度是有区别的,标准盒模型的优点是设置了内边距(padding)和边框(border)后不会出现挤压内容的情况,可以用于垂直对齐的布局等,但是缺点也很明显,内边距和边框直接加在宽度上会影响容器外的布局,而程序员则必须对宽度进行再次计算或者事先计算好。
- 而对于IE盒模型来说优点也很明显,恰恰相反的是,IE盒模型可以先将布局处理完善后再添加内容,缺点则是一但内容过多或者有所变化的话盒子也需要再次更改大小,因为限制的宽高会挤压内容,让网页看起来非常难看!
- 在w3c的标准中,盒模型的差异被缩小成了一句属性:box-sizing,当值为border-box时,盒子为IE模型,为content-box时,为标准盒模型。但是因为网页的UI设计和网页布局也是分的很明确的,往后的项目一般会有一份明确布局的psd文件,所以大家也不用担心如何选择!
弹性盒模型
弹性盒子和标准盒子拥有一样的宽高边框和边距属性,不同的地方是:
当盒子设置
pdisplay:flex
或者inline-flex
的时候,它的==子级==元素。- 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。而显示方向则通过
direction:right-to-left
或direction:left-to-right
属性来控制。 - 弹性盒模型的最大的优点是配合百分比的宽度、
max-width
的最大宽度等,使元素本身和子级能同时在浏览器宽度变化、显示屏幕宽度变化的情况下,自动的更改宽度以适应改变后的宽度,这也是响应式和移动H5的基础。 - 弹性盒模型的详细教程参考:
浮动
- 对于标准盒模型和IE盒模型来说,只需要在属性中加入
float:left|right
就可以了!产生的效果显而易见 - 大家看一下没有浮动效果时盒子的情况:
浮动的时候盒子对本身和后面的元素的影响:
左边橙色盒子浮动脱离文档流,蓝色盒子占据原来的位置,因为我设置了透明度,为的是让效果的变化更加明显。右边的盒子橙色盒子和蓝色盒子都浮动后排成一行,而红色盒子没有浮动占据文档前面的位置,注意盒子的位置和元素内容!!!
这里附上我的代码:
- 这里是css样式:
*{
margin: 0;
padding: 0;
}
h2{
margin-left: 50px;
}
.showbox {
width: 500px;
height: 500px;
float: left;
background-color: darkgray;
margin: 50px;
}
.showbox:hover .floatbox{
float: left;
}
.nofloatbox>p+p{
display: none;
}
.showbox:hover .nofloatbox>p+p {
display: block;
}
.showbox:hover .nofloatbox>p {
display: none;
}
.nofloatbox {
width: 200px;
height: 200px;
background-color: rgb(25, 170, 228);
}
.floatbox {
width: 160px;
height: 160px;
background-color: rgb(255, 165, 0,0.5);
}
.showbox2 {
width: 500px;
height: 800px;
float: left;
background-color: darkgray;
margin: 50px;
}
.showbox2:hover .nofloatbox2{
float:left;
}
.showbox2:hover .floatbox2{
float: left;
}
.nofloatbox2 {
width: 200px;
height: 200px;
background-color: rgba(131, 207, 236, 0.8);;
}
.floatbox2 {
width: 160px;
height: 160px;
background-color: rgb(255, 165, 0, 0.8);
}
.everfloat{
width:250px;
height:250px;
background-color: red;
}
.positiontemp{
width:600px;
height: 1000px;
background-color: greenyellow;
margin: 0 auto;
clear: both;
}
- 这里是html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>对浮动和定位的展示</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h2>浮动与定位区别</h2>
<h2 style="text-align: center">浮动</h2>
<div class="showbox">
<h3>hover这个灰色盒子时,橙色盒子浮动,注意看透明关系</h3>
<div class="floatbox">
<p>橙色盒子内容</p>
</div>
<div class="nofloatbox">
<p>橙色盒子没浮动</p>
<p>橙色盒子浮动了</p>
</div>
<p>橙色盒子浮动后,盒子容器脱离文档流,后面顺序的蓝色盒子容器占据橙色盒子位置,但盒子的内容却依然要和橙色盒子的内容竞争空间</p>
</div>
<div class="showbox2">
<h3>hover这个灰色盒子时,两个盒子都浮动,注意看透明关系</h3>
<div class="floatbox2">
<p>橙色盒子内容</p>
</div>
<div class="nofloatbox2">
<p>蓝色盒子内容</p>
</div>
<div class="everfloat">
<p>这个红色盒子永远也不浮动</p>
</div>
<p>橙蓝两个盒子都浮动后的情况了解一下</p>
</div>
</body>
</html>
清除浮动造成的麻烦
首先最明显也是一定会遇到的麻烦:父级塌陷!
比如子级的几个盒子使用了浮动,父级的高度便会塌陷下去:
如下图,我设置的蓝色边框盒子padding是10px
子级没有添加浮动时是这样的
设置了子元素的浮动后,高度塌陷!
清除浮动过后的效果:
那怎么清楚浮动呢?
- 子级办法:元素添加
clear:both|left|right
解决其他元素的浮动影响; - 通过添加伪类before或after;
- 通过添加属性
overflow:hidden|auto;
- 不建议方法的方法之一:加高,看起来没啥区别但是非常不好!
- 不建议方法的方法之二:添加包含inline属性值的属性,如
display:inline-block|inline;
还要一些暴力方法是伤敌一千自损八百,麻烦,故不介绍!
- 子级办法:元素添加