前端、框架总结

最新推荐文章于 2021-09-05 14:02:10 发布

ajgwlb7387

最新推荐文章于 2021-09-05 14:02:10 发布

阅读量178

点赞数

文章标签：前端框架前端 javascript ViewUI

原文链接：http://www.cnblogs.com/TS-Prime/p/10758908.html

版权

一、布局

页面常用布局

常用的页面布局方式主要有：浮动，弹性盒子，定位，设置表格模式，行内与块级相结合。

布局方式	Float	flex	position	table	block&Inline-block
兼容性	IE4	IE10	IE7	IE8	IE8
注意	清除浮动	设置自适应子容器与父容器	嵌套使用,各中关系	内容会自适应	效果有局限性，行内块之间有缝隙

1.1.浮动布局（Float）

值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

1）浮动：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，会导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。使用浮动布局方式，一定要记得清楚浮动，不清楚浮动有可能导致元素重叠，或其他兼容问题。

1.1) 添加额外标签

　　通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，其他标签br等亦可。

　　缺点：可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦，这是坚决不能忍受的，所以你看了这篇文章之后还是建议不要用了吧。

1.2) 父元素设置 overflow：hidden

　　原理来自于块级格式化上下文，此方法会使溢出内容隐藏

1.3）父元素设置overflow:auto

　　原理来自于块级格式化上下文，此方法在多个嵌套后，firefox某些情况会造成内容全选。元素内容超出时会使其显示导致样式错乱。

1.4）使其父元素也设置浮动

　　会导致与父元素相邻的元素的布局会受到影响，不可能一直浮动到body，不推荐使用

1.5）父元素设置display:table

使用此方法父元素会具有table表格相应属性根据内容自适应，有可能与布局样式不符。

1.6）使用:after 伪元素其原理与加空标签一样，用伪元素可以精简代码，优雅dom

定位position

定位文档流：在使用position这个属性时，分两种情况。

（1）当position:relative时，并没有脱离普通文档流，元素根据top,right,left,bottom值相对自身定位，元素本身所占的位置会保留。

（2）当position:absolute;与position:fixed;时，元素脱离普通文档流，不再占据位置，类似一个漂浮层。absolute定位是相对于自己最近的“祖先元素”定位。Fixed定位是相对于浏览器窗口进行定位的。

弹性布局flex

弹性布局不会脱离普通文档流，也不会改变当前元素的定位，它是一个自适应的伸缩容器。

设置表格布局display:table

设置display:table的元素会被以作为块级表格来显示，前后自带换行符。

在html4中<table></table>标签的js源码中可以了解到，也是利用css中display:table来实现的。而在布局中，我们选中display:table而不是<table></table>来布局，是为了取长补短。

二、框架

HTML框架：

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

CSS框架：

CSS框架是一系列CSS文件的集合体，包含了基本的元素重置，页面排版、网格布局、表单样式、通用规则等代码块,用于简化web前端开发的工作，提高工作效率。

JS框架：

JavaScript框架如今正融入到属于自己的Web和移动应用程序中。软件的开发方向正向客户端转移。构建后端API和丰富的前台客户端是一大趋势，而这些又多由JavaScript框架编写而成。这似乎是开发人员正在使用的一种手段。在开发前台界面时应用API，那么，你便会更加熟悉API，你也会对你的工作内容了如指掌。应用该项技术编写客户端，那么，编写iPhone或者Android应用程序就会变得非常容易。