2024年10月23日
伪元素能做什么？我们要他有何用？它能为我们解决什么问题？和其他的方法相比她有什么有点？我们为什么要使用它？
伪元素和伪类一样，添加到选择器，但是不是描述状态，他允许我们为元素某些部分设置样式；利用伪元素，我们可以简化页面的html标签，同时用起来也很方便，善于使用伪元素可以让你的页面更加地简洁优雅。之所以叫伪元素，是因为他修饰不在文档树中的部分；不是真实存在的；
伪元素实用小技巧
1.清除浮动
何谓清除浮动—？一个父元素的所有子元素如果都是浮动的，那么这个父元素是没有高度的;父元素并没有脱离正常的文档流，仍然占据正常文档流的空间; > 1. 如果这个父元素的相邻元素是行内元素，那么这个行内元素将会在这个父元素的区域内见缝插针，找到一块放得下它的地方 > 2. 如果相邻的元素是一个块级元素，那么设置这个块级元素的margin-top将会以这个父元素的起始位置作为起点。
2024年10月23日
非矩形设计正在变成一种时尚，比如波浪形、菱形、三角形等：
而随着技术发展，这种设计在技术实现上也变得更容易。
本文以最简单的三角形为例，演示使用5种方法来达到非矩形设计的界面效果（效果图如下所示）。
使用透明图片遮盖
代码如下：
优点是兼容性好，IE都能搞定，缺点是性能差。
使用SVG多边形元素
2024年10月23日
1. 2D 位移
/* x 轴方向位移 30px */
transform: translateX(30px);
/* 分别设置 x 轴与 y 轴的位移 */
transform: translateX(30px) translateY(40px);
/* 同时设置 x 与 y 的方向位移 */
transform: translate(-50%, -50%);2024年10月23日
CSS 动画和转换是为网页添加生动和吸引人的效果的关键。本文将引导你学习如何使用 CSS 动画和转换属性，为你的网页增添一份魔法。
2024年10月23日
1. 盒模型分为标准盒模型和怪异盒模型(IE模型)
2. box-sizing：content-box //标准盒模型
3. box-sizing：border-box //怪异盒模型
4. 标准盒模型：元素的宽度等于style里的width+margin+border+padding宽度
2024年10月23日
在考察应试者CSS基础的时候，有时候会要求用CSS绘制一些基础图形。今天向大家介绍一下平行四边形的绘制，如果用到了不用谢我。
一种思路是使用一个矩形的div和两个三角形拼接来形成平行四边形，当然可以使用伪类，这样就不用使用三个元素了。
另一种是使用skew属性。
举个栗子：
// css
.parallelogram {
display: inline-block;
padding: 50px 100px;
border: 1px solid black;
transform: skew(-20deg);
} //html <div class="parallelogram"></div>2024年10月23日
*{
margin: 0;
padding: 0;
height: 100%;
body{
width: 60%;
height: 75%;
border: 1px solid;
//margin:上左右下
margin: 15% auto 0;
&:hover #wrap{
/**
如果暴露的为2个property
1.先根据hover的property重新定义transition，进行渲染height和font
2.在移出#wrap后，再次调用已定义的proterty，进行渲染background和width
*/
transition-property: height,font;
height: 100px;
font: 20px/100px "微软雅黑";
background: salmon;
width: 100px;
}
#createDiv{
height: 800px;
position: relative;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
transition-property: height;
transition-duration: 2s;
transition-timing-function: cubic-belizer(.12,1.36,.65,-0.28);
}
#wrap{
width: 300px;
height: 300px;
font: 50px/300px "微软雅黑";
text-align: center;
background: aquamarine;
border-radius: 50%;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
transition-property: background,width;
transition-duration: 4s,3s;
//cubic-bezier: 函数中定义值。可能的值是 0 至 1 之间的数值(开始时间值，开始峰值，结束时间值，结束峰值)
transition-timing-function: cubic-belizer(.12,1.36,.65,-0.28);
}
}
}
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556572024年10月23日
一、px rem em区别
px
1.相对长度单位。相对于显示器屏幕分辨率而言。 2.存在浏览器不兼容问题。
em
1.相对长度单位。相对于当前对象内文本字体尺寸。 2.em值并不是固定的，em会继承父级元素的大小. 3.如果父级设置font-size:20px. 那么1em=20px. 2em=40px；如果父级设置font-size为30px. 1em=30px. 2em=60px. 4.存在容易造成字体设置混乱问题。