江苏龙网

  1. 主页 > 生活百科 > >

前端进阶高薪必看-CSS之手写篇

css

两栏布局的实现一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应，两栏布局的具体实现：
利用浮动，将左边元素宽度设置为 200px，并且设置向左浮动 。将右边元素的 margin-left 设置为 200px，宽度设置为 auto（默认为 auto，撑满整个父元素） 。
.outer {height: 100px;}.left {float: left;width: 200px;background: tomato;}.right {margin-left: 200px;width: auto;background: gold;}复制代码利用浮动，左侧元素设置固定大小，并左浮动，右侧元素设置 overflow: hidden; 这样右边就触发了 BFC，BFC 的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠 。
.left{width: 100px;height: 200px;background: red;float: left; } .right{height: 300px;background: blue;overflow: hidden; }复制代码利用 flex 布局，将左边元素设置为固定宽度 200px，将右边的元素设置为 flex:1 。
.outer {display: flex;height: 100px;}.left {width: 200px;background: tomato;}.right {flex: 1;background: gold;}复制代码利用绝对定位，将父级元素设置为相对定位 。左边元素设置为 absolute 定位，并且宽度设置为 200px 。将右边元素的 margin-left 的值设置为 200px 。
.outer {position: relative;height: 100px;}.left {position: absolute;width: 200px;height: 100px;background: tomato;}.right {margin-left: 200px;background: gold;}复制代码利用绝对定位，将父级元素设置为相对定位 。左边元素宽度设置为 200px，右边元素设置为绝对定位，左边定位为 200px，其余方向定位为 0 。
.outer {position: relative;height: 100px;}.left {width: 200px;background: tomato;}.right {position: absolute;top: 0;right: 0;bottom: 0;left: 200px;background: gold;}复制代码三栏布局的实现三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局，三栏布局的具体实现：
利用绝对定位，左右两栏设置为绝对定位，中间设置对应方向大小的 margin 的值 。
.outer {position: relative;height: 100px;}.left {position: absolute;width: 100px;height: 100px;background: tomato;}.right {position: absolute;top: 0;right: 0;width: 200px;height: 100px;background: gold;}.center {margin-left: 100px;margin-right: 200px;height: 100px;background: lightgreen;}复制代码利用 flex 布局，左右两栏设置固定大小，中间一栏设置为 flex:1 。
.outer {display: flex;height: 100px;}.left {width: 100px;background: tomato;}.right {width: 100px;background: gold;}.center {flex: 1;background: lightgreen;}复制代码利用浮动，左右两栏设置固定大小，并设置对应方向的浮动 。中间一栏设置左右两个方向的 margin 值，注意这种方式**，中间一栏必须放到最后：**
.outer {height: 100px;}.left {float: left;width: 100px;height: 100px;background: tomato;}.right {float: right;width: 200px;height: 100px;background: gold;}.center {height: 100px;margin-left: 100px;margin-right: 200px;background: lightgreen;}复制代码圣杯布局，利用浮动和负边距来实现 。父级元素设置左右的 padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置 margin 负值将其移动到上一行，再利用相对定位，定位到两边 。
.outer {height: 100px;padding-left: 100px;padding-right: 200px;}.left {position: relative;left: -100px;float: left;margin-left: -100%;width: 100px;height: 100px;background: tomato;}.right {position: relative;left: 200px;float: right;margin-left: -200px;width: 200px;height: 100px;background: gold;}.center {float: left;width: 100%;height: 100px;background: lightgreen;}复制代码双飞翼布局，双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的 margin 值来实现的，而不是通过父元素的 padding 来实现的 。本质上来说，也是通过浮动和外边距负值来实现的 。
.outer {height: 100px;}.left {float: left;margin-left: -100%;width: 100px;height: 100px;background: tomato;}.right {float: left;margin-left: -200px;width: 200px;height: 100px;background: gold;}.wrApper {float: left;width: 100%;height: 100px;background: lightgreen;}.center {margin-left: 100px;margin-right: 200px;height: 100px;}复制代码水平垂直居中的实现利用绝对定位，先将元素的左上角通过 top:50%和 left:50%定位到页面的中心，然后再通过 translate 来调整元素的中心点到页面的中心 。该方法需要考虑浏览器兼容问题 。
.parent {position: relative;}.child {position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}复制代码利用绝对定位，设置四个方向的值都为 0，并将 margin 设置为 auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中 。该方法适用于盒子有宽高的情况：


推荐阅读


上一篇：淘宝降权是啥意思 淘宝商家降权是什么意思

下一篇：微波炉煮饭方法推荐