day21 浮動效果
-
標準文檔流：在沒有給標簽通過css布局時，標簽在瀏覽器中有一套默認的布局規(guī)律
- 布局規(guī)則：塊級標簽(一個占一行，設置寬高有效兄朋，默認寬度是父標簽的寬度，默認高度是內容的高度)未玻、行內標簽(一行內可以由多個，默認大小就是內容大小胡控，設置寬高無效)扳剿、行內塊標簽(一行可以顯示多個，默認大小是內容大小昼激，設置寬高有效庇绽，例如button、input橙困、img)
display屬性：block：塊級瞧掺，inline：行內，inline-block：行內塊凡傅，none：隱藏
-
脫標：脫離標準文檔流辟狈。只要標簽脫標，標準流的規(guī)則全部失效夏跷；不管什么樣的標簽在脫離標準流的情況下哼转，都是按照以下規(guī)則進行布局：一行可以顯示多個，默認大小是內容的大小槽华，設置寬高有效
- 浮動和定位都可以讓標簽脫標
- float屬性：left(左浮動)壹蔓、right(右浮動)
- 浮動的原理：
- 浮動內容環(huán)繞現(xiàn)象：被環(huán)繞標簽浮動，環(huán)繞的內容的容器標簽不浮動
- 清除浮動：清除因為浮動產(chǎn)生的高度塌陷猫态。當父標簽不浮動且不設置高度佣蓉，子標簽浮動就會產(chǎn)生高度塌陷的問題煮纵。
- 清除浮動的方法：
- 空盒子法：在高度塌陷的div最后添加一個空div，設置屬性為clear: both
- overflow：在會高度塌陷的標簽設置style屬性overflow為hidden
- 挖能清除法(偽元素清除法)：選擇器:after{display: block;clear: both;content: "";visibility: }
-
定位：
- position：選擇定位參考對象標簽偏螺；屬性值為initial或者static時代表不定位，為默認值匆光；absolute套像，相對于第一個position屬性不是initial/static的父標簽進行定位，由內向外查找终息；realtive：相對原標簽在標準流中的位置進行定位夺巩；fixed，相對于瀏覽器定位周崭；sticky：定位保持網(wǎng)頁中最后一個塊在最后面(網(wǎng)頁滾動的時候在瀏覽的最下面柳譬，網(wǎng)頁不超過一屏在內容最下面)
- left/right/top/bottom：設置當前標簽的左右上下到參考對象的距離，注意：在不給position屬性賦值時续镇，直接設置這幾個屬性無效
- 盒子模型：包含content美澳、padding、border摸航、margin制跟，html中每個可見的標簽都是一個盒子模型；設置標簽寬高其實是設置盒子content部分大小酱虎，添加子標簽時添加在content部分上雨膨，設置背景顏色和背景圖都會作用于content以及padding部分；padding是內容外面可見部分读串，默認沒有聊记，有四個方向，設置padding會讓標簽變大恢暖；border排监，邊框，有四個方向杰捂，可以單獨控制每個方向的大小顏色社露、樣式，賦值：border:邊框寬度 邊框樣式 邊框顏色琼娘，設置邊框的大小也會影響標簽的大星偷堋；margin脱拼，外邊距瞒瘸，有四個方向，不可見
