side visible absolut 實現 target 英文 float 動作 去重

### div溢出小點 - div寫一段英文，會看成一個，則溢出，加上空格，表示文字分割（空格回車都是文字分割） ### a - 加上target = “_blank_”跳轉到新頁面 - href = “#name”,給div一個name，點擊a標簽跳轉到該div出---回到頂部 ### 行級盒子VS塊級盒子 - 不在行級盒子裏面的文字回匿名生成行級盒子 比如： <p>some<em>text</em></p> - 塊級盒子不能同時包含兩種盒子，塊級裏面有塊級與行級，會自動生成匿名塊級盒子來包含行級盒子 比如：<div><h1>標題</h1><span>2018-07-18</span></div> - 行級盒子包含塊級盒子，會被塊級盒子分割成兩個部分，兩部分分別北生成的匿名塊級盒子包含 - display:inline-block----生成行級盒子，內容為塊級盒子 ### ::before 和 ::after - before會在子元素的前面生成一個**盒子**，相應的在子元素的後面生成一個**盒子** ### BFC(Block formatting context)塊級格式化上下文概念 - BFC布局規則1：內部的Box會在垂直方向，一個接一個地放置。 上文定義中提到過的塊級盒：block-level box，在這裏解析一波：我們平常說的盒子是由margin、border、padding、content組成的，實際上每種類型的四條邊定義了一個盒子，分別是分別是content box、padding box、border box、margin box，這四種類型的盒子一直存在，即使他們的值為0.決定塊盒在包含塊中與相鄰塊盒的垂直間距的便是margin-box。
- BFC布局規則2：Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
- BFC的作用4：阻止margin重疊: 當兩個相鄰塊級子元素分屬於不同的BFC時可以阻止margin重疊
操作方法：*給其中一個div外面包一個div，然後通過觸發外面這個div的BFC，就可以阻止這兩個div的margin重疊*
- BFC布局規則3：每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此，*div裏面的div、左浮是子div的左邊接觸父div的borderbox的左邊，右浮是子div接觸父div的borderbox右邊*
- BFC作用3：可以包含浮動元素——清除內部浮動 給父divpar加上 overflow: hidden;
*清除浮動原理：觸發父div的BFC屬性，使下面的子div都處在父div的同一個BFC區域之內，此時已成功清除浮動。*
- BFC布局規則4：BFC的區域不會與float box重疊,上面aside盒子有一個浮動屬性，覆蓋了main盒子的內容，main盒子沒有清除aside盒子的浮動。只做了一個動作，就是觸發自身的BFC，然後就不再被aside盒子覆蓋了。所以：BFC的區域不會與float box重疊。 <div class="aside"></div> <div class="text"> <div class="main"></div> </div>
- BFC作用：自適應兩欄布局。代碼同上面對---前一個是浮動元素，後一個是文字，在後一個加上overflow形成兩欄布局 - 實現div居中 { width: 200px;/*元素的寬度*/ height:200px;/*元素的高度*/ position: absolute; left: 50%;/*配合margin-left的負值實現水平居中*/ margin-left: -100px;/*值的大小等於元素寬度的一半*/ top:50%;/*配合margin-top的負值實現垂直居中*/ margin-top: -100px;/*值的大小等於元素高度的一半*/ } ### 文字環繞 - 浮動元素後面的行級元素會無視行級元素，並且行級元素會避開浮動元素，從而形成文字環繞 - 給包含浮動的元素添加一個overflow：hidden；清除浮動 - p標簽加上overflow，就導致p標簽變成BFC，而BFC則不會和浮動的元素去重疊 - 形成BFC的條件 - 浮動元素，float 除 none 以外的值； - 定位元素，position（absolute，fixed）； - display 為以下其中之一的值 inline-block，table-cell，table-caption； - overflow 除了 visible 以外的值（hidden，auto，scroll）； ### z-index - z-index 在z軸上的層次，可以為負數，整數表示，值越大越靠近用戶 - 比較時是在一般具有絕對定位而且具有原始的z-index---形成堆疊上下文 ### line-height - line-height指的是上一行文字的底到下一行文字的底 ### vertical-align - vertical-align-----垂直對其--上下移動 - 圖片或者文字不想有下縫隙 - 1將圖片或文字設置成block - 2把圖片或文字設置vertical-align：middle ### text-align - text-align----水平對齊--左右移動

html&css隨筆