CSS 布局：position

wing324 發(fā)布于2019-08-29 10:59 / 756人閱讀

摘要：點擊鏈接預覽參考演示你對的了解程度有多少和高級指南之二定位詳解部分部分使用垂直水平居中

點擊鏈接預覽：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布局教程

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/111348.html

【CSS】三欄/兩欄寬高自適應布局大全

摘要：方案一方案二和方案的有點是兼容性好因為都是比較老的解決方案了缺點是之后需要清除浮動造成的影響定位的話就是絕對定位之后脫離文檔流了你要注意用包裹一下方案三是目前移動端主流的方案的語法缺點就是以下不支持。頁面布局注意方案多樣性、各自原理、各自優(yōu)缺點、如果不定高呢、兼容性如何三欄自適應布局,左右兩側300px,中間寬度自適應 (1) 給出5種方案方案一: float (左右浮動,中間...

jindong 2019-08-01 18:28 評論0 收藏0
【CSS】三欄/兩欄寬高自適應布局大全

摘要：方案一方案二和方案的有點是兼容性好因為都是比較老的解決方案了缺點是之后需要清除浮動造成的影響定位的話就是絕對定位之后脫離文檔流了你要注意用包裹一下方案三是目前移動端主流的方案的語法缺點就是以下不支持。頁面布局注意方案多樣性、各自原理、各自優(yōu)缺點、如果不定高呢、兼容性如何三欄自適應布局,左右兩側300px,中間寬度自適應 (1) 給出5種方案方案一: float (左右浮動,中間...

isaced 2019-08-29 14:21 評論0 收藏0
CSS學習摘要-布局

摘要：注全文摘自介紹布局頁面布局技術允許我們拾取網(wǎng)頁中的元素，并且控制它們相對正常布局流周邊元素父容器或者主視口窗口的位置。添加此代碼將給出以下結果絕對定位絕對定位絕對定位用于將元素移動到頁面的任何位置，以創(chuàng)建復雜的布局。注：全文摘自MDN-介紹CSS布局 CSS頁面布局技術允許我們拾取網(wǎng)頁中的元素，并且控制它們相對正常布局流、周邊元素、父容器或者主視口/窗口的位置。在這個模塊中將涉及更多關于頁面...

bigdevil_s 2019-04-23 13:39 評論0 收藏0
CSS那些事兒——居中布局

摘要：前言居中布局，是前端頁面最常見的一種布局需求。下面將現(xiàn)今自己了解的居中布局方法作個小總結。水平居中行內(nèi)元素在包含的父元素定義屬性為。垂直水平居中對于這個問題，可以綜合上述點進行實現(xiàn)。前言居中布局，是前端頁面最常見的一種布局需求。剛開始學習前端時還是困擾了一段時間，后來看了Centering in CSS: A Complete Guide一文后才算掌握了方法。下面將現(xiàn)今自己了解的居...

JeOam 2019-08-29 13:05 評論0 收藏0
搞定css三欄布局（六種方法）

摘要：塊級元素生成一個矩形框，作為文檔流的一部分行內(nèi)元素則會創(chuàng)建一個或多個行框，置于父級元素中。元素框相對于之前正常文檔流中的位置發(fā)生偏移，并且原先的位置仍然被占據(jù)。元素框不再占有文檔流位置，并且相對于視窗進行定位。談到布局，首先就要想到定位，當別人問我，css的position定位有哪些取值，分別表示什么意思？呃.....抓頭.gif，是時候回歸本質(zhì)，看定義了。 1. 定位 1.1 po...

evin2016 2019-08-30 13:59 評論0 收藏0
CSS布局

摘要：圣杯布局圣杯布局和雙飛翼布局都是為了解決兩邊定寬，中間自適應的三欄布局，中間欄在最前面優(yōu)先渲染，多見于商城類網(wǎng)站布局。雙飛翼布局不用設置相對布局，以及對應的和值。合理的布局是產(chǎn)品的基礎，可以使人感覺整齊大方，提升用戶體驗。掌握幾種常見的布局形式也是前端開發(fā)的基礎，對于快速實現(xiàn)頁面重構有很大幫助。原文鏈接單列布局單列布局通常用于網(wǎng)站的首頁，分為頭部的導航、網(wǎng)頁內(nèi)容、頁腳相關信息。...

kviccn 2019-08-30 13:46 評論0 收藏0