👦个人简介：张清悠，字澄澈，号寻梦客，爱好旅行、运动，主攻前端方向技术研发，副攻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 }
总结：
以上就是布局和兼容全部过程,原创不易，期待您的点赞关注与转发评论😜😜😜
