盒子模型(元素居中)

2022-04-04 18:53:40 字數 1060 閱讀 7704

#####一 、盒子垂直水平居中

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 ...