背景html代码:
DEMO
inline-block+text-align;子元素设置display:inline-block:宽度根据内容变化
text-align:对inline元素起作用;
缺点在于影响所有元素;
兼容性非常好;
display:inline,zoom:1兼容ie6 7
table + margin
- .parent{
- text-align: center;
- }
- .child{
- display: inline-block;
- }
子元素设置display:table,table非常像block,但是宽度会随着内容变化;
子元素设置margin:0 auto;
优点在于只设置child,不影响父元素;
absolute +transform
- .child {
- display: table;
- margin: 0 auto;
- }
子元素设置position:absolute;
父元素设置position:relative;
absolute默认没有宽度,宽度由父元素决定;
子元素:left:50%;
子元素:transform:translateX(-50%);(百分比为自身的宽度);
优点在于脱离文档流,不影响别的元素,缺点在于兼容性;
flex + justify-content
- .parent{
- position: relative;
- }
- .child{
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
- }
父元素:display:flex;justify-content:center;
或者子元素:margin:0 auto;
优点在于只需要设置父元素,缺点在于兼容性;
- .parent{
- display: flex;
- justify-content: center;
- }
- .child{
- margin: 0 auto;
- }
display:table-cell;转换为单元格;
兼容性好:可以兼容到ie8;
- .child{width:100%;}
- .parent{
- display: table-cell;
- vertical-align: middle;
- }
absolute+transform
优点是子元素不会干扰其它元素,缺点在于兼容性;
- .parent{
- position: relative;
- }
- .child{
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
- }
flex + align-items
只需要设置parent的属性,缺点在于兼容性;
- .parent {
- display: flex;
- align - items: center;
- }
absolute + transform;
- .parent{
- text-align: center;
- display: table-cell;
- vertical-align: middle;
- }
- .child{
- display: inline-block;
- }
flex + justify-content + align-items;
- .parent{
- position: relative;
- }
- .child{
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%,-50%);
- }
- .parent {
- display: flex;
- justify - content: center;
- align - items: center;
- }
改进:左右皆浮动;position:relative;层级提高;
- .parent{
- }
- .left{
- float: left;
- width: 100px;
- }
- .right{
- margin-left: 120px;
- }
overflow-hidden;触发bfc模式,和外界隔离;ie6下不支持;
- .parent {
- }.left {
- float: left;
- width: 100px;
- position: relative;
- }.right - fix {
- float: right;
- width: 100 % ;
- margin - left: -100px;
- }.right {
- margin - left: 120px;
- }
display:table;子元素:table-cell,定长为总宽度;父元素,table-layout;不支持margin,支持padding;
- .parent{
- }
- .left{
- float: left;
- width: 100px;
- margin-right: 20px;
- }
- .right{
- overflow: hidden;
- }
父元素:display:flex:子元素flex:1
- .parent {
- display: table;
- width: 100 % ;
- table - layout: fixed; //固定表格布局,相对自动表格布局,提高了浏览器运行效率
- }.left,
- .right {
- display: table - cell;
- }.left {
- width: 100px;
- padding - right: 20px;
- }
定宽+定宽+自适应
- .parent{
- display: flex;
- }
- .left{
- width: 100px;
- margin-right: 20px;
- }
- .right{
- flex: 1;
- }
不定宽+自适应
- .parent{
- }
- .left,.center{
- float: left;
- width: 100px;
- margin-right: 20px;
- }
- .right{
- overflow: hidden;
- }
float + overflow,在ie6存在兼容性问题;
可任意改变左列宽度,右边不受影响:
- .parent{
- }
- .left{
- float: left;
- margin-right: 20px;
- }
- .right{
- overflow: hidden;
- }
- .left p{width: 200px;}
table:通过内容撑开,width:0.1%,ie6 7 不兼容;
table宽度由内容决定
- .parent {
- display: table;
- width: 100 % ;
- }.left,
- .right {
- display: table - cell;
- }.left {
- width: 0.1 % ;
- padding - right: 20px;
- }.left p {
- width: 200px;
- }
flex:兼容性问题,ie10 以上;
不定宽+不定宽+自适应
- .parent{
- display: flex;
- }
- .left{
- margin-right: 20px;
- }
- .right{
- flex: 1;
- }
- .left p{width: 200px;}
等分布局
- .parent {
- }.left,
- .center {
- float: l###eft;
- margin - right: 20px;
- }.right {
- overflow: hidden;
- }.left p,
- .center p {
- width: 100px;
- }
利用float:
父容器增加一定宽度
关键为设置:box-sizing:border-box;
优点在于兼容性好,ie 6 7浮点兼容性问题;结构和样式有一定耦合性,这也是不足之处,改变结构需要改变样式;
- .parent{
- margin-left: -20px;
- }
- .column{
- float: left;
- width: 25%;
- padding-left: 20px;
- box-sizing: border-box;
- }
利用table:
在外侧嵌套一个盒子,扩展其宽度,然后设置平分;
table-layout:fixed;布局优先,加速布局,单元格没有设置宽度则平分;
- .parent-fix{
- margin-left: -20px;
- }
- .parent{
- display: table;
- width:100%;
- table-layout: fixed;
- }
- .column{
- display: table-cell;
- padding-left: 20px;
- }
利用flex:
item的flex都设置为1;
分布的是剩余空间;跟数量没有关系;缺点在于兼容性;
等高布局
- .parent{
- display: flex;
- }
- .column{
- flex: 1;
- }
- //选择前面还有一个column的元素
- .column+.column{
- margin-left:20px;
- }
table
天然等高;
flex
天然等高;
float
伪等高:
position方案:
absolute;
Flex方案:
不设定高度宽度则为全部自适应布局;
缺点在于,资源上有所冗余;
响应式一般采取自适应模式
语法:
- @media screen and(max - width: 320px) {
- //视窗,并且最大屏幕320px;
- }
功能:
改变布局,控制显示与隐藏;
相当于覆盖前面的设置;
规范不佳,维护难;
团队应该有自己的规范;
业务类 album .. 文件引入 行内元素 不推荐 但是偶尔需要用外联引入内联引入
- - base lib ui
来源: https://www.2cto.com/kf/201709/683499.html