前端布局和兼容

👦个人简介：张清悠，字澄澈，号寻梦客，爱好旅行、运动，主攻前端方向技术研发，副攻Unity 3D、C++、Python人工智能等
📝个人寄语：学会不为过程的缓慢而焦虑，即使暂时未能如你所愿，但只要你在努力，你就在不断成长！
🙏个人公众号:清悠小猿(海量源码尽在其中，欢迎关注)

前言：

版心和布局流程
阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在
制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。 “版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为
960px、980px、1000px、1200px等。

一、布局流程

为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：
1、确定页面的版心（可视区）。
2、分析页面结构。
3、制作HTML结构 。
4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。

二、常见的网页布局分类

1、表格布局

优点：

（1）表格布局，使得结构位置更简单；
（2）对于学习初期，table更容易理解；
（3）数据化的存放更合理
缺点：

（1）标签结构多，复杂，影响网站性能；

（2）不利于搜素引擎抓取信息，影响网站的排名；

（3）table一旦设计完成很难通过css让他展现新的面貌

2、DIV+CSS布局

网页HTML代码主要使用DIV将内容模块化，用CSS控制其显示效果。
浮动布局：是DIV+CSS布局中最基本也是最常用的属性，用于实现多列功能，可以实现一行显示多个
div的功能。

在div+css布局之前采用的是table表格的布局方式。由于table表格布局有不足和缺点，后来慢慢就采
用了div+css布局的方式。

优点：

（1）符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您 的网站不会因为将来网络应用的升级而被淘汰。

（2）CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽。

（3）支持浏览器的向后兼容，使您的网站都能够有很好的兼容性。

（4）样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。

（5）搜索引擎更加友好。

（6）表现和结构分离，在团队开发中更容易分工合作而减少相互关联性

（1）表格布局，使得结构位置更简单；

（2）对于学习初期，table更容易理解；

（3）数据化的存放更合理；

3、流动布局（html网页默认的布局方式）

特点：

1、块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都 为100%。

2、内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一 行）

4、浮动布局(float)

特点：

默认布局下，块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示。就需要使用float 来实现。

5、层模型

特点：

如果我想一个div在另外一个div的上面，我们就需要可以使用绝对定位来完成，层模型的三种定位方式 relative、absolute、fixed

三、浏览器兼容性设置

1、 兼容的产生

由于市场上浏览器种类众多，而不同浏览器其内核亦不尽相同，所以各个浏览器对网页的解析就有一定出入，这也是导致浏览器兼容问题出现的主要原因，我们的网页需要在主流浏览器上正常运行，就
需要做好浏览器兼容。

俗话说：没有IE就没有伤害。

2、图片有三像素（小技巧）

float display vertical-align

img作默认的display是inline-block， 匿名块框把行内元素包裹起来，会撑出一定空隙。

1、将图片转换成块，img{display：block；}

2、如果要让图片成行显示，img{float：left；}或者 img{float：right；}

3、给图片的父标签加 font-size:0;

4、给图片加一个对齐方式img{vertical-align:middle; }

3、css设置元素透明度问题

opacity:x x值为0~1，值越小越透明 opacity:0.5(含IE8以下不支持)

filter:alpha(opacity=x) x值为0~100，值越小越透明 filter：alpha(opacity=40)

4、css圆角问题

低版本不支持

width：100px;

height:100px;

boder-radius ：50%；（50%-100%都有效）

5、css hack

CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的。
CSS hack用来解决有些css属性在不同浏览器中显示的效果不一样的问题。
样式Hack
css样式属性名前加上一些只有特定浏览器才能识别的hack前缀，实现页面效果

element{ color：#666\9； 
//IE8 IE9 * color：#999；
 //IE7 _color:#EBEBEB； //IE6 }

总结：

以上就是布局和兼容全部过程,原创不易，期待您的点赞关注与转发评论😜😜😜