css及HTML知識點

 html : 　180°  輸出爲

 css: 　  margin: 0 auto;會在頁面水平居中顯示 
　　　　box-shadow: 0 0 5px #f61818; 設置投影的位置大小顏色

　　　　outline:none;   去掉全部控件獲取焦點時的默認外邊框

　　　　:nth-child(n)第n個 子元素

 　　　  z-index只能在position屬性值爲relative或absolute或fixed的元素上有效。

————————————————————————————————————————————————————————————————————————

　　　　css佈局頁面的三大屬性： display/position/float

　　　　position的值：

　　　　　　relative，生成相對定位的元素，相對於其正常位置進行定位；

　　　　　　absolute，生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位；

　　　　　　fixed，生成絕對定位的元素，相對於瀏覽器窗口進行定位；

 　　　　　　static，默認值，沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）；

 　　　　　　inherit，規定應該從父元素繼承 position 屬性的值。

　　　　float，position=absolute/fixed都會脫離文檔流。區別是float不會擋住元素的內容，包括圖片內容。absolute和fixed會擋住內容。

————————————————————————————————————————————————————————————————————————————

　　　　css優先級：!important > 行內樣式 style>ID選擇器 > 類選擇器 > 標籤 > 通配符 > 繼承 > 瀏覽器默認屬性

——————————————————————————————————————————————————————————————————————————————————————

　　　　css選擇器：　

　　　　　　div>span 選取父元素是 <div> 元素內全部的子級的 <span> 元素，不包括孫子級的

　　　　　　div span 選取父元素是 <div> 元素內全部的 <span> 元素，包括全部後代的

　　　　　　div+p 選擇 <div> 元素以後緊跟的第一個 <p> 元素

　　　　　　div~p 選擇 <div> 元素以後全部同級的 <p> 元素

　　　　　　div,p 選中全部的<div>和<p>元素

　　　　　　div.t 選擇全部帶有樣式t的<div>元素

　　————————————————————————————————————————————————————————————————————————　　　　

　　　　flex佈局（彈性佈局）：flex-direction, flex-wrap, flex-flow, align-items, align-content, justify-content, 彈性佈局內各item的屬性： order, flex, flex-grow, flex-shrink, flex-basic, align-self

_______________________________________________________________________________________________________________________________________

 css有本身的函數： calc， min, max, attr;

　　width:calc(100% - 50px);

　　width: min(10%+10px, 100px);

　　content: attr(title);

white-space: nowrap; 讓文字不換行

 

獲取父子兄弟的節點：

　　offsetParent, parentNode, parentElement

　　children, firstElementChild,lastElementChild

　　previousElementSibling,nextElementSibling;

     refer:https://blog.csdn.net/laok_/article/details/75760572

取得某一元素相對瀏覽器能夠窗口的位置及大小信息

　　getBoundingClientRect

操做dom元素，給其添加移除css:

　　dom元素有個classList屬性，並對應有add/remove/toggle/contains/item方法

　　document.getElementById("myDIV").classList.add("classname1","classname2",...)/.remove("classname1","classname2",...)