CSS Float合理布局全过程与老调重弹的3栏合理布局

日期:2021-01-20 类型:科技新闻 

关键词:商城网站建设,微商好助手,微商引流,电商网站模板,微信商家小程序

应用CSS合理布局网页页面,那是前端开发的基础功了,甚么两栏合理布局,3栏合理布局,那也是前端开发招聘面试的基础题了。1般来讲,可使用CSSposition特性开展合理布局,或应用CSSfloat特性合理布局。前者合适合理布局主页,由于主页上的內容常常能够彻底操纵。后者合适合理布局模版,模版中填充的內容你无法操纵——例如,在编写wordpress模版时,你毫无疑问无法考虑到每篇博文的长度。这篇博文,便是总结1下如何应用CSS中的float特性开展合理布局,实际上在网上有许多探讨这个话题的文章内容了,但我感觉都没说到点子上。那就来老调重弹1次吧,CSS之Float合理布局。

DIV的特性

合理布局的基础HTML元素div,有这么几个特性,会危害到后边开展的合理布局。留意,下面的特性仅可用于沒有特定width特性和height特性的div,由于在用float开展合理布局的全过程中,大家仅有在特殊的部位(后边会详细描述)才这么做。

•空的div是沒有高宽比的。
•有內容的div其高宽比取决于內容的高宽比。
•假如沒有特定float特性,div的宽度将和占满父元素的宽度(无论是否空的)。
•假如特定了float特性,div的宽度将取决于內部元素的宽度(因此,空的div特定了float特性后既沒有高宽比也沒有宽度)。
在网上的许多实例教程,常常特定了div的宽度或高宽比,随后解读float特性,这对我学习培训合理布局的确造成了很大影响。记牢,仅有在特殊的部位,大家才会特定div的宽度。

Float合理布局的全过程

在实践活动全过程中,我理解到1点,那便是,div是依照在HTML文本文档中的次序开展3D渲染的。也便是说,大家先决策前1个div在网页页面上的部位,随后再决策后1个div的部位。或许这1点是不言而喻的,但它的确是了解Float合理布局的重要,在网上别的实例教程里非常少有提及。

有下面这样的HTML文本文档


拷贝编码
编码以下:

<!DOCTYPE>
<html>
<head>
<style type="text/css">
#header{background-color: gray;}
#content{background-color: red;}
#sidebar{background-color: blue;}
#sidebar2{background-color: green;}
#footer{background-color: yellow;}
</style>
</head>
<body>
<div id="page">
<div id="header"><h1>这里是题目</h1></div>
<div id="sidebar">
<p>侧面栏</p>
</div>
<div id="sidebar2">
<p>侧面栏2:地形图投射,是将地球表层投射到地形图平面的全过程,将自然地理座标变换为平面直角坐
标的全过程。由于大学毕业毕业论文必须,我再次回望了1下地形图投射的专业知识而且作了较为全面且简约的总
结。假如你以前未系统软件掌握过地形图投射,又对地形图投射感兴趣爱好,这篇博文或许能变成1篇简约务
实的阅读文章原材料。</p>
</div>
<div id="content">
<p>这里是1些文本</P>
<p>再来1大段文本</P>
<p>地形图投射,是将地球表层投射到地形图平面的全过程,将自然地理座标变换为平面直角座标的全过程。
由于大学毕业毕业论文必须,我再次回望了1下地形图投射的专业知识而且作了较为全面且简约的总结。假如你
以前未系统软件掌握过地形图投射,又对地形图投射感兴趣爱好,这篇博文或许能变成1篇简约实干的阅读文章材
料。</p>
</div>
<div id="footer"><p>没人关心的页脚</P></div>
</div>
</body>
</html>

1共5个div,以便使这些div具备高宽比和宽度,向在其中加上了1些文本。如今都还没任何float特性,因此每一个div都占满了全部父元素的宽度,而高宽比由在其中的內容决策。3D渲染实际效果以下:

当1个元素具备float特性时,访问器会如何做?我想是这样的:

1.渲访问器检测到这个元素具备float:right特性,
2.依据其內容限定了div的宽度(而并不是尽可能占满父元素宽度)
3.摆脱文本文档流,并挑选这样的部位开展3D渲染:
 1.最先要在文本文档流沒有占据的地区,不然就有将会遮盖早已3D渲染的文本文档。
 2.其次,也沒有别的float元素。
 3.最终,3D渲染以后不容易危害文本文档流。文本文档流该如何走还如何走,可是文本文档中的內容会全自动绕开float元素。
试着将div#sidebar设定float:left特性:


拷贝编码
编码以下:

#sidebar{
float: right;
}


侧面栏沒有波动到题目栏上,即便题目栏右边沒有文本。这是由于题目栏的3D渲染在侧面栏以前开展,访问器3D渲染完题目栏后早已忘了题目栏右边有木有內容了,因此不可以冒着遮盖原先的內容的风险性将侧面栏波动到题目栏上。接着,文本文档流该如何3D渲染還是如何3D渲染,除在其中文本绕开波动元素,就仿佛波动元素不存在1样。

大家期待侧面栏2在网页页面左边,侧面栏1在网页页面右边。由于侧面栏2中內容许多,因此必须限制宽度。以便美观大方,另外限制1的宽度,并对侧面栏2赋float特性。


拷贝编码
编码以下:

#sidebar{
float: right;
width: 100px;
}
#sidebar2{
float: left;
width: 180px;
}


 

有点像1个3栏合理布局的模样了。但大家一般不期待中栏高于侧面栏时,拓宽到侧面栏正下方。这时候一般应用的技能便是给中栏带margin特性,上下的值便是两个侧面栏的值。


拷贝编码
编码以下:

#sidebar{
float: right;
width: 100px;
}
#sidebar2{
float: left;
width: 160px;
}
#content{
margin-left: 160px;
margin-right: 100px;
}


很好,1个3栏合理布局就进行了。尽管看上去很好,可是假如中栏的高宽比小于侧面栏会如何?把中栏里的內容都删除绝大多数,随后:

见鬼,页脚上去了……这可并不是我期待的。那末也有1个技能,便是在页脚应用clear特性。这个特性的功效便是,使文本文档流中元素在合理布局的情况下,不容许左边或右边出現波动元素。假如有,则在波动元素的正下方开展3D渲染。这里,为页脚加上clear特性。


拷贝编码
编码以下:

#sidebar{
float: right;
width: 100px;
}
#sidebar2{
float: left;
width: 160px;
}
#content{
margin-left: 160px;
margin-right: 100px;
}
#footer{
clear: both;
}


页脚也一切正常了,这样,1个3栏合理布局就最后进行了。

最终,再看来1个事例吧,这个事例将解释两个难题:

1.当可3D渲染地区除去掉已有的波动元素,剩余的那1块地区,其顶部不够以容下波动元素时,波动元素将舍弃3D渲染在顶部,而3D渲染在前面那个波动元素的正下方。
2.在以上的状况下,两个波动元素依然不在文本文档流中,将会会造成1些诡异的状况。
修复中栏的內容,并改变CSS编码以下:


拷贝编码
编码以下:

#sidebar{
float: right;
width: 200px;
}
#sidebar2{
float: left;
width: 300px;
}



这张图就清楚地表明了波动元素实际上是不在文本文档流当中的。最先,访问器网页页面沒有500像素宽,因此侧面栏2无法在顶部3D渲染(侧面栏1的存在使室内空间不足了),这时候文本文档流仅仅开展到题目栏。因而中栏从题目栏正下方刚开始3D渲染,以便绕开两个侧面栏,只好先在左上角写几个字,随后到侧面栏2右边委屈地3D渲染,最终才一切正常地伸展开(你能够这样想像,翠绿色和蓝色的后边,实际上是沒有文本的鲜红色)。

作者:1叶斋主人
出处:www.cnblogs.com/yiyezhai

上一篇:html div 全透明款式示例编码 返回下一篇:没有了