資訊專欄INFORMATION COLUMN
摘要：輔助標(biāo)簽代碼代碼效果廢話要讓元素和輔助元素在一行，否則會(huì)出現(xiàn)水平不完全居中，當(dāng)使用時(shí)，換行會(huì)被解析成空格。
首先我們需要知道元素都有哪些種類？
內(nèi)嵌元素（display:inline;）如a，span，b，i 【一個(gè)不可定制的盒子】
[默認(rèn)同行可以繼續(xù)跟同類型標(biāo)簽]
[內(nèi)容撐開寬度]
[不支持寬高]
[不支持上下的margin和padding]
[代碼換行會(huì)被解析成空]
塊元素（display:block;）如div，p，h1-h6
[默認(rèn)獨(dú)占一行顯示]
[基本支持所有的css命令]
行內(nèi)塊（display:inline-block;）如img 【img就是這么一個(gè)神奇的東東。它既不是內(nèi)嵌又不是塊，而是行內(nèi)塊】
[塊在一行顯示]
[支持寬高]
[沒有寬度時(shí)內(nèi)容撐開寬度]
那么接下來我們依次將上面三種元素居中
一、內(nèi)嵌元素之單行文本
最最常見的解決辦法就是使用text-align和line-height
line-height:200px; text-align:center;
但是這種處理辦法就一定十全十美嗎？我不這么認(rèn)為（估計(jì)有人吐槽我強(qiáng)迫癥了）
反正我每次選中文字看到非文字區(qū)也被選中就很不爽，不過IE6-8只會(huì)選中文字
二、塊元素居中
解決辦法：使用定位元素+margin負(fù)值
width:100px; height:100px; position:relative; left:100px; top:100px; margin-left:-50px; margin-top:-50px;
缺點(diǎn)：要求必須知道盒子的寬高
三、行內(nèi)塊居中
（1）把img轉(zhuǎn)化為背景圖片，然后用background-position:center;但是需要注意的是由于圖片的鏈接一般都是經(jīng)常改變的，所以需要這樣做：
是不是違背了內(nèi)容樣式分離的原則。
（2）輔助標(biāo)簽
html代碼：
CSS代碼：
.box{width:200px;height:200px;border:1px solid #333;margin:0 auto;text-align:center;}
.box img{vertical-align:middle;border:1px solid #999;padding:2px;}
.box span{display:inline-block;height:100%;background:#333;vertical-align:middle;}
效果：
廢話：要讓img元素和輔助元素span在一行，否則會(huì)出現(xiàn)水平不完全居中，當(dāng)使用inline-block時(shí)，換行會(huì)被解析成空格。其實(shí)網(wǎng)上還有其他辦法，比如說風(fēng)靡已久的table法。網(wǎng)上一大堆這里就不顯擺了。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/110886.html
摘要：這個(gè)時(shí)候小明如果僅僅引入不想改，那么就是這個(gè)值，如果他想改，就可以在任何一處重新聲明這個(gè)變量，那么就會(huì)變成小明的值。 這一篇主要詳述保持sass條理性和可讀性的3個(gè)最基本方法——嵌套、導(dǎo)入和注釋。 零. 變量 變量本身的作用是為了保持屬性值的可維護(hù)性，把所有需要維護(hù)的屬性值放在同一個(gè)地方，快速更改，處處生效，可謂售后無憂。 1.變量聲明 變量用$符號開頭進(jìn)行聲明，任何可以用作CSS屬性...
摘要：水平居中水平居中沒有什么好說的啦，對于行內(nèi)元素使用對于塊級元素使用前提是已經(jīng)為元素設(shè)置了適當(dāng)?shù)膶挾却怪本又袉涡形谋径嘈形谋緜卧匦袃?nèi)元素偽元素未知寬高絕對居中絕對定位已知寬高負(fù)要考慮兼容性浮動(dòng)元素垂直居中父元素 水平居中 水平居中沒有什么好說的啦，對于行內(nèi)元素使用text-align;對于塊級元素使用margin: auto（前提是已經(jīng)為元素設(shè)置了適當(dāng)?shù)?width 寬度）; 垂直居中...
摘要：背景想想自己為什么要寫這個(gè)，難道不是因?yàn)檫@篇道基礎(chǔ)面試題附答案文章最近被轉(zhuǎn)載的多，比較多而湊熱鬧蹭熱點(diǎn)顯然，肯定是因?yàn)檫@樣我才打算寫的。繼承得到的樣式的優(yōu)先級最低。 背景 想想自己為什么要寫這個(gè)，難道不是因?yàn)檫@篇《50道CSS基礎(chǔ)面試題（附答案）》文章最近被轉(zhuǎn)載的多，比較多而湊熱鬧蹭熱點(diǎn)？顯然，肯定是因?yàn)檫@樣我才打算寫的。而且還有就是，我的公眾號也很久沒有更新了，微信說長期不更新會(huì)關(guān)掉...
摘要：基于的解決方案借助規(guī)范所引入的和屬性，我們可以讓它內(nèi)部的文本也實(shí)現(xiàn)居中根據(jù)盒對齊模型第三版的計(jì)劃，在未來，對于簡單的垂直居中需求，我們完全不需要?jiǎng)佑锰厥獾牟季帜Ｊ搅?。因?yàn)橹恍枰旅孢@行代碼就可以搞定 7.結(jié)構(gòu)和布局 自適應(yīng)內(nèi)部元素: min-content（容器內(nèi)部最大的不可斷行元素的寬度（即最寬的單詞、圖片或具有固定寬度的盒元 素） The great Sir Adam ...
摘要：任務(wù)四一個(gè)最常見的移動(dòng)端頁面完成的事情完成簡單布局，然后填充界面與效果圖對比優(yōu)化完成驗(yàn)收要求擴(kuò)展性頂欄固定進(jìn)行樣式兼容性研究完成任務(wù)四深度思考跟隨深度思考師兄建議進(jìn)行修改輸入欄左側(cè)換用輸入限制電話位，密碼位根據(jù)結(jié)構(gòu)的語義化修改嘗試下再加一 任務(wù)四、 一個(gè)最常見的移動(dòng)端頁面 完成的事情 完成簡單布局，然后填充界面 與效果圖對比優(yōu)化 完成驗(yàn)收要求：header擴(kuò)展性 & 頂欄固定 進(jìn)行p...
閱讀 2896·2021-11-11 16:55
閱讀 943·2021-09-28 09:36
閱讀 3792·2021-09-22 15:22
閱讀 2222·2021-09-06 15:12
閱讀 1752·2021-08-19 10:55
閱讀 2887·2019-08-30 12:52
閱讀 494·2019-08-29 14:03
閱讀 1203·2019-08-29 12:27
