html css筆記 -度一

"""瀏覽器shell  內核外表    心裏IE              tridentFirefox         Geckogoogle chrome   webkit/blinksafari          webkitopera           prestocss 權重!important > 行間樣式 > id > class | 屬性 > 標籤選擇器 > 通配符！important      Infinity  正無窮行間樣式          1000id               100class|屬性|僞類   10標籤|僞元素       1通配符           01000和100   256進制一位工程師手測試出來的瀏覽器父子選擇器的內部原理是由右到左查找設置字體大小其實是設置字體的高三角形用的是border設置段落 text-indent: 2em;1em = 1 * font-size1.行級元素/內聯標籤  display:inlinefeature:內容決定元素所佔位置        不能夠經過css改變寬高    span strong em a del2.塊級元素  display:blockfeature:獨佔一行        能夠經過css改變寬高    div p ul li ol form address3.行級塊元素  inline-blockfeature:內容決定大小        能夠改寬高    img凡是帶有inline的元素，都有文字特性代碼壓縮，去掉了空格回車，因此img不能用margin調節間距先定義功能（先寫CSS）很是重要！em能夠自定義功能a標籤去掉下劃線:text-decoration:none;ui標籤去掉圓點:list-style:none;    padding:0;    margin:0;通配符用法初始化標籤*{    padding:0;    margin:0;    text-decoration:none; ?    list-style:none;      ?}盒子模型盒子三大部分盒子壁  border內邊距  padding外邊距  margin盒子內容 width + heightpadding : 四個參數：上 右 下 左  三個參數：上 左右 下 兩個參數：上下 左右 一個參數：全都有body的margin 默認爲8pxposition        absolute            脫離原來位置進行定位            至關於最近的有定位的父級進行定位            若是沒有，那麼相對於文檔進行定位        relative            保留原來位置進行定位            至關於本身自己原來的位置進行定位        fixed            固定定位用relative做爲位置，用absolute進行定位居中：html:<div></div>css:div{    positoin:absolute/fixed; a..相對於文檔中間 f..相對於瀏覽器中間    left:50%;    top:50%;    width:100px;    height:100px;        margin-left:-50px;width * 0.5    margin-top:-50px;height * 0.5}z-index:*; position 層的優先顯示border-radius:50%  能夠把方塊變成圓圈浮動元素產生了浮動流全部產生了浮動流的元素，塊級元素看不到他們產生了bfc的元素和文本類屬性（inline）的元素以及文本都能看到浮動元素利用僞元素讓父級包裹住浮動元素clear:both必須是塊級元素僞元素必須加上content才能生效原型繼承聖盃模式:"""