7.11css 背景图片与浮动小结

大圣收了神通吧

于 2022-07-11 22:57:34 发布

阅读量280

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_42416106/article/details/125733062

版权

本文是关于2022年7月重启编程前的CSS学习小结，重点介绍了背景图片的设置，包括`background-image`、`background-repeat`、`background-position`，以及精灵图片的使用。此外，还讲解了CSS中的透明度、显示隐藏、溢出处理和浮动等常用属性。特别提到了浮动元素可能导致的布局问题以及解决方法，如清除浮动。

摘要由CSDN通过智能技术生成

2022年 7月重启编程之前端

近期学习 css小结

你好！这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

7.11

1.背景图片
background-image:url() //()有无引号均可
background-repeat 默认repeat;no-repeat,repeat-x,repeat-y
background-position: 20px 20px; //第一个数字表示 x 轴(水平)位置，第二个是 y 轴(垂直) 位置。
可合并写background: url() no-repeat 20px 20px;
2.精灵图片
background-position :20px -30px;
通过控制位置,就能实现获取精灵图片的每一个图的位置
3.常用属性
①opacity:.3 透明度(0-1)
②display:none 隐藏,不占位置
③visibility:hidden 隐藏,占位置
④overflow:hidden 超出部分隐藏
:scroll 直接添加滚动条,不常用
:auto 超出的部分加滚动条
⑤省略文字…
background: #ddd;
三个属性共同作用,少一不可.
/* 不要换行 */
white-space: nowrap;
超出隐藏
overflow: hidden;
/超出部分用…
text-overflow: ellipsis;
4.浮动-行内块
float:left/right/top/bottom
浮动的特性:
1. 浮动是脱离文档流的;
2