自己在實(shí)踐中遇到的一些前臺基礎(chǔ)(html、css)
發(fā)布時(shí)間：2014-07-28 16:46:30 作者：佚名 
我要評論
我要評論本節(jié)主要介紹了筆者在實(shí)踐中遇到的一些前臺基礎(chǔ)，包括html、css等知識，下面將其整理與大家分享
1.
div css鼠標(biāo)變手型是 cursor:pointer;
2.
html相對位置和絕對位置布局注意： absolute 說當(dāng)position屬性設(shè)為absolute后，總是按照瀏覽器窗口來進(jìn)行定位的，這其實(shí)是錯(cuò)誤的。
當(dāng)sub1的position設(shè)置為absolute后，其到底以誰為對象進(jìn)行偏移呢？這里分為兩種情況：
（1）當(dāng)sub1的父對象(或曾祖父，只要是父級對象)parent也設(shè)置了position屬性，且position的屬性值為absolute或者relative時(shí)，也就是說，不是默認(rèn)值的情況，此時(shí)sub1按照這個(gè)parent來進(jìn)行定位。
注意，對象雖然確定好了，但有些細(xì)節(jié)需要您的注意，那就是我們到底以parent的哪個(gè)定位點(diǎn)來進(jìn)行定位呢？如果parent設(shè)定了margin，border，padding等屬性，那么這個(gè)定位點(diǎn)將忽略padding，將會從padding開始的地方(即只從padding的左上角開始)進(jìn)行定位，這與我們會想當(dāng)然的以為會以margin的左上端開始定位的想法是不同的。
接下來的問題是，sub2的位置到哪里去了呢？由于當(dāng)position設(shè)置為absolute后，會導(dǎo)致sub1溢出正常的文檔流，就像它不屬于parent一樣，它漂浮了起來，在DreamWeaver中把它稱為“層”，其實(shí)意思是一樣的。此時(shí)sub2將獲得sub1的位置，它的文檔流不再基于sub1，而是直接從parent開始。
（2）如果sub1不存在一個(gè)有著position屬性的父對象，那么那就會以body為定位對象，按照瀏覽器的窗口進(jìn)行定位，這個(gè)比較容易理解。
3.
css的透明度filter:alpha(opacity=0);opacity:0;-moz-opacity:0; 只有這三個(gè)css同時(shí)加上才兼容所有的瀏覽器
4. 窗口關(guān)系及框架
top對象始終指向最高（最外）層的框架，也就是瀏覽器窗口。使用它可以正確訪問任何一個(gè)框架。因?yàn)閷τ谠谝粋€(gè)框架中編寫的代碼中，window對象總是指向的都是那個(gè)框架的特定實(shí)例，而非最高層的框架。比如說，在子框架中，window是指本身的對象，假使要改變本框架的src及父窗口的iframe或者是frame的src，用window是不行的，這時(shí)要用window.top.$(選擇器)才能訪問
div css鼠標(biāo)變手型是 cursor:pointer;
2.
html相對位置和絕對位置布局注意： absolute 說當(dāng)position屬性設(shè)為absolute后，總是按照瀏覽器窗口來進(jìn)行定位的，這其實(shí)是錯(cuò)誤的。
當(dāng)sub1的position設(shè)置為absolute后，其到底以誰為對象進(jìn)行偏移呢？這里分為兩種情況：
（1）當(dāng)sub1的父對象(或曾祖父，只要是父級對象)parent也設(shè)置了position屬性，且position的屬性值為absolute或者relative時(shí)，也就是說，不是默認(rèn)值的情況，此時(shí)sub1按照這個(gè)parent來進(jìn)行定位。
注意，對象雖然確定好了，但有些細(xì)節(jié)需要您的注意，那就是我們到底以parent的哪個(gè)定位點(diǎn)來進(jìn)行定位呢？如果parent設(shè)定了margin，border，padding等屬性，那么這個(gè)定位點(diǎn)將忽略padding，將會從padding開始的地方(即只從padding的左上角開始)進(jìn)行定位，這與我們會想當(dāng)然的以為會以margin的左上端開始定位的想法是不同的。
接下來的問題是，sub2的位置到哪里去了呢？由于當(dāng)position設(shè)置為absolute后，會導(dǎo)致sub1溢出正常的文檔流，就像它不屬于parent一樣，它漂浮了起來，在DreamWeaver中把它稱為“層”，其實(shí)意思是一樣的。此時(shí)sub2將獲得sub1的位置，它的文檔流不再基于sub1，而是直接從parent開始。
（2）如果sub1不存在一個(gè)有著position屬性的父對象，那么那就會以body為定位對象，按照瀏覽器的窗口進(jìn)行定位，這個(gè)比較容易理解。
3.
css的透明度filter:alpha(opacity=0);opacity:0;-moz-opacity:0; 只有這三個(gè)css同時(shí)加上才兼容所有的瀏覽器
4. 窗口關(guān)系及框架
top對象始終指向最高（最外）層的框架，也就是瀏覽器窗口。使用它可以正確訪問任何一個(gè)框架。因?yàn)閷τ谠谝粋€(gè)框架中編寫的代碼中，window對象總是指向的都是那個(gè)框架的特定實(shí)例，而非最高層的框架。比如說，在子框架中，window是指本身的對象，假使要改變本框架的src及父窗口的iframe或者是frame的src，用window是不行的，這時(shí)要用window.top.$(選擇器)才能訪問
相關(guān)文章
15 個(gè)為編程初學(xué)者準(zhǔn)備的網(wǎng)站(都是國外的一些網(wǎng)站)
今天的文章，我們將分享15個(gè)可以學(xué)習(xí)編程的網(wǎng)站，這些網(wǎng)站上提供了很多編程教程，圖書以及編程練習(xí)，希望對你有用2024-11-02- 這篇文章主要介紹了web開發(fā)中的長度單位主要包括px,pt，em等,需要的朋友可以參考下2023-08-06
網(wǎng)頁前端開發(fā)的一些尺寸單位(px,rem單位)
px單位是絕對單位，一般用于pc端網(wǎng)頁開發(fā),因?yàn)槭墙^對單位所以在移動端上的使用體驗(yàn)并不是很好,rem它是描述相對于當(dāng)前根元素字體尺寸，是相對單位,它可以根據(jù)根元素的變換而2023-08-06WEB前端優(yōu)化必備js/css壓縮工具YUI-compressor詳解與集成用法
壓縮工具層次不窮，各有優(yōu)點(diǎn)，選擇適合的壓縮工具為將來做項(xiàng)目開發(fā)使用是一件很重要的事情?。≡谶@介紹YUI-compressor,需要的朋友可以參考下2023-06-21- 瀏覽器是多進(jìn)程的，有瀏覽器主進(jìn)程，網(wǎng)絡(luò)進(jìn)程，渲染進(jìn)程，插件進(jìn)程等，在將html，css，javascript解析成一個(gè)頁面的時(shí)候，就需要多個(gè)進(jìn)程的分工合作2023-05-01
- 本文為大家整理了常用的文件對應(yīng)的MIME類型，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-25
postman中form-data、x-www-form-urlencoded、raw、binary的區(qū)別介紹
這篇文章介紹了postman中form-data、x-www-form-urlencoded、raw、binary的區(qū)別，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-12-28網(wǎng)頁中使用Unicode字符的介紹(&#,\u等)
國際組織制定了可以容納世界上所有文字和符號的字符編碼方案，稱為Unicode，是通用字符集Universal Character Set的縮寫，用以滿足跨語言、跨平臺進(jìn)行文本轉(zhuǎn)換、處理的要求2021-11-27前端實(shí)現(xiàn)字符串GBK與GB2312的編解碼(小結(jié))
這篇文章主要介紹了前端實(shí)現(xiàn)字符串GBK與GB2312的編解碼(小結(jié))，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2020-12-02
告別硬編碼讓你的前端表格自動計(jì)算的實(shí)例代碼
這篇文章主要介紹了告別硬編碼讓你的前端表格自動計(jì)算,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-27
