day10 溢出/宽高自适应/定位

1. 文本溢出 overflow

（1）概念

• 文本溢出 overflow 是指文字超出宽度的显示情况

（2）属性值

1）visible

• 默认值，溢出正常显示

2）hidden

• 溢出隐藏/裁切

3）scroll

• 溢出则显示滚动条

4）auto

• 没溢出则正常显示；溢出则显示滚动条

2. 文本溢出显示 text-overflow

• text-overflow属性仅是：当文本溢出时是否显示省略标记，并不具备其它的样式属性定义

• 单行文本溢出显示省略号 的步骤：（四步）

  1）容器设置宽高

  2）设置文本不换行

  white-space: nowrap;

  3) 设置文本溢出隐藏

  overflow: hidden;

  4) 设置文本溢出显示省略号

  text-overflow: ellipsis;

3. 宽高自适应

(1) 宽高自适应的使用场景

• 网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是pc自适应

(2) 自适应的优点

• 元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示

(3) 宽度自适应 (重点)

• 块级元素不设置宽度，则跟随父元素的宽

• 设置宽度为百分比，则参考父元素的宽

  • 注意：当设置百分比为100%时，如果还设置了padding/border/margin, 浏览器底部会出现滚动条。
• max-width 宽度可以自适应，设置盒子的最大宽度
• min-width 宽度可以自适应，设置盒子的最小宽度

• 浮动对宽度自适应的影响

  • 1）当块元素不设置宽，设置浮动后（脱离文档流，找不到父元素了），则宽度自适应失效，宽度右内容撑开。

  示例1：

  
  
  
      
      
      
      
  
  
  
      
  块级元素，不设置宽度。则该块元素的宽随其父元素的宽
  
  
  

  结果： 宽度自适应，随其父元素的宽

示例2：

    
    
    
    



    
块级元素，不设置宽度，设置浮动。则该块元素脱离文档流而找不到父元素，宽度自适应失效。宽度由内容撑开。

结果：

• 2）元素设置margin:auto; 再设置浮动后，margin: auto 会失效；
• 3）给内联元素设置浮动后，会自动转换为块级元素，拥有块级元素的特点；

(4) 高度自适应（重点）

• 高度不设置或者设置为auto, 则高度由内容撑开
• 高度设置为百分比，则参考父元素的高
• 高度自适应,内容可以无限多地撑开高度, 但是不能高于某个值 max-height
• 高度自适应,内容可以无限少地撑开高度, 但是不能低于某个值 min-height

4. 全屏页面写法

（1） 给该元素设置 height:100%

（2）给html和body都设置 height:100%

• body的父元素是html， html的上一级是浏览器窗口
• 全屏是指浏览器的横向纵向都没有滚动条

5. 定位 position

(1) static

• static 默认值, 相当于没有定位

(2) 相对定位 relative

• 参考物： 自己本身
• 移动方向 left/right/bottom/top: 数值+px
• 产生距离是正数, 交叉是负数

• 特点：

  • 移动之后依然占位；
  • 不脱离文档流;

(3) 绝对定位 absolute

• 参考物: 有定位属性的祖先元素

  • 元素会从里向外找有定位属性的祖先元素,谁有定位属性,就参考谁,如果找到body之后依然没有找到的话.参考的就是浏览器窗口
  • 如果祖先都有定位属性的话,谁离该元素近就参考谁。一般情况下使用相对定位去形成参考物 (子绝父相)
• 移动方向 left/right/bottom/top: 数值+px

• 特点

  • 1) 元素会脱离文档流(不占位), 也会遮挡住后面的文字
  • 2) 元素不设置宽,设置绝对定位后,脱离文档流,宽度自适应失效,宽度由内容撑开
  • 3) 元素设置margin:auto;再绝对定位后,脱离文档流,margin:auto会失效
  • 4) 给内联元素设置浮动后,会变成块级元素,拥有块级元素的特点