标签：2021.5 31.20 solid 47 height width background position border
今天是星期一，有点累，不过还好。
背景图片和精灵图
<style>
/*
1.background-image: url(背景图片的资源路径)
2.background-size： 设置背景图片的大小
两个参数： 宽 高
取值：可以是绝对值 px， 也可以是百分比(基数参照容器的宽高值)
auto: 表示根据 宽/高 的缩放比例 ，计算 宽/高 的尺寸
cover/contain
cover: 覆盖 可以在等比例缩放图片的基础上，将容器填充满（不一定会把图片显示完整）
contain: 包容 可以在等比例缩放图片的基础上,完整的显示图片（不一定会把容器填充满）
3.background-repeat: 背景平铺
默认值：repeat
no-repeat 不平铺
repeat-x 只沿x轴平铺
repeat-y 只沿y轴平铺
4.background-position: 背景图片定位
两个参数： x轴的偏移量 y轴方向的偏移量
取值：绝对值 px;
方位名词： top bottom left right center
百分比： 计算背景图实际的偏移量 = (容器的宽/高 - 背景图的宽/高) * 百分比
*/
.box1{
width: 200px;
height: 200px;
background-image: url(./images/bg.png);
/* background-size: 200px 200px; */
background-size: 200px auto;
}
.box2{
width: 1000px;
height: 1400px;
background-image: url(./images/bg.png);
background-repeat: no-repeat;
border: 1px solid #333;
background-size: 100% 100%;
}
.box3{
width: 300px;
height: 240px;
background-image: url(./images/bg.png);
background-repeat: no-repeat;
/* background-position: -50px -104px; */
background-size: 400px auto;
background-position: 50% bottom;
}
.box4{
width: 800px;
height: 700px;
border: 1px solid #333;
background-image: url(./images/bg.png);
background-repeat: no-repeat;
background-size: contain;
}
</style>
</head>
<body>
<!-- <div class="box1"></div>
<div class="box2"></div> -->
<div class="box3"></div>
<div class="box4"></div>
</body>
代码使用的精灵图 放在对应的文件夹中
精灵图的制作
使用工具为CssSprite.exe(百度一下即可下载)
<style>
.img {
background: url(./images/img.png) no-repeat;
}
.send-gift {
height: 42px;
width: 129px;
background-position: 0 0;
}
.send-gift-hover {
height: 42px;
width: 129px;
background-position: 0 -42px;
}
.share-score-hover {
height: 42px;
width: 129px;
background-position: 0 -84px;
}
.btn-share {
height: 42px;
width: 129px;
background-position: 0 -126px;
}
.btn-replay-hover {
height: 42px;
width: 129px;
background-position: 0 -168px;
}
.btn-replay {
height: 42px;
width: 129px;
background-position: 0 -210px;
}
.btn-retry {
height: 28px;
width: 129px;
background-position: 0 -252px;
}
.score-bar {
height: 59px;
width: 131px;
background-position: 0 -280px;
}
.icon1:hover{
background-position: 0 -168px;
}
</style>
</head>
<body>
<div class="btn-replay img icon1"></div>
</body>
背景颜色及颜色取值
<style>
.box1{
width: 200px;
height: 200px;
font-size: 24px;
font-weight: 700;
/* 设置背景颜色 */
background-color: transparent;
/* 颜色取值：
1. 别名： 比如red blue transparent(透明色)等
2. 16进制数：#6位数字 0-9a-f
3. rgb(red,green,blue) 三元色 取值范围：0-255
4. rgba(red,green,blue,alpha) alpha:透明度 取值范围：0-1
*/
/* opacity: 透明度 */
/* 当一个元素定义了opacity属性，并且值小于1时，那么它的子元素也会同样拥有相同的透明度 */
/* opacity: 0.5; */
}
</style>
</head>
<body>
<div class="box1">
<p>hello</p>
</div>
</body>
利用边框制作三角形和箭头
1 <style>
2 /* 观察原理 利用边框生成等腰直角三角形 */
3 .tip1{
4 width: 0;
5 height: 0;
6 border-top: 20px solid red;
7 border-right: 20px solid green;
8 border-bottom: 20px solid blue;
9 border-left: 20px solid yellow;
10 }
11 .tip2{
12 width: 0;
13 height: 0;
14 /* border-top: 20px solid red;
15 border-right: 20px solid transparent;
16 border-bottom: 20px solid transparent;
17 border-left: 20px solid transparent; */
18
19 /* 等腰直角三角形 */
20 border: 20px solid transparent;
21 border-top-color: red;
22 }
23 .tip3{
24 width: 0;
25 height: 0;
26 /* 观察原理： 直角三角行 */
27 border-top: 40px solid red;
28 border-right: 20px solid green;
29 border-bottom: 40px solid blue;
30 border-left: 20px solid yellow;
31 }
32
33 /* 利用 边框+旋转 形成箭头 */
34 .arrow{
35 width: 30px;
36 height: 30px;
37 border-left: 3px solid #333;
38 border-bottom: 3px solid #333;
39 /* 旋转 */
40 transform: rotate(-45deg);
41 }
42 </style>
43 </head>
44 <body>
45 <div class="tip1"></div>
46 <div class="tip2"></div>
47 <div class="tip3"></div>
48 <div class="arrow"></div>
49 </body>
轮廓线
1 <style>
2 #txt:focus{
3 /* outline-color: tomato;
4 outline-style: dotted;
5 outline-width: 3px; */
6 outline: solid 3px red;
7 /* 轮廓线 与 边框的区别： 轮廓线部分上右下左四个方向 */
8 /* 初始化样式时，一般会去除 input ，button这些元素的轮廓线 */
9 }
10 .box{
11 width: 100px;
12 height: 100px;
13 outline: solid 3px red
14 }
15 </style>
16 </head>
17 <body>
18 <input type="text" id="txt">
19 <input type="button" value="按钮1">
20 <button>按钮2</button>
21 <div class="box"></div>
22 </body>
上外边距穿透问题
1 <style>
2 *{
3 margin: 0;
4 padding: 0;
5 }
6 /* 解决方式： */
7 .parent{
8 width: 300px;
9 height: 300px;
10 background-color: skyblue;
11 /* 1. 给父元素设置 overflow:hidden*/
12 /* overflow: hidden; */
13
14 /* 2. 给父元素添加上边框 */
15 /* border-top: 1px solid transparent; */
16
17 /* 3. 给父元素添加上内边距 */
18 /* padding-top: 1px; */
19 }
20 .child{
21 width: 100px;
22 height: 100px;
23 background-color: pink;
24 margin-top: 100px;
25
26 /* 4. 让子元素浮动 或者 绝对定位、固定定位 */
27 /* float: left; */
28 position: absolute;
29 }
30 </style>
31 </head>
32 <body>
33 <div class="parent">
34 <div class="child"></div>
35 </div>
36 </body>
行元素与行内块元素之间的间隙问题
<style>
.box1 span{
background-color: violet;
}
.box2{
/* 2. 设置父元素的font: size 0; 再重新设置子元素的font-size */
/* font-size: 0; */
}
.box2 span{
background-color: turquoise;
/* font-size: 20px; */
/* 3. 设置子元素浮动 */
/* float: left; */
/* 4. 利用 margin-left,让元素左移 */
margin-left: -5px;
}
</style>
</head>
<body>
<!-- 产生间隙的原因： 换行符 -->
<div class="box1">
<!-- 1. 元素与元素之间不加换行符 -->
<span>item1</span><span>item2</span>
</div>
<div class="box2">
<span>item1</span>
<span>item2</span>
<span>item3</span>
<span>item4</span>
<span>item5</span>
<span>item6</span>
<span>item7</span>
<span>item8</span>
<span>item9</span>
<span>item10</span>
</div>
</body>
标签：2021.5,31.20,solid,47,height,width,background,position,border 来源： https://www.cnblogs.com/wangjie677/p/14833257.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。