高級CSS - 不理解這個解決方案

我已經成功地獲得了一個視頻，正確適合div內部並且一直填滿它，這要歸功於這個SO answer。高級CSS - 不理解這個解決方案

我已經修改了一下代碼，但我很難理解爲什麼這段代碼能夠正常工作。

video 
     position: absolute 
     opacity: 0.1 
     z-index: 0 
     top: 0px 
     left: 50% 
     min-width: 100% 
     min-height: 100% 
     right: 0px 
     margin: auto 
     width: auto 
     height: auto 
     overflow-x: hidden 
     transform: translateX(-50%)

我沒有得到什麼改變沒有，以及如何得到它固定到比左上角以外的東西。我認爲有一些關於min-的屬性可以使這項工作成功，但我不確定。

來源

2016-05-14 inthenameofmusik

的'transform'與'left'屬性結合是一種強制可變寬度的元件爲中心。首先，您從容器左側走50％到達容器中心，然後您返回50％（負X），其中50％代表視頻元素寬度的50％。通常情況下，'margin：auto'會以一個元素爲中心，但是這個元素需要是一個固定的寬度。該策略允許它處理未知或寬度變化的元素。 – Quantastical

絕對定位的元素相對於其父元素（也可以是瀏覽器窗口）的位置由頂部或底部以及左側或右側參數定義（默認爲top：0; left：0;）。如果左邊是50％，則意味着左邊框完全移動到容器的水平中間。 transform: translateX(-50%)將它移回左側（由負值引起）50％，但這次是元素本身的50％。這導致元素水平居中居中。 overflow-x: hidden;確保元素不與其容器重疊 - 溢出的部分將保持不可見。

你可以做同樣的垂直top 50%; transform: translateY(-50%); overflow-Y: hidden;

來源

2016-05-15 00:23:44 Johannes

高級CSS - 不理解這個解決方案

回答

相關問題