共计 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) 给内联元素设置浮动后, 会变成块级元素, 领有块级元素的特点
正文完