好程式設計師前端教程css對齊方案總結
垂直居中
通用布局方式(內斂元素和塊狀元素都適用)
利用flex:
核心**:
.container
利用transformx(-50%):
核心**:
.container
.child
內斂元素的垂直居中
單行內斂元素:設定內斂元素的高度和行高相等
核心**:
.container
塊狀元素
固定元素高度的塊狀元素
核心**
.container
.child
未知高度的塊狀元素
當垂直居中的元素的高度和寬度未知時，我們可以借助css3中的transform屬性向y軸反向偏移50%的方法實現垂直居中。但是部分瀏覽器存在相容性的問題。
核心**:
.container
.child
水平居中
通用布局方式
flex布局
核心**：
.container
absoulte+transform
核心**:
.container
.child
內斂元素水平居中
text-align:center
核心**:
.container
塊狀元素水平居中
使用 margin:0 auto 必須註明子元素和父元素的寬度
核心**:
.container
多塊狀元素：
利用內斂元素布局方式container屬性為text-align:center;
核心**:
.container
.child
水平垂直居中
固定寬高元素水平垂直居中
通過margin平移元素整體寬度的一半，使元素水平垂直居中。
核心**:
.container
.child
未知寬高元素水平垂直居中
利用2d變換，在水平和垂直兩個方向都向反向平移寬高的一半，從而使元素水平垂直居中。
核心**：
.parent
.child
利用flex布局
利用flex布局，其中justify-content 用於設定或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式；而align-items屬性定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。
核心**：
.container
相對於 body 的水平垂直居中
列表布局(相容性好)
核心**:
.outer
.middle
.inner
position 布局
核心**
.container
好程式設計師web前端教程分享CSS預編譯器的再次理解
好程式設計師web前端教程分享css預編譯器的再次理解 我所理解的css預編譯器 基於css的，能讓css也有一種程式語言範。解決了css的諸多問題，如css模組化 無法巢狀書寫 沒有變數。css模組化 這個對於專案公司的專案來說，非常的重要。沒有模組化也就是復用不夠，導致 冗餘超多，維護起來特別難...
好程式設計師web前端教程分享Date物件
好程式設計師web前端教程分享date物件，什麼是date物件乙個內建物件date 型別使用自 utc coordinated universal time，國際協調時間 1970 年 1 月 1 日午夜 零時 開始經過的毫秒數來儲存日期。date 型別儲存的日期能夠精確到 1970 年 1 月 1...
好程式設計師web前端分享CSS學習 HSLA顏色模式
好程式設計師web前端分享css學習 hsla顏色模式 一 理論 1.hsla顏色模式 a.hsla在hsl基礎上增加了不透明度，值越大透明度越低 b.hsla顏色模式的瀏覽器相容性和hsl一樣，只有較新版本的主流瀏覽器才支援 2.rgba和hsla顏色模式二者可以完全相互替換 3.rgba hsl...