zheshiyangyang的博客

浏览器兼容问题指：“不同浏览器(IE、Chrome、FireFox、Safari、Edge)对同一种CSS样式或同一段JS代码的解析和渲染会有所不同”，从而用户在不同浏览器环境下的访问呈现的页面效果不一致。浏览器兼容问题分为：“CSS兼容问题”、“JavaScript兼容问题造成浏览器兼容问题的根本原因是：“不同浏览器使用的内核不同”，不过随着时代的发展Webkit内核逐渐统一市场，浏览器兼容问题也越来越少。浏览器内核IETridentChromeBlinkFirefoxGecko。

位移变换函数：translate(x,y)、 translateX(x) 、 translateY(y) 、 translateZ(y)x,y 的值为单位长度，可以是 px、百分比z 的值只能为 px 长度单位。translate(x) 同等于 translate(x,0);缩放变换函数：scale(x,y) 、scaleX(x)、 scaleY()x,y 的值为数字，分别表示宽度和长度的缩放比例scale(x) 表示 y 的值和 x 一样大，实现等比缩放。

css中通过给transform添加translate(x,y)或translateX(x)或translateY(y)来实现元素的水平或垂直位移。在2D转换中，元素的默认变换原点为元素的中心(transform:50% 50%)x，y的值可以使长度值(px或百分比%)还可以是预设的关键词。后期的所有2D动画特效都是在这个2D的平面操作。同时使用多个转换，其多个转换函数之间用空格隔开。下图里的x和y轴，就是基于2D平面图形。旋转、缩放、倾斜或平移。z的值只能是长度值pc。移动，可以不再使用“

使用@keyframes关键帧来定义动画创建动画的原理是，将一套CSS样式逐渐变化为另一套样式在动画过程中，可以多次更改CSS样式的设定动画执行各阶段时间，可以通过百分比来改变发生的时间，或者通过关键词“from”和“tofrom和to等价于0%和100%，from和0%是动画的开始时间to和100%是动画的结束时间语法@keyframes 动画名 {/* 起始状态 */from { 样式 }/* 结束状态 */to { 样式 }/* 或 */@keyframes 动画名 {

多个过渡动画之间用“逗号”隔开transition: 属性 过渡时间 时间函数 延迟时间, 属性 过渡时间 时间函数 延迟时间,属性 过渡时间 时间函数 延迟时间;应用.box {opacity: 1;

-

item1与.item2都未设置z-indedx值时，默认都为0，写在后面的会覆盖写在前面的上面.box {.item {/*.item1与.item2都是相对于.box绝对定位.item1与.item2在都未高设置z-index时，默认值都0，写在后面会覆盖在前面的上面*/.item1 {left: 40px;top: 40px;left: 0;

定位类型描述应用场景相对定位 relative相对自身原来的位置定位，占着原来的位置微调元素的位置，但还占据原来空间只想提元升素的层级，但还是占原来的空间绝对定位 absolute相对离自己最近的定位的父元素定位，原来的位置被释放，相当于悬浮在页面中，会覆盖在其它元素的上面显示一个元素想覆盖在另一个元素上面配合 JS 来实现动画效果固定定位 fixed相对浏览器窗口进行定位你想让一个元素相对浏览器的位置一直不动粘性定位 sticky。

:after。

/* css规则1 */.box {color: red;/* css规则2 */div {鞠婧祎

属性规定当内容移除元素框时该做什么。，其用法和border属性一样。

style>.box3 {/*blue 代表蓝色0% 表示蓝色出现的位置yellow 代表黄色50% 表示黄色出现的位置red 代表红色100% 表示红色出现的位置*/上面出现的位置仅代表颜色出现的地方，在颜色出现的地方会水平自动的向左右延伸，直到碰到其他的颜色从而形成渐进，在两个颜色发生转换的地方我们叫做“转换中点我们可以将中点移动到这两个颜色之间的任意位置。方法：“在两个颜色之间添加未标记的 % ，以知识颜色的转换中点。

padding区域是有背景颜色的。

块级元素行内元素行内块元素互相转换和对比隐藏元素空白间隙。

也就是盒子里面能留给子元素的宽度和高度大小，也就意味着盒子里面的内容的最大面积就是width和height形成的矩阵面积。将盒子的左右两边的margin都设置为auto，盒子将水平居中。

【代码】CSS文本【关于文本看这一篇就够了！！！

下面的代码用来选择类名为“

不全是正值，则两者相加，得到的结果为最终移动距离。都为负值，则取绝对值最大的那个。全部为正值，取最大值。

我们制作网页时，少不了会给网页制作底部，用来注明作者信息也好，底部导航栏也好。最近作者在制作个人网站，制作网页底部踩了不少坑，因此来分享一下经验。

该登录界面中使用了“layui”组件制作标签以及前缀等，在使用时可以根据自己的需要，酌情删减，带有“layui-xx类的地方使用了layui组件不使用layui组件库并不会对登录界面造成影响。

CSS全称：“”，中文名：“层叠样式表用于定义网页样式和布局的样式表语言。通过CSS可以指定页面中各个元素的颜色、字体、大小、间距、边框等等样式。如果HTML是一个房子的骨架，那么CSS就是对房子进行精装修！选择器是使用CSS的基础，不会使用选择器就不会使用CSS。“元素(标签)选择器”、“类选择器”、“ID选择器”、“通用选择器”、“子元素选择器”、“后代(包含)选择器”、“兄弟(并集)选择器”、“伪类选择器选择器常在“内部样式表”、“外部样式表”中使用，内联样式默认就是“ID选择器。

对于字体大小、字体高度、窗口宽度等等，只要涉及大小的都需要我们给定一个属性值单位。那么属性值的单位可以是：“px(像素)”、“%(百分比)其中，百分比是相较于整个窗口的大小。

在CSS中，所有的标签都被认为是一个盒子，这个盒子有内容、盒子中的空隙、盒子的厚度、盒子外的距离。对应于CSS术语就是：“内容(content)”、“内边距(padding)”、“边框大小(bord)”、“外边距(margin)如下图所示：通过盒子模型，我们可以更精确的控制标签。所以使用CSS来进行页面布局，可以认为就是将盒子摆在合适的位置。不过值得注意的是，盒子模型只是人为抽象出来的概念，实际在CSSHTML中并不存在盒子模型，但对于上述四个属性却是实际存在的。

浮动属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘，这样即可使得元素进行浮动。语法选择器;使用场景：“当我们使用多个行内块元素摆放到一行时，彼此之间是会有空隙的，这时我们就可以使用浮动布局用来消除空隙浮动是是相对于父元素浮动，只会在父元素内部移动。

这几天在做，对于大屏有很多信息需要实时滚动，废了点力气学的明明白白的，特来记录供大家学习。

Flexflex-direction：内部元素的排列方式：从左到右、从右到左、从上到下、从下到上flex-wrap：子元素的换行方式：不换行、换行(第一行在上面、第二行在上面)flex-flow：子元素的排列方式和换行方式的简写justify-content：子元素的水平对齐方式align-items：子元素的垂直对齐方式align-content：设置多个元素组成的整块的对齐方式order：按照数字大小设置各个元素之间的排列方式flex-grow：按照权重分配剩余空间进行等比例放大。

这几天在写个人网站，因为要适配和，因此了解到了一个：“”()，现在我们来讨论一下中的单位，只有掌握好了这些单位，我们才可以熟练使用“不同的单位修改盒子的宽度。

最近开发个人网站，有个需求是可以，并且，用来展示，查阅了很多资料，发现，因此作者费劲功夫终于做好，特别在这里记录一下，用来供小伙伴们使用~先放一个。