网页格式总结的必要性
从《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浮动布局