如何理解黑馬web前端開發(fā)

本篇文章為大家展示了如何理解黑馬web前端開發(fā)，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

　　黑馬web前端開發(fā)定位的組成

　　定位布局：定位模式+邊偏移(方向英文更改)

　　邊偏移：top、bottom、left、right屬性;

　　定位的精髓：利用更改方向英文來進(jìn)行位置設(shè)置;

　　黑馬web前端開發(fā)定位模式

　　靜態(tài)定位：position:static;

　　相對(duì)定位：position:relative;

　　參照物：相對(duì)于自己去進(jìn)行位置移動(dòng);

　　相對(duì)定位特點(diǎn)：相對(duì)于自己為參照物進(jìn)行位移，屬于占位定位，盒子仍然在標(biāo)準(zhǔn)流里面;

　　相對(duì)定位是不會(huì)改變盒子的顯示模式的;

　　絕對(duì)定位：position:absolute;

　　參照物：絕對(duì)定位的參照物默認(rèn)以父級(jí)為主，如果父級(jí)沒有定位，就一層一層往上找，如果找不到定位的祖先盒子就以瀏覽器為參照;

　　注意:絕對(duì)定位完全脫離了文檔流;

　　絕對(duì)定位特點(diǎn)：絕對(duì)定位是完全脫離了標(biāo)準(zhǔn)流不占位的，參照物默認(rèn)以父級(jí)為主，如果父級(jí)沒有定位一層一層往上找，如果找不到定位的祖先盒子就以瀏覽器為參照定位;

　　子絕父相

　　布局的時(shí)候我們一般是上下布局，如果上邊的盒子用了絕對(duì)定位就會(huì)脫離文檔流，就會(huì)影響下面的布局，所以我們用子絕父相，用了相對(duì)定位父級(jí)原來的位置是不會(huì)改變的;

　　子級(jí)絕對(duì)，父級(jí)相對(duì)，父級(jí)盒子定位了，但是依然占位，不會(huì)影響其他盒子的布局;

　　黑馬web前端開發(fā)固定定位：position:fixed

　　參照物：電腦屏幕(可視窗口);

　　注意：固定定位完全脫離了標(biāo)準(zhǔn)流，參照物是可視窗口為準(zhǔn)，和父級(jí)沒任何關(guān)系，IE6不支持固定定位，但是我們現(xiàn)在不用管它，直接使用就可以;

　　絕對(duì)定位的盒子居中對(duì)齊(很重要)

　　絕對(duì)定位和固定定位的盒子不能使用margin:auto;設(shè)置水平居中，如果想要居中我們就需要如下設(shè)置：

　　設(shè)置定位盒子的left :50%; 設(shè)置盒子的margin-left:-自己的寬度的一半，讓盒子水平居中;

　　設(shè)置定位盒子的top :50%; 設(shè)置盒子的margin-top:-自己的高度的一半，讓盒子垂直居中;

　　z-index堆疊順序

　　z-index是定位的z軸顯示，只能用于相對(duì)定位、絕對(duì)定位和固定定位，數(shù)值越大越靠前，取值沒有單位;

　　如果沒有定位屬性的話z-index不生效;

　　定位改變display屬性

　　相對(duì)定位不會(huì)改變盒子的顯示模式;

　　絕對(duì)定位和固定定位會(huì)將盒子的顯示模式轉(zhuǎn)化成具有行內(nèi)塊元素的特性;

　　注意：如果給了元素定位屬性，默認(rèn)的寬度是由內(nèi)容撐開的，所以建議在書寫定位元素的時(shí)候盡量自己設(shè)置寬度; 浮動(dòng)以后的盒子也會(huì)改變盒子的顯示模式為具有行內(nèi)塊元素的特性

上述內(nèi)容就是如何理解黑馬web前端開發(fā)，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。