布局学习笔记

15布局

布局总结(尽可能全面收录,全面总结整理)

感觉布局这个东西很杂,很多种方法,

同时还要涉及到兼容性的问题,

还要涉及跟综最新的布局方式

结合实际情况选择合理的布局

布局与display属性息息相关,margin:atuo;

单列是布局相对简单.变化也不多.

主要是二列布局,三列布局布局就开始多样化了.

​ 基于这些东西来进行更深层资的理解!

固定与自适应的关系?

单列布局

​ 第一个图是升级版的max-width布局…浏览器宽度缩小低于其最大宽度时，宽度会自适应。

​ 第二个图是

双列布局

​ float+margin

​ float+overflow

​ float+table

其中用到了一个清除浮动的样式经较好玩

.clearfix:after{content:'';display:table;clear:both;}

table	此元素会作为块级表格来显示（类似 ），表格前后带有换行符。

三列布局

​ float+margin

​ position+margin

三列都用float:left的探索

​ 假如三个元素全部用float什么怎么样?有什么不足吗.代码不够精简吗?因为要考虑到塌陷的问题.

​ 圣杯布局?

​ 双飞翼布局?

统一用float 的情况适用于多个div,多达4个或者以上的时候可以这么搞

为什么不这么用,想到的一些解释

• float以后,三个div盒子的关系是相互依赖的,前面的在当盒子调节了位置,后面的盒子就会受到影响
• 如果前两者的div盒子太大,完全可能把第三个盒子给挤下去!!
  
  • 所以这种三个都float:left的方法,不方便调整,还潜在一些问题,所以不推荐使用.

flex与grid的一些东西,最新的技术,后期有时间精力的时候,自己再进一步的自学与理解!!

塌陷的本质是,浮动元素不能脱离文档流不能撑起父元素,

上图1没有浮动,依然可以撑起div

clear:left ,right,both 是什么意思?

定义和用法

clear 属性规定元素的哪一侧不允许其他浮动元素。

说明

clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下

http://www.w3school.com.cn/cssref/pr_class_clear.asp

clear属性让浮动元素与非浮动元素保持文档流排序

也就是clear:both的最终作用是,让用了clear的元素不会与float的元素发生重叠,而是排列在浮动元素之下,而且也可以撑开父div

清除浮动的本质–就是回归文档流

所有清除浮动方法的本质就是,让浮动原素回归文档流,重新撑起父级div!!!

而选择使用这个方法,也是方便调整,不用clearboth,因为还要在子元素里添加一个div 才行,如果管理的网页足够大且多的话,这种方法管理起来会非常不方便!!!

而用clearfix 添加第二类名的方法则省事很多,直接加个名子就解决所有问题

​ 而clearfix里面也分了多种类型,具体就涉及到兼容性,可维护性的多方面考虑.

经典布局–圣杯布局,双飞翼布局

​ https://www.jianshu.com/p/f9bcddb0e8b4

老式高级三列布局,不知道优点在哪里?—面试必考

圣杯布局的最大优点是优先加载中间区域的内容,优先加载也意味着优先渲染,对于内容极度友好.而双飞翼布局与对杯布局基本相同,

圣杯布局与双飞翼布局的不同之处

不同在于解决”中间栏div内容不被遮挡“问题的思路不一样：
圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。

双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。
多了1个div，少用大致4个css属性（圣杯布局中间divpadding-left和padding-right这2个属性，加上左右两个div用相对布局position: relative及对应的right和left共4个属性，一共6个；而双飞翼布局子div里用margin-left和margin-right共2个属性，6-2=4），个人感觉比圣杯布局思路更直接和简洁一点。

https://www.zhihu.com/question/21504052

圣杯思路更加简加

双飞翼实现过程中属性使用更少,其余基本相同.

---

新式布局

flex 布局

​ flex可以通这父元素display:flex轻松实现各种布局

grid布局(网络单元格布局)

新式布局非常好用,那还有必要学老式布局吗?

之前的老式布局非常繁锁,但仍有大量使用,须好好的学习,

且新式布局在兼容上问题还没有得到广泛的应用.

新的布局不断产生,使用方便,同时表现力丰富,但有一点兼容性上的问题.

所以最好的方式是都要好好学习,适应不同的需要.