H5学习之10 div布局

<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，因为我实验东西，所以改了。

因为注释里写的太多了…这里就不解释了……………一忍不住就研究的太多，研究的细节和没用的东西……以后一定改掉，要研究重点，会实用就好了。

H5学习之10 div布局相关推荐

Web前端开发之CSS学习笔记10—栅格布局（网格布局）
目录 [网格布局grid] 1.网格布局的构成 2.父容器grid container 3.生成网格容器 display:grid/inline-grid 4.构建网格 grid-template-c ...
html5 div布局table,H5的div布局与table布局详解
这次给大家带来H5的div布局与table布局详解,H5div布局与table布局的注意事项有哪些,下面就是实战案例,一起来看一下. 本文实例为大家解析了html5 p布局与table布局,供大家参考 ...
关于css加div布局和表格布局,菜鸟学习笔记:表格布局和div+css布局
网页布局可以通过表格和div元素来实现(注:table布局已经淘汰),首先我们来看看table布局表格布局导航推荐文章一个猴子成长史你看个毛线我就瞅你咋地村里出了个半边天一个猴子的成长 ...
css中div布局学习（1）
看完慕课网中的div布局,简单记录一下里面的内容: 1.实现效果: 上面实现效果主要是考虑如何实现块元素居中的问题,关键代码: margin: 0 auto; 实现代码: <!DOCTYPE h ...
HTML学习13：div和表格布局
文章目录 1.div布局 2.table布局 3.各优缺点在网页中,可以使用div或表格布局,各有哪些优劣呢? 1.div布局在网页中可以使用很多个 div,使用 div 可以将网页中的任何元素布 ...
h5的div布局详解
在实际的网页开发中,网页的整体部分一般是由div标签来进行布局的.那么在使用div布局之前就要了解div的属性 div是块级元素块级元素在页面中的独占一行默认情况下的高度由里面的内容决定.由于块级 ...
amazeui学习笔记--css（布局相关3）--辅助类Utility
amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...
div布局改进treeview导航
asp.net对新手来讲真是福音,随便拖几下就是一个网页．让我这个从asp转来的菜鸟开始兴奋不已,尤其在几个数据绑定控件还有验证控件,但两个月下来后让我对这些控件兴趣全无,尤其是数据绑定控件如grid ...
html给div设置宽度无效,HTML学习之给div高度设置百分比不生效的问题
这几天在学习HTML的知识,今天想做一个极为简单的页面,就是分为头部,内容和底部,本来用三个div即可,可是给div高度设置百分比时发现不生效,具体页面如下,非常简单. 下面是html部分: 1111 ...

H5学习之10 div布局

H5学习之10 div布局相关推荐

最新文章

热门文章