wordpress自定义参数查询,个人网站可以做seo吗,小说cms系统,中国有哪些企业在标准流中#xff0c;一个块级元素在水平方向会自动伸展#xff0c;直到包含它的元素的边界#xff1b;而在竖直方向和兄弟元素依次排列#xff0c;不能并排。使用“浮动”方式后#xff0c;块级元素的表现就会有所不同。 CSS中有一个float属性#xff0c;默认为no…在标准流中一个块级元素在水平方向会自动伸展直到包含它的元素的边界而在竖直方向和兄弟元素依次排列不能并排。使用“浮动”方式后块级元素的表现就会有所不同。 CSS中有一个float属性默认为none也就是标准流通常的情况。如果将float属性的值设置为left或right元素就会向其父元素的左侧或右侧靠紧同时默认情况下盒子的宽度不在伸展而是根据盒子里面的内容的宽度来确定。
准备基础代码 浮动的性质比较复杂这里先制作一个基础的页面代码如下。后面一系列的实验将基于下面的代码为基础并根据不同的知识点添加不同的新代码。 html xmlnshttp://www.w3.org/1999/xhtml
head
style typetext/css
body {margin:15px;font-family:Arial; font-size:12px;
}
.father {background-color:#ffff99;border:1px solid #111111;padding:5px;
}
.father div {padding:10px; margin:15px; border:1px dashed #111111;background-color:#90baff;
}
.father p {border:1px dashed #111111;background-color:#ff90ba;
}
.son1 {
/* 这里设置son1的浮动方式*/
}
.son2 {
/* 这里设置son1的浮动方式*/
}
.son3 {
/* 这里设置son1的浮动方式*/
}
/style
/headbodydiv classfatherdiv classson1Box-1/divdiv classson2Box-2/divdiv classson3Box-3/divp这里是浮动框外围的文字这里是浮动框外围的文字这里是浮动框外围的文字这里是浮动框外围的文字这里是浮动框外围的文字这里是浮动框外围的文字这里是浮动框外围的文字这里是浮动框外围的文字这里是浮动框外围的文字./p/div
/body
/html 上面的代码定义了4个div块其中的一个父块另外3个是它的子块。为了便于观察将各个块都加上了边框以及背景颜色并且让body标记以及各个div之间有一定的margin值。如果3个子div都没有任何浮动设置就为标准流中的盒子状态。在父盒子中4个盒子各自向右伸展竖直方向依次排列如下图。 下面开始在这个基础上做实验通过一些列的实验就可以充分体会到浮动盒子具有哪些性质了。
实验一设置第一个浮动的div .son1 {float: left;
} 效果如下图可以看到标准流中的Box-2的文字在围绕着Box-1排列而此时Box-1的宽度不再伸展而是能容纳下内容的最小宽度。与此同时由于Box-1脱离了标准流而标准流中的Box-2会顶到原来Box-1的位置因此Box-2的左边框与Box-1的左边框重合。 实验二设置第二个浮动的div 继续将Box-2的float属性设置为left此时可以看到Box-2也变为根据内容确定宽度并使Box-3的文字围绕Box-2排列。从下图中可以清晰的看出Box-3的左边框仍在Box-1左边框下面否则Box-1和Box-2之间的空白不会是深色这个深色实际上就是Box-3的背景色Box-1和Box-2之间的空白是由二者的margin构成的。 实验三设置第三个浮动的div 接下来我们把Box-3也设置为向左浮动此时从下图中可以清楚的看到文字所在的盒子的范围以及文字会围绕浮动的盒子排列。
实验四改变浮动方向 将Box-3改为向右浮动即float:right。此时效果如下图。 可以看到Box-3移动到了最右端文字段落盒子的范围没有改变但文字却夹在了Box-2和Box-3之间。此时如果把浏览器窗口慢慢调整变窄浏览器窗口就无法在一行中容纳Box-1到Box-3Box-3会被挤到下一行中但仍然保持向右浮动这时文字会自动布满空间。 实验五再次改变浮动的方向 将Box-2改为向右浮动Box-3改为向左浮动。从下图可以看出布局没有变化只是Box-2和Box-3交换了位置。 现在再次回到实验中把浏览器窗口慢慢变窄当浏览器窗口无法在一行中容纳Box-1到Box-3时和上一个实验一样会有一个Box被挤到下一个。那么这次被挤到下一行的是哪一个呢答案是在HTML中写在后面的也就是Box-3会被挤到下一行中但仍然保持向左浮动会到下一行的左端这时文字仍然会自动排列如下图。 实验六全部向左移动 下面把3个Box都设置为向左浮动然后再在Box-1中增加一行使它的高度比原来高一些如下图所示。 那么请想一想如果继续把浏览器的窗口变窄结果会如何呢Box-3会被挤到下一行那么它会在Box-1的下面还是Box-2的下面呢答案如下图。 Box-3被挤到下一行并向左移动发现Box-1比Box-2高出一块儿这样Box-3就会被卡住进而停留在Box-2的下面。说道最后需要非常注意的是如果某个盒子被设置为float那么它将脱离标准流其后面的标准流中的盒子将不再受它影响。
实验七使用clear属性清除浮动的影响 以使文字的左右两侧同时围绕浮动的盒子。首先将Box-1到Box-2的浮动都改为float:left而Box-3的浮动为float:right之后再将Box-3的内容修改为 div classson3Box-3brBox-3brBox-3brBox-3
/div 效果如下图 如果不希望文字围绕浮动的盒子又该如何呢此时对围绕文字所在标签p的样式进行如下修改后从下面的效果图中可以看出段落的上边界向下移动直到文字不受左边的两个盒子影响位置但仍然受到Box-3的影响。 .father p {border:1px dashed #111111;background-color:#ff90ba;clear:left;
} 接着将clear属性设置为right将看到如下效果。由于Box-3比较高因此清除了右边的影响自然左边也就不会受到影响了。还有说明的是可以将clear属性设置为both从直接消除左右两边浮动盒子的影响。 实验八扩展盒子的高度 关于clear的应用这里再给出一个例子将文字所在的段落p标签删除这时在父div里面只有3个浮动的盒子它们都不在标准流中这时浏览器的显示效果如下 可以看到文字段落被删除以后父div的范围缩成一条是由padding和border构成的也就是说一个div的范围是由它里面的标准流内容决定的与里面的浮动内容无关。下面将介绍一种方法以使父div的范围能够包含3个浮动的子div见如下修改后的HTML代码和与之对应的效果图。 div classfatherdiv classson1Box-1brBox-1/divdiv classson2Box-2/divdiv classson3Box-3brBox-3brBox-3brBox-3/divdiv styleclear:both;border:0;padding:0;margin:0;/div
/div 注该篇博客源自《CSS设计彻底研究》中的第四章书中的例子简明扼要、通俗易懂因此特copy下来与大家分享同时也便于今后自己的在线查阅。
