如何理解黑馬web前端開發

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

　　黑馬web前端開發定位的組成

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

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

　　定位的精髓：利用更改方向英文來進行位置設置;

　　黑馬web前端開發定位模式

　　靜態定位：position:static;

　　相對定位：position:relative;

　　參照物：相對于自己去進行位置移動;

　　相對定位特點：相對于自己為參照物進行位移，屬于占位定位，盒子仍然在標準流里面;

　　相對定位是不會改變盒子的顯示模式的;

　　絕對定位：position:absolute;

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

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

　　絕對定位特點：絕對定位是完全脫離了標準流不占位的，參照物默認以父級為主，如果父級沒有定位一層一層往上找，如果找不到定位的祖先盒子就以瀏覽器為參照定位;

　　子絕父相

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

　　子級絕對，父級相對，父級盒子定位了，但是依然占位，不會影響其他盒子的布局;

　　黑馬web前端開發固定定位：position:fixed

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

　　注意：固定定位完全脫離了標準流，參照物是可視窗口為準，和父級沒任何關系，IE6不支持固定定位，但是我們現在不用管它，直接使用就可以;

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

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

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

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

　　z-index堆疊順序

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

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

　　定位改變display屬性

　　相對定位不會改變盒子的顯示模式;

　　絕對定位和固定定位會將盒子的顯示模式轉化成具有行內塊元素的特性;

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

上述內容就是如何理解黑馬web前端開發，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。