【原创】HTML&CSS学习笔记（7） ----HTML网页设计的一些模式总结，document flow ; float ;position:static absolute fixed和设计模式

网页格式总结的必要性

从《head first  HTML与 CSS》学习，看html的顺便也看了几种网页格式，打算总结下书上的和自己平时接触的网页格式。我不能只是写点代码，如果想要理解html和css  头脑里得有一些好的网页设计格式，模板，范式等，才能更好的去想着怎么使用css css3等好效果。

毕竟html最终是为了实现，漂亮的有意思的网页，html和css代码并不是目的，只是工具和手段。

奔着目的去学习是不是更好些呢，这样学习起来才更有目标性。

 

修改html格式的几个主要方法

 

（1）基础布局规则：文档流  & 流体布局   html flow 或document flow

• 网页最基础的布局规则：流体布局，其他的布局都是在他的基础上修改
• 整个html是一个流体，先排block element 然后再排布 inline element，理论上只有1个主流：文档流
• 先排布block element，block element 是从上流到下，而且每个block都有一个换行，上下一定有边界
• 无论是相邻/嵌套，只要不是浮动，只要的block元素的垂直边相接,并且没边框阻挡，就会折叠margin（取max）
• 然后排版block包含的 inline element ，排布方式是从上到下，从左到右，或者说是从左上流到右下。
• 内联元素也可以有外边距，但有些不生效。比如img
• 文本 text 这种inline元素，会根据内容auto
• html页面是自动流动的

 

（2） float 和 clear

float：把一个元素设置为浮动元素

• float的意义，我理解是在html的主流里拿出去一个元素，可以认为是一个支流（仍然属于文档流）
• float出去的这个元素，浮动元素只被承认其block的次序序号（下面block内的内容会根据次序号在上面的浮动元素周围环绕），但排版不再是主流里结构里的一部分！
• 其他block element 排版flow会无视他，但是float逻辑单元下面的block元素的内部inline元素就像水，依然会注意到float 里的内容，而考虑其一起排版
• 可能的BUG：并且支流可能会和主流重叠，导致inline的内容互相推挤，但不会覆盖，因为float到哪儿，还是浏览器自动决定的！！！
• float的效果：block element分布时将无视float的 block element，但是inline元素还是会识别并绕开

float元素使用技巧

• float除了对 block element 也可以对 inline element使用
• float元素，一般要固定其width
• float：left 或 float right 

 

clear:定义一个元素的左/右不能有浮动元素

• float 和clear 配合使用 clear:left; 

 

（3）postion  定位属性

• position属性，有几种不同的属性值，其默认值是static，static模式没有z-index
• 指定位置或者偏移量的时候，都可以用绝对大小，或者用百分比等相对值
• fixed aboslute relative模式都有z-index,所以 z-index:1 等才生效，可以为负值，值越大层次越高

 

position:static 

默认方式，表示仍然是正常的文档流，doc flow

position:fixed   

表示把元素，固定在相对于浏览器的固定位置，所以不会跟着浏览器页面滚动而滚动

可能的BUG：可能会出现内容重叠，甚至有时候是故意的

position:absolute （不再属于doc flow,已经从 doc flow里删除了）

absolute positioning

绝对定位的元素，会被从文档流删除掉，也就是block 或 inline 元素都不识别

相对于父元素/上层容器的位置固定，一般是对上层的边界做一定的偏移量，使用top,right bottom left指定相对父元素位置

可能的BUG：很可能出现内容重叠情况等

看起来一般绝对布局，是在流体布局--冻结布局 等配合使用的，可能出现遮挡，有时候允许遮挡

position:relative 

基础是正常的 文档流，但是页面显示前，会根据本身正常位置，进行一定量偏移，使用top,right bottom left指定偏移量

 

 

html经典设计格式总结

liquid layout   / 流体布局/： 基础布局形式
                        基本思想：信任客户的浏览器，浏览器当时被拉成什么样，网页就跟着变化

                       浏览器形状，变化比较大的时，往往网页会因为变化变得很奇怪

float layout     // 浮动布局   部分元素float出去

                       主流之外，独立1或几条？支流出去

frozen layout  // 冻结布局：

                          基本思想：不信任浏览器，内容区的width是固定的，好处是格式就固定了

                                           不根据浏览器的实际宽度调整，一般还可以，但是浏览器太宽，太窄都会有问题

jello layout     // 凝胶布局：

                          基本思想：不信任浏览器，内容区的width固定，

                         内容不根据浏览器的实际宽度调整，但边界根据浏览器长宽调整

                          是相对于是固定内容和变化浏览器的一个过渡

table layout    //表格布局,html的，css的

                         像表格一样，有很多元素，这些元素之间，用表格的形式控制相对展示位置

                        一般来说，分栏布局，多栏布局，适合table layout

 

 

HTML自己应该多用 这种简单框架图设计下 版式

大概就是这个意思

其实这就是版面设计吧，之前印刷行业也应该有的

 

 

 

实际的网页格式参考

 

（1） 简书的BLOG格式: blog的常用凝胶布局

是BLOG的常用格式，这应该就书上写的所谓的凝胶模式，jello layout

liquid layout   / 流体布局/：

         如果浏览器扩大，整个网页布局也会自动扩展，充满整个浏览器 显示区域

         一般来说，默认的模式就这种，因为一般来说，子元素的width是父元素的100%，auto自动充满

        可能的坏处，就是可能因为自动扩展，可能格式会显得不好看，甚至乱了。

frozen layout  / 冻结布局：

          冻结布局会锁定元素，表现效果是，这些元素冻结在页面上，不能移动

          实现方法是，设置一些元素，或套用更高级的div 元素，设置其width为固定值，如 width:800px

         好处是固定宽度，不随着调整浏览器大小而改变

        坏处是浏览器宽的时候，边上会出现空白区域，浏览器小了，会显示不全？

jello layout     / 凝胶布局：

       凝胶布局，就是把一些内容元素布局固定，但是边上设置为auto

      比如

          元素选择器{

                            witdth:800px;

                            magin-left:auto;

                            magin-right:auto;

                            }

 

 

（2）cnblogs的格式：浮动布局？

看起来像是左右分栏了

float layout 浮动布局

         浮动布局，一般是有限定width的部分浮动，比如sidebar宽度固定

      ，一般不会浮动 主体内容 body / article等

        

 

（3） B站首页：凝胶+表格布局？

表格布局

       内容里一般是form的各种内容：如输入框，video,用户名密码等

       内容去的主体布局lay用的是table

               有的是html的table

               有的是css的table布局，一般来说，这种更灵活好看

 

 

B站里的具体内容页面：凝胶+sidebar浮动布局