加粗样式## 1.box-shadow
1.阴影不占位置的
第一个值是水平偏移量正值向右,负值向左
第二个值垂直偏移量 正值向下.负值向上
第三个值是模糊范围
第四个值是阴影的大小
第五个是阴影的颜色
如果我想多个方向有阴影
那么可以通过逗号隔开
2. text-shadow
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
3. input 更改 pleaseholder 的字体样式
input::-webkit-input-placeholder {
color: red;
font-size: 14px;
}
4.box-sizing:border-box
如果盒子只有40高
你给padding:30px 0;
那么高为60px
5.background-size 背景照片可以同时写几个背景照片,也可以和背景渐变一起写
background-size:500px 400px;
改变背景的宽高
background-size:100% 100%;
和父级大小一样 50%的话是背景图片所在盒子宽高的50%
background-size:100px
;宽度100px,高度auto自动等比例缩放
background-size:cover ;
等比例缩放,完全覆盖背景,超出的一部分会看不到.
bcakground-size:contain;
扩展到最大,直到宽或者高其中一个先到父级大小,就停止放大,有可能铺不满盒子
背景照片可以同时写几个背景照片,也可以和背景渐变一起写 背景图片要写再上面,背景颜色写后面!!!
5.1关于那个login案例背景颜色高度不够的时候会出现背景颜色平铺:
如果不给html,body{
min-height:100%;
}
5.2背景 精灵图居中background- origin: content-box
这里我们用js写循环精灵图的时候背景图片不会居中
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 150px;
margin: 50px auto;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
}
li {
float: left;
list-style: none;
width: 50px;
height: 50px;
padding: 13px 12px 12px 13px;
background-image: url(./images/sprite.png);
background-repeat: no-repeat;
/* 背景盒子居中 */
background-origin: content-box;
box-shadow: 1px 1px 0 0 #ccc;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
var box = document.querySelector('.box');
var lis = document.querySelectorAll('li')
for (var i = 0; i < lis.length; i++) {
var index = i * 44;
lis[i].style.backgroundPosition = `0 -${index}px`
}
</script>
</body>
</html>
6. 鼠标经过改变边框颜色 margin负值
这个时候不需要重新设置border,只需要改变边框颜色就可以了
有的需要用到 margin负值:如果配合hover需要用到定位给z-index增加层级,不然有margin负值的一边显示不出来
6.1 鼠标经过控制同级兄弟
hover:想做兄弟间的控制的话 可以用+号
7. 锤子面试题
一个div用三种方法写出三个颜色
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 第一种 */
/* .box {
width: 200px;
height: 200px;
background-color: #ccc;
margin: 200px auto;
box-shadow: 100px 0px 0px 0px red, -100px 0px 0px 0px green;
} */
/* 第二种 */
/* .box {
width: 400px;
height: 200px;
background-color: #ccc;
margin: 200px auto;
border-left: 200px solid green;
border-right: 200px solid red;
} */
/* 第三种 */
.box {
position: relative;
width: 400px;
height: 200px;
background-color: #ccc;
margin: 200px auto;
}
.box::after {
position: absolute;
content: "";
width: 100px;
height: 200px;
background-color: red;
}
.box::before {
position: absolute;
top: 0;
right: 0;
content: "";
width: 100px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>