H5学习之10 div布局

来源：互联网发布：网络摄像头uid密码大全编辑：程序博客网时间：2024/06/05 18:16
<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，因为我实验东西，所以改了。
因为注释里写的太多了…这里就不解释了……………一忍不住就研究的太多，研究的细节和没用的东西……以后一定改掉，要研究重点，会实用就好了。
0 0