乐趣区

关于css:day10-溢出宽高自适应定位

jiezi

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：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div> 块级元素，不设置宽度。则该块元素的宽随其父元素的宽 </div>
</body>

</html>

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

示例 2：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 100px;
            background-color: pink;
            float: left;
        }
    </style>
</head>

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

</html>

后果：

  • 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) 给内联元素设置浮动后, 会变成块级元素, 领有块级元素的特点
退出移动版