CSS position:absolute 垂直置中妙用

2018-08-15 173 words One minute

Contents

最近發現HTML tag dialog屬性可以用了
當下好奇怎麼可以使用??
當下好奇瀏覽器怎麼排排板的
發現原來是用absolute日上margin可以這樣置中

PS: 目前Firefox 53裡的about:config需要設定dom.dialog_element.enabled為true
才能完整用js操作
HTMLDialogElement.returnValue - Web APIs | MDN
https://segmentfault.com/a/1190000003820437#articleHeader9

html - Why does “position: absolute; left: 0; right: 0; width: XYpx; margin: 0 auto” actually center? - Stack Overflow
css - div的position:absolute；left:0;right:0;margin:0 auto;为什么可以居中？ - SegmentFault 思否
 CSS规范 > 10 视觉格式化模型详述 Visual Formatting Model Details - HaoyCn’s Blog - SegmentFault 思否

1
2
3


postition:absolute; 
left:0px;
right:0px;

要加margin auto;

但為什麼這樣就能置中呢?
網路找了一下，其實滿不好找的(但還是有的)…
CSS 垂直置中的七個方法 - OXXO.STUDIO

不過…為什麼這樣能置中?我就Google找了一下中文文件(英文太菜了>.<)

這篇有講到css - 絕對定位div寬度如何自適應內容。 - SegmentFault 思否

containing block

怎么确定一个元素的containing block，由position属性确定：

static(默认的)/relative：简单说就是它的父元素的内容框（即去掉padding的部分）

absolute: 向上找最近的定位为absolute/relative的元素

fixed: 它的containing block一律为根元素(html/body)，根元素也是initial containing block
CSS 中 block-level boxes、containing block、block formatting context 三者之间的区别和联系是怎样的？ - 知乎

難怪之前會覺得position設定width height百分比怪怪的，看到這個終於解開我心中疑惑

inline 裡面element使用position位置

Containing Block(包含块模型) - 简书
 CSS direction属性简介与实际应用 « 张鑫旭-鑫空间-鑫生活

CSS规范 > 10 视觉格式化模型详述 Visual Formatting Model Details - HaoyCn’s Blog - SegmentFault 思否
那麼該收縮適應寬度即：min(max(首選最小寬度,可用寬度),首選寬度)。

3個寬度說明：
首選寬度：按照不自動斷行的方式排版，取得的內容寬度（可以理解為不受容器限制自動排列的寬度就是你想要的效果）
首選最小寬度：calculate the preferred minimum width, e.g.,by trying all possible line breaks（我理解就是在1的情況下你把容器不斷縮小到不能換行，一般是單個文字的寬度）
可用寬度：就是把right設置為0，計算出的width

隨意寫的範例loading

https://jsbin.com/diyavuyihi/1/edit?html,css,output

Contents

CSS position:absolute 垂直置中妙用

containing block

inline 裡面element使用position位置

更多詳細要了解的

隨意寫的範例loading