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：

<!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) 给内联元素设置浮动后,会变成块级元素,拥有块级元素的特点

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

1. 文本溢出 overflow

（1）概念

（2）属性值

1）visible

2）hidden

3）scroll

4）auto

2. 文本溢出显示 text-overflow

3. 宽高自适应

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

(2) 自适应的优点

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

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

4. 全屏页面写法

5. 定位 position

(1) static

(2) 相对定位 relative

(3) 绝对定位 absolute

shasha

引用和评论

day34 gulp

CSS团队协作规范

前端开发工具

CSS 现在终于支持高度 auto 过渡动画了

纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

CSS 实现带tooltip的slider

盘点CSS文本两端对齐的N种方式