CSS 布局：position

wing324 发布于2019-08-29 10:59 / 750人阅读

摘要：点击链接预览参考演示你对的了解程度有多少和高级指南之二定位详解部分部分使用垂直水平居中

点击链接预览：CODEPEN

参考：

cssnext 演示

你对Position的了解程度有多少?

HTML和CSS高级指南之二——定位详解

html 部分：


    Tabs

PostCSS 部分（使用pluins：postcss-cssnext）：

:root {
  --r: 50px;
  --height: calc(2*var(--r));
  --w: 10px;
}

.tabs {
  width: 500px;
  height: 300px;
  position: relative;
  background: lightblue;
  display: flex;
  /*垂直、水平居中*/
  justify-content: center;
  align-items: center;
}

.title {
  font-size: 150px;
  color: #333;
}

.close {
  position: absolute;
  right: 5px;
  top: 5px;
  width: var(--height);
  height: var(--height);
  opacity: 0.3;
}

.close:hover {
  opacity: 1;
  background: lightgreen;
}

.close:before,
.close:after {
  position: absolute;
  left: calc(var(--r)-var(--w)/2);
  top: calc(-(1.3*var(--height)-var(--height))/2);
  content: " ";
  height: calc(1.3*var(--height));
  width: var(--w);
  background-color: #333;
  border-radius: calc(var(--w)/2);
}

.close:before {
  transform: rotate(45deg);
}

.close:after {
  transform: rotate(-45deg);
}

云服务器 GPU云服务器 position，css position属性，css css布局 css布局教程

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

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

【CSS】三栏/两栏宽高自适应布局大全

摘要：方案一方案二和方案的有点是兼容性好因为都是比较老的解决方案了缺点是之后需要清除浮动造成的影响定位的话就是绝对定位之后脱离文档流了你要注意用包裹一下方案三是目前移动端主流的方案的语法缺点就是以下不支持。页面布局注意方案多样性、各自原理、各自优缺点、如果不定高呢、兼容性如何三栏自适应布局,左右两侧300px,中间宽度自适应 (1) 给出5种方案方案一: float (左右浮动,中间...

jindong 2019-08-01 18:28 评论0 收藏0
【CSS】三栏/两栏宽高自适应布局大全

摘要：方案一方案二和方案的有点是兼容性好因为都是比较老的解决方案了缺点是之后需要清除浮动造成的影响定位的话就是绝对定位之后脱离文档流了你要注意用包裹一下方案三是目前移动端主流的方案的语法缺点就是以下不支持。页面布局注意方案多样性、各自原理、各自优缺点、如果不定高呢、兼容性如何三栏自适应布局,左右两侧300px,中间宽度自适应 (1) 给出5种方案方案一: float (左右浮动,中间...

isaced 2019-08-29 14:21 评论0 收藏0
CSS学习摘要-布局

摘要：注全文摘自介绍布局页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流周边元素父容器或者主视口窗口的位置。添加此代码将给出以下结果绝对定位绝对定位绝对定位用于将元素移动到页面的任何位置，以创建复杂的布局。注：全文摘自MDN-介绍CSS布局 CSS页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。在这个模块中将涉及更多关于页面...

bigdevil_s 2019-04-23 13:39 评论0 收藏0
CSS那些事儿——居中布局

摘要：前言居中布局，是前端页面最常见的一种布局需求。下面将现今自己了解的居中布局方法作个小总结。水平居中行内元素在包含的父元素定义属性为。垂直水平居中对于这个问题，可以综合上述点进行实现。前言居中布局，是前端页面最常见的一种布局需求。刚开始学习前端时还是困扰了一段时间，后来看了Centering in CSS: A Complete Guide一文后才算掌握了方法。下面将现今自己了解的居...

JeOam 2019-08-29 13:05 评论0 收藏0
搞定css三栏布局（六种方法）

摘要：块级元素生成一个矩形框，作为文档流的一部分行内元素则会创建一个或多个行框，置于父级元素中。元素框相对于之前正常文档流中的位置发生偏移，并且原先的位置仍然被占据。元素框不再占有文档流位置，并且相对于视窗进行定位。谈到布局，首先就要想到定位，当别人问我，css的position定位有哪些取值，分别表示什么意思？呃.....抓头.gif，是时候回归本质，看定义了。 1. 定位 1.1 po...

evin2016 2019-08-30 13:59 评论0 收藏0
CSS布局

摘要：圣杯布局圣杯布局和双飞翼布局都是为了解决两边定宽，中间自适应的三栏布局，中间栏在最前面优先渲染，多见于商城类网站布局。双飞翼布局不用设置相对布局，以及对应的和值。合理的布局是产品的基础，可以使人感觉整齐大方，提升用户体验。掌握几种常见的布局形式也是前端开发的基础，对于快速实现页面重构有很大帮助。原文链接单列布局单列布局通常用于网站的首页，分为头部的导航、网页内容、页脚相关信息。...

kviccn 2019-08-30 13:46 评论0 收藏0