.content
flex：1 充满剩余空间，形成自适应效果，不设置的话默认为内容宽度
CSS-Layout
旨在打造详尽的前端布局代码学习库（自从用了框架开发，CSS生疏了不少，所以开这个库练练手）
SF不能正确解析含有中文的网址，所以某些预览链接无法跳转，请访问我的博客阅读此文
子元素为行内元素还是块状元素，宽度一定还是宽度未定，采取的布局方案不同。
方案选择基本思路：
子元素为
行内元素：对父元素设置text-align:center;
定宽块状元素: 设置左右margin值为auto;
不定宽块状元素: 设置子元素为display:inline,然后在父元素上设置text-align:center;
通用方案: flex布局，对父元素设置display:flex;justify-content:center;
常用方法举例：
NOTE:为了统一展示效果，在以下实例代码中对父子元素设置了固定宽高，实际可以不设置，由子元素内容来控制其宽度
方法一：text-align + inline-block
设置：对父元素设置text-align:center(将会对行内元素起作用)，子元素设置display:inline-block（兼容IE6、7 时，替换为display:inline;zoom:1;）;
优点：兼容性良好
缺点： 需要额外代码修复因继承父元素的text-align:center对子元素内容排列造成的影响，如需要添加.child{text-align:left}
方法二：table + margiin
设置：对子元素设置display:table(此元素会作为块级表格来显示，元素表现类似block，但是宽度跟随内容宽度)（兼容IE6、7 时，替换div结构为table结构即可）;
优点： 只需要对子元素进行设置
缺点： 向下兼容IE6、7时，需要更改html结构
方法三：absolute + transform
设置：对父元素设置position:realatve(使其作为参照物)，对子元素设置position:absolute;left:50%(绝对定位元素的宽度也随内容而定)，然后对子元素设置transform:translateX(-50%)（兼容IE6、7 时，替换div结构为table结构即可）;
优点： 居中元素不会对其他元素造成影响
缺点：transform不兼容低版本IE
方法四：flex + justify-content
设置：对父元素设置display:flex;justify-content:center(这样其内部的元素会变为align-items)，align-items的宽度默认为auto，所以跟随内容宽度变化，继而justify-content:center属性会使子元素居中
优点：只需要对父元素进行设置
缺点：flex不兼容低版本IE
垂直居中垂直居中对于子元素是单行内联文本、多行内联文本以及块状元素采用的方案是不同的。
常用方法举例：父元素一定，子元素为单行内联文本：设置父元素的height等于行高line-height
父元素一定，子元素为多行内联文本：设置父元素的display:table-cell或inline-block，再设置vertical-align:middle;
块状元素:设置子元素position:absolute 并设置top、bottom为0，父元素要设置定位为static以外的值，margin:auto;
通用方案: flex布局，给父元素设置{display:flex; align-items:center;}
方法一：table-cell + vertical-align
设置：子容器高度不固定，对父元素设置display:table-cell(parent变为单元格，)，继续设置vertical-align:center（使inline元素垂直居中）;
优点：兼容性好（支持 IE 8）
缺点：IE 8 以下版本需要调整页面结构至 table
方法二：absolute + transform
设置：对父元素设置position:realatve(使其作为参照物)，对子元素设置position:absolute;left:50%(绝对定位元素的宽度也随内容而定)，然后对子元素设置transform:translateY(-50%)（兼容IE6、7 时，替换div结构为table结构即可）;
优点： 居中元素不会对其他元素造成影响
缺点：transform不兼容低版本IE
方法三：flex + align-items
设置：对父元素设置display:flex(align-items默认属性为stretch),继而设置align-items:center即可;
优点： 只需要对父元素进行设置
缺点：flex align-items不兼容低版本IE
水平居中且垂直居中结合以上介绍到的水平和垂直居中方法进行设置
多列布局 一列定宽，一列自适应宽度方法一：text-align + inline-block + table-cell + vertical-align
方法二：absolute + transform
方法三：flex + justify-content + align-items
1.一列定宽，一列自适应宽度（float+margin）
预览 源码
2.一列定宽，一列自适应宽度（float+margin）fix 改良版
预览 源码
NOTE：此方法不会存在 IE 6 中3像素的 BUG，但 .left 不可选择， 需要设置 .left {position: relative} 来提高层级。 此方法可以适用于多版本浏览器（包括 IE6）。缺点是多余的 HTML 文本结构。
3.一列定宽，一列自适应宽度( float + overflow )
预览 源码
4.一列定宽，一列自适应宽度( table + table-cell )
预览 源码
5.一列定宽，一列自适应宽度( flex )
预览 源码
多列定宽，一列自适应宽度基于上面对于一列定宽一列自适应的需求实现，多列定宽只需要在原有一列定宽的基础上添加新的列即可，最后的列依然会自适应剩余宽度。
以 flex 的实现为基础可以作如下改造：
多列不定宽，一列自适应宽度.left
左侧定宽
.center
第二列定宽
.content
flex：1 充满剩余空间，形成自适应效果，不设置的话默认为内容宽度
基于以上一列定宽一列自适应的实现，进行改造，左侧不定宽区域的宽度任意（也可以由内部的内容来决定宽度就可以实现不定宽且自适应），继续增加一列即可变为多列，都很方便实现
多列等分布局1.多列等分布局（float）
预览 源码
2.多列等分布局（table）
预览 源码
3.多列等分布局（flex）
预览 源码
多列等高布局1.多列等高布局（table）
预览 源码
2.多列等高布局（flex）
预览 源码
全屏布局1.弹性全屏布局（position）
预览 源码
2.弹性全屏布局（flex）
预览 源码
3.百分比布局，以上宽度设置更改为百分比即可
4.根据内容完全自适应，position有限制无法满足，flex可以做到
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111772.html
摘要：前端面试每日题，以面试题来驱动学习，每天进步一点让努力成为一种习惯，让奋斗成为一种享受相信坚持的力量项目地址推荐欢迎跟一起折腾前端，系统整理前端知识，目前正在折腾，打算打通算法与数据结构的任督二脉。 《论语》，曾子曰：吾日三省吾身（我每天多次反省自己）。 前端面试每日3+1题，以面试题来驱动学习，每天进步一点！ 让努力成为一种习惯，让奋斗成为一种享受！相信 坚持 的力量！！！ 项目...
摘要：前端面试每日题，以面试题来驱动学习，每天进步一点让努力成为一种习惯，让奋斗成为一种享受相信坚持的力量项目地址推荐欢迎跟一起折腾前端，系统整理前端知识，目前正在折腾，打算打通算法与数据结构的任督二脉。 《论语》，曾子曰：吾日三省吾身（我每天多次反省自己）。 前端面试每日3+1题，以面试题来驱动学习，每天进步一点！ 让努力成为一种习惯，让奋斗成为一种享受！相信 坚持 的力量！！！ 项目...
摘要：每个列表项始于标签。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。标签的属性应当与相关元素的属性相同。姓名性别姓名性别单元格标签可以定义表格中的一个单元格，表示一个单元格。 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位： web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望： 未来IT行业企业需求...
阅读 1069·2021-11-25 09:43
阅读 693·2021-11-22 14:45
阅读 3811·2021-09-30 09:48
阅读 1053·2021-08-31 09:41
阅读 1968·2019-08-30 13:52
阅读 1972·2019-08-30 11:24
阅读 1337·2019-08-30 11:07
阅读 947·2019-08-29 12:15
