基礎(chǔ)HTML難點(diǎn)

1、1.inline-block的使用display常見的三大屬性：block:獨(dú)占一行，可設(shè)置width、heightinline:并排顯示，設(shè)置width、height無效inline-block:并排顯示，可設(shè)置width、heightblock無法實(shí)現(xiàn)水平居中，而當(dāng)實(shí)現(xiàn)一個(gè)自定義width和height的div標(biāo)簽時(shí)，可以將display設(shè)置為inline-block實(shí)現(xiàn)。代碼示例：fcrm-boxdisplayiin1立Rock;width：30%?-moz-border-radius:20Px20px2Gpx20px;-webkit-border-radius:20px20px20px

2、20px:border-radius:20px20px20px2Gpx;margin-top:llOpx,box-shadow:09Pxrgba(070,0f.5);2.float:left和float:right的使用為了使block元素能排列在一行， 且可以設(shè)置width和height,則需要使用元素浮動(dòng)屬性float。 設(shè)置float后元素的display屬性依然保持block不變，但此時(shí)元素不占用一整行。當(dāng)浮動(dòng)的元素超過上一級div的width,如圖。div1div2div3div4input等標(biāo)簽。代碼示例： HTMLHTML 4/p 2.div的居中，可以先設(shè)置元素寬度width,

3、然后將屬性margin-left和margin-right設(shè)置為auto。代碼示例：divdivstyle-style-irirwidthwidth: :150px150px；margin:Omargin:Oauto5Bootstrapauto5Bootstrapdlivinline-block(或inline),然后設(shè)置此元素父節(jié)點(diǎn)為text-align:center,即可實(shí)現(xiàn)水平居中。垂直居中：1 .最簡單實(shí)現(xiàn)垂直居中的方法是直接設(shè)置padding-top(margin-top)和padding-bottom(margin-bottom),如圖。但此方法靈活性太差，當(dāng)響應(yīng)式元素height

4、隨屏幕尺寸而改變，則垂直居中難以完美的實(shí)現(xiàn)。子div2.在父元素高度確定的單行文本中，通過給父元素設(shè)置與height相同的line-height來實(shí)現(xiàn)，line-height表示行間的距離(即行高)，而行內(nèi)的文本是垂直居中的，于是依賴此屬性完美實(shí)現(xiàn)。代碼示例:.input-sizfont-size:14px;line-height:20pxiheight:30px;3.除了可以以上述方式實(shí)現(xiàn)水平居中外，還可以將元素的display屬性設(shè)置為padding:5pxlOpx;border-radius:Spx;3.利用table和table-cell來實(shí)現(xiàn)垂直居中，CSS中有一個(gè)用于垂直居中的屬性

5、vertical-align，但只有當(dāng)父元素為td或者th時(shí)，這個(gè)屬性才生效，對于其他塊級元素，如div,p等，默認(rèn)情況下是不支持vertical-align屬性的。在firefox和ie8下,可以先將父元素的display屬性設(shè)置為table,接著設(shè)置子元素display:table-cell,從而進(jìn)一步設(shè)置vertical-align屬性為middle,從而完美實(shí)現(xiàn)垂直居中。代碼示例: stylesstyles1111displaydisplay：table-celltable-cell；ueruerical-alignical-align! !n-iddl.en-iddl.e；col-o

6、rcol-or：burlywooclburlywoocl1111i iBootstrapBootstrap/ 4.基本響應(yīng)式的設(shè)計(jì)響應(yīng)式開發(fā)是根據(jù)不同屏幕分辨率而進(jìn)行自適應(yīng)的Web開發(fā)，特點(diǎn)是不需要進(jìn)一步寫一套全新的CSS,只需要利用CSS或JavaScript來進(jìn)行所有設(shè)備頁面樣式的完美匹配。常見的幾種響應(yīng)式的開發(fā)：1.media的使用media類似于眾多編程語言中switch/case語法。在一個(gè)CSS文件里面，可以將屏幕分辨率劃分為若干個(gè)區(qū)間，將需要自適應(yīng)的CSS放在對應(yīng)的區(qū)間，而當(dāng)Web頁面加載或窗口尺寸改變時(shí)，CSS樣式會(huì)自適應(yīng)。（max-width表示區(qū)間的最大分辨率，min-wi

7、dth則為區(qū)間最小分辨率）代碼示例：古ut色日nand(nuax-viidtJi:592pxAndmin-width:7#chaJIoupln11.raddl-dilqtinfoModA1sreFil2.D!L-d2-cfitlc4(|w_dth:550px;.famt-lsftr.form-rijjit(height;SCpx；.rm-he-Lqiitheight;Z3Cpxfheiqtit:2SGpx;2.float的使用如上文。3.用代替px為實(shí)現(xiàn)響應(yīng)式，在width、margin、padding中，常使用代替px,這樣可以降低因屏幕分辨率的下降導(dǎo)致樣式錯(cuò)亂的可能性，而Bootstrap

8、的網(wǎng)格布局（又稱柵格布局）則是將此方法進(jìn)行了一個(gè)具有強(qiáng)大可移植性的封裝（后文具體描述）。代碼示例:forin-boxwidth:80%s4.圖片自適應(yīng)圖片自適應(yīng)主要是通過設(shè)置max-width:100%來讓img標(biāo)簽不會(huì)溢到父標(biāo)簽外，從而隨分辨率改變自動(dòng)進(jìn)行適應(yīng)，Bootstrap中的img-responsive即由此方法設(shè)計(jì)而來。5.的使用此方法在設(shè)計(jì)移動(dòng)端響應(yīng)式時(shí)，使用非常多。通過設(shè)置：來將移動(dòng)端的分辨率和HTML中的px進(jìn)行統(tǒng)一，具體內(nèi)容過于復(fù)雜，可參照：http:/blogs.Com/2050/p/3877280.html代碼示例：cheadhttp-equitentcontent=t

9、extZhtill;ch工鴕t=UTF-8*/antanaivieNpartcontent=wirivice-widtlr,initjal-scaie=lfuser-scaiaDle=Of5.Bootstrap的樣式復(fù)寫B(tài)ootstrap為我們定義了很多較為華麗的樣式，但也帶來了設(shè)計(jì)的重復(fù)。為了設(shè)計(jì)更多差異化的Web頁面，我們可以對Bootstrap的樣式進(jìn)行復(fù)寫。復(fù)寫主要步驟:1)在Bootstrap.css文件中，定位到你需要復(fù)寫的CSS樣式，例如.input-sm,此時(shí)可借助Ctrl+F來查找。2)找到后將此CSS名復(fù)制到自定義CSS中，同時(shí)將需要修改的CSS屬性寫進(jìn)自定義CSS樣式中(CSS屬性名必須與Bootstrap中相同才能進(jìn)行覆蓋)