day10-李大人part1

day10

浏覽器長截圖

更多工具—>開發者工具—>控制台—>ctrl+shift+p—>搜素capture full size screen shot，即可自動儲存在本地存儲

ps切圖

切片工具—>滑鼠左鍵—>ctrl+shift+alt+s—>png24—>存儲—>所有使用者切片

文章目錄

• day10
• • 一·溢出屬性：
  • • 1.1，屬性
    • 1.2，單行文本溢出
  • 二：寬高自适應
  • • 2·1，寬度不設定
    • 2·2，寬度設定百分比%
    • 2·3，寬度自适應範圍（響應式布局）
  • 三：浮動對寬度自适應的影響**
  • • 3·1，元素不設定寬,
    • 3·2，元素設定margin:auto
    • 3·3 ，給内聯元素設定浮動後,
  • 四：高度自适應
  • • 4·1，高度不設定或者auto
    • 4·2，高度設定百分比%
    • 4·3，高度自适應範圍（響應式布局）
    • 4·4，設定全屏頁面
  • 五：定位position
  • • 5·1：預設值
    • 5·2：相對定位
    • • • 屬性：
        • 特點：
    • 5.3：絕對定位
    • • • 屬性：
        • 特點：
    • 5.4：固定定位
    • 5.5：粘性定位
    • 5.4：固定定位
    • 5.5：粘性定位

一·溢出屬性：

1.1，屬性

overflow （overflow-x/overflow-y）：

• —hidden：溢出隐藏
• —visiable：溢出正常顯示
• —scroll：溢出顯示滾動條
• —auto：溢出時候出現滾動條，沒有溢出的時候不加滾動條

1.2，單行文本溢出

單行文本溢出顯示省略号
    1. 設定寬度
    2. 設定不換行 white-space: nowrap;
    3. 設定溢出隐藏 overflow:hidden
    4. 設定文本溢出顯示省略号 text-overflow: ellipsis;
           

二：寬高自适應

2·1，寬度不設定

​ （參考父元素的寬）

2·2，寬度設定百分比%

​ （參考父元素的寬）

2·3，寬度自适應範圍（響應式布局）

​ 最大寬大max-width：數值+px

​ 最小寬度 min-width：數值+px

三：浮動對寬度自适應的影響**

3·1，元素不設定寬,

設定浮動後,寬度自适應失效,寬度由内容撐開
           

3·2，元素設定margin:auto

再設定浮動後,margin:auto會失效
           

3·3 ，給内聯元素設定浮動後,

會變成塊級元素,擁有塊級元素的特點
           

四：高度自适應

4·1，高度不設定或者auto

​ （由内容撐開）

4·2，高度設定百分比%

​ （參考父元素的高）

4·3，高度自适應範圍（響應式布局）

• 最大高度max-height：數值+px

（高度自适應,内容可以無限多 撐開高度 但是不能高于某個值 ）

• 最小高度 min-height：數值+px

（ 高度自适應,内容可以無限少 撐開高度 但是不能低于某個值 ）

4·4，設定全屏頁面

1. 給自己設定100%高
2. 給body設定100%高
3. 給html設定100%高

五：定位position

5·1：預設值

• static；靜态（預設值，相當于沒有定位）

5·2：相對定位

屬性：

• -relative 相對定位

  1.參照物：自己本身

  2.移動：left、right，top，bottom: 數值+px

  産生距離是正數 交叉是負數

特點：

1. 移動之後依舊占位置（例如座位）
 2. 不脫離文檔流
           

5.3：絕對定位

屬性：

• absolute 絕對

  1.參照物：有定位屬性的祖先元素（一般情況下設定為相對定位）

  2.移動：left、right，top，bottom: 數值+px

  3.一般情況下，給元素設定絕對定位，就要給祖先元素設定相對定位

• 元素會從裡到外找有定位屬性的祖先元素，誰有定位屬性，就參考誰，
• 如果找到body之後依然沒有找到的話.參考的就是浏覽器視窗,
• 如果祖先都有定位屬性的話,誰離該元素近就參考誰

特點：

1. 元素會脫離文檔流, 也會遮擋住後面的文字
2. 元素不設定寬,設定絕對定位後,脫離文檔流,寬度自适應失效,寬度由内容撐	開
3. 元素設定margin:auto;再絕對定位後,脫離文檔流,margin:auto會失效
4. 内聯元素設定浮動後,會變成塊級元素,擁有塊級元素的特點
           

5.4：固定定位

5.5：粘性定位

,脫離文檔流,寬度自适應失效,寬度由内容撐 開

3. 元素設定margin:auto;再絕對定位後,脫離文檔流,margin:auto會失效

4. 内聯元素設定浮動後,會變成塊級元素,擁有塊級元素的特點

5.4：固定定位

5.5：粘性定位