記錄第一次面試——廣州凡科（二）
第2題：調(diào)動(dòng)記憶的css題
（當(dāng)時(shí)真是把什么表格元素扬卷、文本元素這些都湊五個(gè)寫上去了牙言，而且卷面還寫的很亂。）
其實(shí)這些上網(wǎng)搜搜一大堆怪得，只不過之前沒有注意總結(jié)咱枉。以下貼個(gè)靠譜的方案。已經(jīng)經(jīng)過了本人的測試徒恋。
CSS水平居中+垂直居中+水平/垂直居中的方法總結(jié) - 半夏半暖半傾城的博客 - CSDN博客
這個(gè)博主總結(jié)得相當(dāng)全面蚕断！但是我還是要自己一點(diǎn)點(diǎn)打出來，加深一下記憶入挣。
首先科普一下：
行內(nèi)元素
常見的有比如有： <span></span>亿乳、<i></i>、<b></b>财岔、<a></a>风皿、<img />、<input type="" />
(1)設(shè)置寬高無效
(2)對(duì)margin僅設(shè)置左右方向有效匠璧，上下無效桐款；padding設(shè)置上下左右都有效，即會(huì)撐大空間
(3)不會(huì)自動(dòng)進(jìn)行換行
塊級(jí)元素
<body></body>夷恍、<div></div>魔眨、<ul></ul>、<ol></ol>酿雪、<h1></h1>等標(biāo)題
(1)能夠識(shí)別寬高
(2)margin和padding的上下左右均對(duì)其有效
(3)可以自動(dòng)換行
(4)多個(gè)塊狀元素標(biāo)簽寫在一起遏暴，默認(rèn)排列方式為從上至下
行內(nèi)塊級(jí)元素
通過display:inline-block;進(jìn)行轉(zhuǎn)換
(1)不自動(dòng)換行
(2)能夠識(shí)別寬高
(3)默認(rèn)排列方式為從左到右
行內(nèi)元素里面不能嵌套塊級(jí)元素
行內(nèi)塊級(jí)元素里面可以嵌套塊級(jí)元素
針對(duì)題目，使元素垂直居中的方式：
- 行內(nèi)元素：
1.使他的父級(jí)元素變成塊級(jí)元素display：block
2.水平居中：父級(jí)元素：text-align：center
3.垂直居中：
單行的行內(nèi)元素：使元素高=父級(jí)元素的高
多行的行內(nèi)元素：給父級(jí)元素設(shè)置display:table-cell;vertical-align: middle;
- 塊級(jí)元素：
已知寬高
1.設(shè)置父元素相對(duì)定位指黎、子元素絕對(duì)定位朋凉，
水平居中：right: 0; left: 0; margin: 0 auto;
垂直居中：top: 0; bottom: 0; margin: auto 0;
（可以合寫為）top: 0; bottom: 0; right: 0; left: 0; margin:auto;
2.設(shè)置父元素相對(duì)定位、子元素絕對(duì)定位醋安，
水平居中：left: 50%;margin-left: -(元素寬度的一半)px;
垂直居中：top: 50%; margin-top: -(元素高度的一半)px;
（可以合寫為）left: 50%; top: 50%; margin-left: -(元素寬度的一半)px; margin-top: -(元素高度的一半)px;
未知寬高：
1.設(shè)置父元素為相對(duì)定位杂彭，給子元素設(shè)置絕對(duì)定位，
水平居中：left: 50%;translateX(-50%)
垂直居中：top: 50%; translateY(-50%);
（可以合寫為）left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);
2.把元素轉(zhuǎn)換為行內(nèi)元素display: inline;display: inline-block;
水平居中：父元素設(shè)置text-align:center;
垂直居中：
單行的行內(nèi)元素：使元素高=父級(jí)元素的高
多行的行內(nèi)元素：給父級(jí)元素設(shè)置display:table-cell;vertical-align: middle;
寬高定不定均可：
1.flex布局：設(shè)置父元素為flex定位display:flex;
水平居中：justify-content: center;
垂直居中：align-items: center;
七種了……
后面還會(huì)有 記錄第一次面試——廣州凡科（三吓揪、四……）亲怠，敬請期待
：
