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