您的位置：首页 > Web前端 > HTML5

H5学习之10 div布局

2016-07-29 18:41 246 查看 
<html>
<head>
<style type="text/css">
div#container {
width: 100px;
/* 整个大的div的长度*/
}

div#header {
/*不设定长度的，又不设置浮动的，自动填满最外层容器长度。
这个header的长度就是100，
如果设置成float而不设置长度宽度，div长度就会变成字体所占长度。*/
background-color: cadetblue;

}

div#left {
/* width: 50px;*/
background-color: bisque;
float: left;
height:100px;
/*将此标签设置成向左浮动，可以想象成这个标签漂浮起来了1层。不设置的为1层，设置了得为2层
比不设置浮动的要高一层*/
}

div#content {
/* width: 40px;*/
background-color: deeppink;
float: left;
/*设置向左浮动，因为上一个div也是向左浮动的，
所以这个div会跟上一个div从左向右排列而不会换行
如果没有直接设置长度或者高度，会依靠字长来填充长度，字高来填充高度.
假如字过长，也就是长度过长（直接设置过大的width也会）
（如果手动设置了div的长度而相加又不大于最大长度，那么就不会造成div创建在下一行，
这个例子比如手动设置content的长度，而与left相加又不大于100，那么content不会创建在下一行。
即使字长再长，也不会影响div的长度，div的长度是手动设置的，创建div在什么位置时比较的是div，而上边情况是因为没有手动设置div，依靠字长来确定div长度，最后也是比较的div长度。
这里可以把content的width值取消注释 就能看出结果。）
跟前面的容器长度加起来超过了这一行的最大容器长度，就会换到相同层数的div的下边去创建div，
此例子就是在left下边去了。
而且创建了之后，即使超过了最大容器div的长度，也不会出现换行的情况，除非加空格或者回车可以换行。
也就是长度超过最大容器长度，文字不会自动换行，会在同一行呈现文字。
（两个float创建时，第二个float不设置长度，用字长代替，只要字长大于剩下的长度时，直接在第一个float下面创建div，回车缩短长度不管用.
至于什么觉得长度多了按下回车 直接创建第二行，这样创建第二个div，可能是跟固定长度时然后打字根据字长判断高度记混了。
你还跟第一个创建float，第二个创建不是clear，也不是float。的形式弄混了，这个直接建在第一层了，div固定，只是显示问题。)

总结一下，也就是该在那个位置创建div(层数=1会换行创建，层数=2，也就是设置了float浮动的会横向创建)，
但是因为如果创建了新的div就超过了最大容器长度，那么就会在层数相同的div之下（这个例子如果conten长度过长，会在left（left高度远大于两行）整个div下创建）创建。

浮动方面是根据2个或者多个div长度相加之后 ,（如果手动设置了width值，则会无视字体的大小，会根据那个值来创建div。）
（甚至1个div设置了浮动，然后他的长度超过最大容器长度，那么也会换行创建，可以自己试）
的长度大小来判断换不换行创建，而不是字节长度或者其他（可以一个很长的字节长度，然后手动设置一个很小的width来试试看哦）。*/

}

div#footer {
background-color: mediumblue;
/* height: 10px;*/
clear:left;

/*  加上之后也就是说这个div左边不存在浮动元素*/
/*取消注释可以查看 加上清除左浮动的效果，对比观看加深理解。*/

/*清除左浮动（也就是清除了该元素左边的浮动，左边不会出现浮动元素）
实现的效果是此div创建在了header,left,conent之下。
即使长度非常小，与本行所有div长度相加也不超过最大长度，仍然不与left,content同行创建。
会进入下一行来创建div。这个例子也就是left最大高度的下一行。因为left高度大于content高度。

如果不设置此值,此div层数=1，将会创建在层数=1的div之下。这是必然的（根据设置背景颜色来看一下就能判断）。但是文字放在什么地方就不一样了。
在这种情况下，呈现出的效果是会默认创建在第二行，此例子也就是跟left content同行，如果第二行剩下的长度足够容纳此div，则在此行呈现文字，不够容纳，进入下一行判断是否能够容纳文字。
下一行如果还没超过本行这两个div的最大高度，此例子就是，left的高度远大于两行字的高度，就会判断除去left的长度(也就是判断content时的长度)是否能够呈现这一串文字。
长度足够能呈现，直接在这呈现，不能呈现的话，文字直接呈现在left之下。但是div是创建在了header之下，背景颜色可以证明。

此例子中，如果将第二行的left和content 两个div的长度恰好设置成与最大容器长度一样，同时将left的高度不设置，默认一行字体高度。
清除或者不清除左浮动呈现的效果一样，因为不清除的状况下，因为长度问题，文字也会直接呈现到下一行
但是只是因为大小设置合理，恰巧呈现出了一样的效果，其实不设置 clear:left时 footer这个div创建在了header之下，背景颜色可以证明。
设置之后，直接创建在了 拥有最大高度浮动的div之下，这里也就是left之下。

布局设计时，最好加上 clear:left/clear:xxx
*/
}

</style>
</head>
<body>

<div id="container">

<div id="header">header</div>

<div id="left">left</div>

<div id="content">cttaaaa aaaa</div>
<!--将文本内容长度缩小至header-left之内，content div会创建在left右侧，因为长度足够容纳他们。-->

<div id="footer">faaaaaaaaaaaaaaaaaaaaa</div>
<!--此时如果将此内容长度缩小至header-left以内,div创建位置不变，不过文字会呈现在left右侧，因为那一段长度足够容纳footer的内容了-->
</div>

<!--最后 写在这里，浮动布局问题，就是去看 层数是1或者2，都是1，垂直创建，都是2，横向创建。
横向创建的话然后根据长度判断是否大于最大长度值，1个或者两个或多个div相加大于最大长度，下一行创建，小于或者等于，仍然横向创建
需要注意，判断的都是div的长度 高度，而不是字长度，字高度。而在不设置div长度高度的时候，字长就决定了div长度，是否有换行决定了div的高度（在未设置长度时，div里的内容长到这一行容纳不下的时候加回车可以换行而且增加div高度。）

其次，div里显示的文本内容不是完全根据div的位置来算，他有一套自己的规则决定文本显示在哪，但是确是跟div绑定的。
大概就是去左不去右，去上不去下，把footer的height：10取消一下看效果。
长度长于剩下的长度，也就是不够容纳时，如果是单行内容会直接垂直显示，如果加了空格或者回车，会进行换行，换行之后的内容如果这一行剩下的长度可以容纳，那么就会横向显示。
以这个为例子，把footer的height：10的注释取消一下看效果。假如说footer div里的内容只有一行内容而且内容长度大于所剩余长度，文字就会显示在content下边。如果内容很长，但是有换行（空格也是换行 回车也是换行），而且每一行的内容又不大于剩余长度，可以容纳下，那么文字就呈现在left右边
跟上边那个比较div长度判断创建位置的一样。就是这样一个原理。

先判断div位置，然后根据div里的内容，判断他们显示在哪，怎么显示出来
我觉得这个布局时因为种种很恶心，所以直接规定好各个块的大小最好了~~~
我这个人就是这样，有的时候会想把一个东西弄明白，不过有的时候弄不明白也没关系，会用就行
字体重叠现象只存在于 规定好了div的长宽，文本显示的时候文本超出了div区域，与相邻的同层div文字出现了重叠。同层div之间肯定不会重叠，不同层的div呈现的内容也会重叠，因为只要规定好长度高度，div不变，文字出了div就有可能跟别的div文字接触，不管同层还是不同层。系统会根据div层数的不同来排版文字使得不覆盖，但是不会根据div的文字出格不出格来判断要不要在那显示。
-->
</body>
</html>




最外层一个div 包含着里头的4个div，正常出来应该是 第一行一个div 第二行两个div 第三行一个div，因为我实验东西，所以改了。

因为注释里写的太多了…这里就不解释了……………一忍不住就研究的太多，研究的细节和没用的东西……以后一定改掉，要研究重点，会实用就好了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html5 div布局
相关文章推荐
新的分享
章节导航