共计 1982 个字符，预计需要花费 5 分钟才能阅读完成。
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) 给内联元素设置浮动后, 会变成块级元素, 领有块级元素的特点
正文完
