#####一 、盒子垂直水平居中
1、定位 盒子寬高已知,
> position: absolute; left: 50%; top: 50%; margin-left:-自身一半寬度; margin-top: -自身一半高度;
2、table-cell布局
>父級 display: table-cell; vertical-align: middle;
子級 margin: 0 auto;
3、定位 + transform ; 適用於 子盒子 寬高不定時; (這裡是本人常用方法)
position: relative / absolute;
/*top和left偏移各為50%*/
top: 50%;
left: 50%;
/*translate(-50%,-50%) 偏移自身的寬和高的-50%*/
transform: translate(-50%, -50%); 注意這裡啟動了3d硬體加速哦 會增加耗電量的 (至於何是3d加速 請看瀏覽器程序與執行緒篇)
4、flex 布局
父級:
>/*flex 布局*/ display: flex;
子級:> /*實現垂直居中*/ align-items: center;
/*實現水平居中*/ justify-content: center;
#####二、偽類和偽元素的區別
**偽類**用於向某些選擇器新增特殊的效果。
>:hover
:first-child
**偽元素**用於將特殊的效果新增到某些選擇器。
>::before
::after
*實際上 css3 為了區分兩者,已經明確規定了偽類用乙個冒號來表示,而偽元素則用兩個冒號來表示。*
#####三、chrome中文介面字型設定
>chrome 中文介面下缺省會將小於 12px 的文字強制按照 12px 顯示 ,如果使用下面的css屬性就可改變這個最小字型限制。
```-webkit-text-size-adjust: none;
```
2021 01 04盒子模型 元素居中 定位屬性
元素居中 定位屬性 q 簡單介紹一下盒子模型。a 想象控制台中的圖形 盒子模型包括元素自身的寬 高 內容content 加上內邊距padding 邊框border以及外邊距margin。q 盒子模型有幾種?a 有2種,w3c的標準盒子模型和ie的怪異盒子模型 標準盒子模型是指盒子的大小 元素自身內容...
盒子模型與怪異盒子模型
所有html元素可以看作盒子,在css中,box model 這一術語是用來設計和布局時使用。css盒模型本質上是乙個盒子,封裝周圍的html元素,它包括 邊距,邊框,填充,和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。下面的說明了盒子模型 box model content...
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題,因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調,其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型,你可能會說我知道呀,就是 margin 包 border,border 包 padding,padding 包 content ...