Web笔记
元素浮动之后文字会环绕而不是重合
此处将logo浮动后 可以发下 导航盒子的确上去了 但是 文字却没被遮挡 这是因为元素浮动之后文字会环绕而不是重合
border-box
告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说,如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding,内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。
box-sizing: border-box;
CSS三角
首先可以使用字体图表
其次 我们用css 边框可以模拟三角效果宽度高度为0我们4个边框都要写, 只保留需要的边框颜色,其余的不能省略,都改为 transparent 透明就好了为了照顾兼容性 低版本的浏览器,加上 font-size: 0; line-height: 0;
div {
width: 0;
height: 0;
border: 50px solid transparent;
border-color: red green blue black;
line-height:0;
font-size: 0;
}
然后旋转可以做到 先画出右边框和下边框 再顺时针旋转45度即可
div::after {
content: "";
position: absolute;
top: 8px;
right: 15px;
width: 10px;
height: 10px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
transform: rotate(45deg);
}
图像放大效果
用scale放大 溢出隐藏
div {
overflow: hidden;
float: left;
margin: 10px;
}
div img {
transition: all .4s;
}
div img:hover {
transform: scale(1.1);
}
盒子翻转
.front {
background-color: pink;
z-index: 1;
transform: translateZ(17.5px);
}
.bottom {
background-color: purple;
/* 这个x轴一定是负值 */
/* 我们如果有移动 或者其他样式,必须先写我们的移动 */
transform: translateY(17.5px) rotateX(-90deg);
}
translateZ(17.5px)是因为不加的话底部很有一条险 (因为底部水平看起来就是一条线)
translateY(17.5px) 才能到底部|_ 否则底部平面是水平铺在在中间 这种形状|-
特殊情况下,在函数内不使用 var 声明的变量也是全局变量(不建议使用)
var a = b = c = 9;相当于 var a = 9; b = 9; c = 9; b 和 c 直接赋值 没有var 声明 当 全局变量看
函数内部定义了与外面全局变量同名的局部变量 使用局部变量
js中直接用var newarr = arr 还是一个地址 改变会影响旧数组 所以var newarr = arr.slice(0);