讲清楚基础系列——css布局

tuomao 发布于2019-08-26 18:37 / 3532人阅读

摘要：两列或三列布局使用左右中间圣杯和双飞翼布局，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。，，同样需要设置父元素的高度方案方案，，更适合子元素宽高固定的情况是父元素的中心点，减去图片宽度和高度的一半从而达到定位效果

两列或三列布局

使用flex

float

左右position:absolute,中间margin-left,margin-right

圣杯和双飞翼布局，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。


header

  center
  left
  right

footer


header

  center

left
right

垂直水平居中

水平居中text-align:center和块级元素的margin:0 auto;

table方案，（IE8+）

absolute+margin:auto方案，兼容主流的浏览器；但是需要定义父容器的高度，否则子元素绝对定位会导致父元素的坍塌。

.absolute-aligned {
    position: relative;
    min-height: 500px;
    background: hsl(200, 100%, 97%);
}
.absolute-aligned img {
    margin: auto;
    position: absolute;
    top: 0; left: 0;
    bottom: 0; right: 0;
}

absolute+translate，(IE9+)，同样需要设置父元素的高度

.center {
    background: hsl(180, 100%, 97%);
    position: relative;
    min-height: 500px;
}
.center img {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 30%; 
}

Flexbox方案

.center { 
    background: hsl(240, 100%, 97%);
    display: flex;
    justify-content: center;
    align-items: center;
}

calc方案，IE9+，更适合子元素宽高固定的情况

// 50%是父元素的中心点，减去图片宽度和高度的一半从而达到定位效果
.calc {
  background-color: hsl(300, 100%, 90%);
  min-height: 350px;
  position: relative;
}

.calc img {
  width: 100px;
  height: 100px;
  position: absolute;
  left: calc(50% - 50px);
  top: calc(50% - 50px);
}

GPU云服务器云服务器 css布局 css布局教程学习css布局 css基础

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110293.html

讲清楚基础系列——css布局

摘要：两列或三列布局使用左右中间圣杯和双飞翼布局，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。，，同样需要设置父元素的高度方案方案，，更适合子元素宽高固定的情况是父元素的中心点，减去图片宽度和高度的一半从而达到定位效果两列或三列布局使用flex float 左右position:absolute,中间margin-left,margin-right 圣杯和双飞翼布局，都...

qpwoeiru96 2019-08-30 11:26 评论0 收藏0
讲清楚基础系列——JS执行机制

摘要：为什么是单线程的单线程的是怎么实现异步的问题一多线程的操作同一个，会造成浏览器的执行冲突比如一个删除，一个修改。问题二通过事件循环机制实现异步是单线程的，主线程拥有一个执行栈和执行队列。 js为什么是单线程的？单线程的js是怎么实现异步的？问题一：多线程的js操作同一个DOM，会造成浏览器的执行冲突（比如：一个删除，一个修改）。问题二：通过事件循环机制（EventLoop）实现异步...

dance 2019-08-26 18:37 评论0 收藏0
我的大前端- 收藏集 - 掘金

摘要：下面围绕的这样的目的，即左右知乎网页上屏幕截图功能的实现前端掘金背景最近注意到知乎的屏幕截图反馈功能，感觉非常不错。正如你期望的，文中的闯关记之垃圾回收和内存管理前端掘金题图来源，授权基于协议。微信小程序实战学习起手式 DEMO 仿肯德基 - 前端 - 掘金小程序？大场景? 微信小程序本质上来说就是一个 HTML 5（移动网页）应用，用view、scoll-view代替了div标...

LdhAndroid 2019-08-20 18:17 评论0 收藏0
flex布局的元素如何分配容器的剩余空间

摘要：三个元素会从左往右占据父元素的空间这很显然。左右侧边栏的宽度都是，中间元素的宽度将会占据元素的剩余宽度。同样会导致父元素有部分剩余空间没有分配。自从开始开学习 CSS 布局，想要比较灵活的把父元素的空间分配给各个子元一直是各个前端程序员的梦想。在 flex 之前，如果不是专门去搜索相关的解决方案，一般人几乎想不出非常灵活的三（多）栏等高布局方案，而即使看了解决方案，很多人也会大呼奇技...

ethernet 2019-08-30 15:44 评论0 收藏0