标签：box 修剪 菜鸟 元素 背景 background 图像 背景图 溢出
一、背景图
| background-color | 背景颜色 | 颜色 |
| background-image | 一个或多个背景图像 | url('./1.jpg') |
| background-reqeat | 重复背景图像 | repeat：默认 repeat-x：水平 repeat-y：垂直 no-repeat：不重复 inherit：从父元素继承 |
| background-attachment | 设置背景图像是否固定 或者随着页面的其余部分滚动 | scroll：默认 fixed：不随页面滚动 local：随元素内容滚动 还有其他属性 |
| background-position | 背景图像的位置 | lett/center/right/top/ bottom |
| background-origin | 背景图像的定位区域 | padding-box：背景图像填充框的相对位置 border-box：背景图像边界框的相对位置 content-box：背景图像的相对位置的内容框 |
| background-clip | 背景图像的绘画区域 | padding-box：剪切成衬距方框 border-box：剪切成边框方框 content-box：剪切成内容方框 |
| background-size | 背景图片的大小 | 80px 60px 宽 80 高60 |
注：在一个div元素中设置多个背景图像
body
{
background: #00ff00 url('smiley.gif') no-repeat fixed center;
}详解链接：https://www.runoob.com/cssref/css3-pr-background.html
二、文字溢出
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
| clip | 修剪文本。（不显示"..."） |
| ellipsis | 显示省略符号来代表被修剪的文本。（显示"..."） |
| string | 使用给定的字符串来代表被修剪的文本。 |
| normal | 默认。空白会被浏览器忽略。 |
| pre | 空白会被浏览器保留 |
| nowrap | 文本不会换行，文本会在在同一行上继续， 直到遇到 <br> 标签为止 |
| pre-wrap | 保留空白符序列，但是正常地进行换行 |
| pre-line | 合并空白符序列，但是保留换行符 |
| inherit | 规定应该从父元素继承 white-space 属性的值 |
注：1.溢出覆盖 2.字符溢出省略 3.同一行显示
body{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}过渡 ：transition：1s（1秒）
旋转：transform：rotate
垂直对齐：vertical-align:middle
水平对齐：line-height
标签：box,修剪,菜鸟,元素,背景,background,图像,背景图,溢出 来源： https://blog.csdn.net/CZW2181119177/article/details/118436093
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。