1、css两栏布局的实现？
相关资料：
/*两栏布局一般指的是页面中一共两栏，左边固定，右边自适应的布局，一共有四种实现的方式。*//*以左边宽度固定为00px为例*//*（1）利用浮动，将左边元素宽度设置为00px，并且设置向左浮动。将右边元素的margin-left设置为00px，宽度设置为auto（默认为auto，撑满整个父元素）。*/.outer{height:px;}.left{float:left;height:px;width:00px;background:tomato;}.right{margin-left:00px;width:auto;height:px;background:gold;}/*（）第二种是利用flex布局，将左边元素的放大和缩小比例设置为0，基础大小设置为00px。将右边的元素的放大比例设置为1，缩小比例设置为1，基础大小设置为auto。*/.outer{display:flex;height:px;}.left{flex-shrink:0;flex-grow:0;flex-basis:00px;background:tomato;}.right{flex:auto;/*11auto*/background:gold;}/*（3）第三种是利用绝对定位布局的方式，将父级元素设置相对定位。左边元素设置为absolute定位，并且宽度设置为00px。将右边元素的margin-left的值设置为00px。*/.outer{position:relative;height:px;}.left{position:absolute;width:00px;height:px;background:tomato;}.right{margin-left:00px;height:px;background:gold;}/*（4）第四种还是利用绝对定位的方式，将父级元素设置为相对定位。左边元素宽度设置为00px，右边元素设置为绝对定位，左边定位为00px，其余方向定位为0。*/.outer{position:relative;height:px;}.left{width:00px;height:px;background:tomato;}.right{position:absolute;top:0;right:0;bottom:0;left:00px;background:gold;}
回答：
两栏布局一般指的是页面中一共两栏，左边固定，右边自适应的布局，一共有四种实现的方式。
以左边宽度固定为00px为例
-（1）利用浮动，将左边元素宽度设置为00px，并且设置向左浮动。将右边元素的margin-left设置为00px，宽度设置为auto（默认为auto，撑满整个父元素）。
-（）第二种是利用flex布局，将左边元素的放大和缩小比例设置为0，基础大小设置为00px。将右边的元素的放大比例设置为1，缩小比例设置为1，基础大小设置为auto。
-（3）第三种是利用绝对定位布局的方式，将父级元素设置相对定位。左边元素设置为absolute定位，并且宽度设置为00px。将右边元素的margin-left的值设置为00px。
-（4）第四种还是利用绝对定位的方式，将父级元素设置为相对定位。左边元素宽度设置为00px，右边元素设置为绝对定位，左边定位为00px，其余方向定位为0。
、css三栏布局的实现？相关资料：
/*三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局，一共有五种实现方式。这里以左边宽度固定为px，右边宽度固定为00px为例。*//*（1）利用绝对定位的方式，左右两栏设置为绝对定位，中间设置对应方向大小的margin的值。*/.outer{position:relative;height:px;}.left{position:absolute;width:px;height:px;background:tomato;}.right{position:absolute;top:0;right:0;width:00px;height:px;background:gold;}.center{margin-left:px;margin-right:00px;height:px;background:lightgreen;}/*（）利用flex布局的方式，左右两栏的放大和缩小比例都设置为0，基础大小设置为固定的大小，中间一栏设置为auto*/.outer{display:flex;height:px;}.left{flex:00px;background:tomato;}.right{flex:px;background:gold;}.center{flex:auto;background:lightgreen;}/*（3）利用浮动的方式，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的margin值，注意这种方式，中间一栏必须放到最后。*/.outer{height:px;}.left{float:left;width:px;height:px;background:tomato;}.right{float:right;width:00px;height:px;background:gold;}.center{height:px;margin-left:px;margin-right:00px;background:lightgreen;}/*（4）双飞翼布局，利用浮动和负边距来实现。父级元素设置左右的pedding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置margin负值将其移动到上一行，再利用相对定位，定位到两边。*/.outer{height:px;padding-left:px;padding-right:00px;}.left{position:relative;left:-px;float:left;margin-left:-%;width:px;height:px;background:tomato;}.right{position:relative;left:00px;float:right;margin-left:-00px;width:00px;height:px;background:gold;}.center{float:left;width:%;height:px;background:lightgreen;}/*（5）双飞翼布局，双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的margin值来实现的，而不是通过父元素的pedding来实现的。本质上来说，也是通过浮动和外边距负值来实现的。*/.outer{height:px;}.left{float:left;margin-left:-%;width:px;height:px;background:tomato;}.right{float:left;margin-left:-00px;width:00px;height:px;background:gold;}.wrapper{float:left;width:%;height:px;background:lightgreen;}.center{margin-left:px;margin-right:00px;height:px;}
回答：
三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局，一共有五种实现方式。这里以左边宽度固定为px，右边宽度固定为00px为例。（1）利用绝对定位的方式，左右两栏设置为绝对定位，中间设置对应方向大小的margin的值。（）利用flex布局的方式，左右两栏的放大和缩小比例都设置为0，基础大小设置为固定的大小，中间一栏设置为auto。（3）利用浮动的方式，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的margin值，注意这种方式，中间一栏必须放到最后。（4）圣杯布局，利用浮动和负边距来实现。父级元素设置左右的pedding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置margin负值将其移动到上一行，再利用相对定位，定位到两边。双飞翼布局中间列的宽度不能小于两边任意列的宽度，而双飞翼布局则不存在这个问题。（5）双飞翼布局，双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的margin值来实现的，而不是通过父元素的pedding来实本质上来说，也是通过浮动和外边距负值来实现的。3、实现一个宽高自适应的正方形
/*1.第一种方式是利用vw来实现*/.square{width:10%;height:10vw;background:tomato;}/*.第二种方式是利用元素的margin/padding百分比是相对父元素width的性质来实现*/.square{width:0%;height:0;padding-top:0%;background:orange;}/*3.第三种方式是利用子元素的margin-top的值来实现的*/.square{width:30%;overflow:hidden;background:yellow;}.square::after{content:"";display:block;margin-top:%;}
4、实现一个三角形
/*三角形的实现原理是利用了元素边框连接处的等分原理。*/.triangle{width:0;height:0;border-width:px;border-style:solid;border-color:tomatotransparenttransparenttransparent;}
5、一个自适应矩形，水平垂直居中，且宽高比为:1
/*实现原理参考自适应正方形和水平居中方式*/.box{position:absolute;top:0;right:0;left:0;bottom:0;margin:auto;width:10%;height:0;padding-top:0%;background:tomato;}
长按下面