編碼規(guī)范唧躲、居中

編碼規(guī)范

  • class 名稱中只能出現(xiàn)小寫字符和破折號(dashe)(不是下劃線咙好,也不是駝峰命名法)篡腌。
  • 使用有意義的名稱。使用有組織的或目的明確的名稱勾效,不要使用表現(xiàn)形式(presentational)的名稱嘹悼。如:
推薦:<div class="text-lesser"></div>
不推薦: <div class="light-grey"></div>
  • 標(biāo)簽語義化
<article>
  <h1>編碼規(guī)范</h1>
  <p>今天講的內(nèi)容是編碼規(guī)范,講師
     <b>若愚</b> @饑人谷</p>
</article>
  • 用兩個空格來代替制表符(tab)层宫。
  • 為選擇器分組時杨伙,將單獨的選擇器單獨放在一行。
  • 為了代碼的易讀性萌腿,在每個聲明塊的左花括號前添加一個空格限匣。聲明塊的右花括號應(yīng)當(dāng)單獨成行。
  • 每條聲明語句的 : 后應(yīng)該插入一個空格毁菱。
  • 參考:
  • bootstrap 編碼規(guī)范
  • google html css編碼規(guī)范
  • 命名這貨真難

居中

  1. 上下padding相等:
.ct {
      padding: 40px 0;
      text-align: center;
      background: #eee;
      border: 1px solid red;
}

http://js.jirengu.com/xiyetevone/1/edit

  1. 絕對定位的元素居中:
position: absolute;
  left: 50%;
  top: 50%;
  /* margin-left: -200px;
  margin-top: -150px; 當(dāng)寬度和高度固定的時候?qū)挾群透叨鹊囊话?/
  transform: translate(-50%,-50%);
  width: 400px;
  height: 300px;

http://js.jirengu.com/waquyokaci/1/edit

  1. 表格法實現(xiàn)居中:display: table-cell;
display: table-cell;
  vertical-align: middle;

http://js.jirengu.com/nape/1/edit?html,css,output

  1. 行內(nèi)元素居中: vertical-align: middle;
    http://js.jirengu.com/vetutacuwo/1/edit

分別使用一個html 標(biāo)簽來實現(xiàn) 這三個效果

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末米死,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子贮庞,更是在濱河造成了極大的恐慌峦筒,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,188評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件窗慎,死亡現(xiàn)場離奇詭異勘天,居然都是意外死亡,警方通過查閱死者的電腦和手機捉邢,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,464評論 3 395
  • 文/潘曉璐 我一進店門脯丝,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人伏伐,你說我怎么就攤上這事宠进。” “怎么了藐翎?”我有些...
    開封第一講書人閱讀 165,562評論 0 356
  • 文/不壞的土叔 我叫張陵材蹬,是天一觀的道長。 經(jīng)常有香客問我吝镣,道長堤器,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,893評論 1 295
  • 正文 為了忘掉前任末贾,我火速辦了婚禮闸溃,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己辉川,他們只是感情好表蝙,可當(dāng)我...
    茶點故事閱讀 67,917評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著乓旗,像睡著了一般府蛇。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上屿愚,一...
    開封第一講書人閱讀 51,708評論 1 305
  • 那天汇跨,我揣著相機與錄音,去河邊找鬼妆距。 笑死扰法,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的毅厚。 我是一名探鬼主播塞颁,決...
    沈念sama閱讀 40,430評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼吸耿!你這毒婦竟也來了祠锣?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,342評論 0 276
  • 序言:老撾萬榮一對情侶失蹤咽安,失蹤者是張志新(化名)和其女友劉穎伴网,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體妆棒,經(jīng)...
    沈念sama閱讀 45,801評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡澡腾,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,976評論 3 337
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了糕珊。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片动分。...
    茶點故事閱讀 40,115評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖红选,靈堂內(nèi)的尸體忽然破棺而出澜公,到底是詐尸還是另有隱情,我是刑警寧澤喇肋,帶...
    沈念sama閱讀 35,804評論 5 346
  • 正文 年R本政府宣布坟乾,位于F島的核電站,受9級特大地震影響蝶防,放射性物質(zhì)發(fā)生泄漏甚侣。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,458評論 3 331
  • 文/蒙蒙 一间学、第九天 我趴在偏房一處隱蔽的房頂上張望殷费。 院中可真熱鬧印荔,春花似錦、人聲如沸宗兼。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,008評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽殷绍。三九已至,卻和暖如春鹊漠,著一層夾襖步出監(jiān)牢的瞬間主到,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,135評論 1 272
  • 我被黑心中介騙來泰國打工失球, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留呵俏,地道東北人糜烹。 一個月前我還...
    沈念sama閱讀 48,365評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像牧牢,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子姿锭,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,055評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 不管有多少人共同參與同一項目塔鳍,一定要確保每一行代碼都像是同一個人編寫的。 ...
    青鳴閱讀 304評論 0 1
  • 命名技巧 語義化語義化標(biāo)簽優(yōu)先基于功能命名掌唾、基于內(nèi)容命名、基于表現(xiàn)命名簡略忿磅、明了糯彬、無后患tips: 大聲叫出它的名...
    yytyff閱讀 777評論 0 0
  • 1、 前端編碼規(guī)范 HTML書寫規(guī)范 所有編碼均遵循xhtml標(biāo)準, 標(biāo)簽 & 屬性 & 屬性命名 必須由小寫字母...
    李博洋li閱讀 339評論 0 0
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,180評論 25 707
  • 閨密戴著一塊碩大的玉上班了葱她,久久沒有笑容的臉也變得柔和親切起來情连。 她說,這是老公去新疆出差買回來的览效,原價8000多...
    生活涵如是閱讀 602評論 0 2