使用transform属性可以实现元素的位移、旋转、缩放等效果改变盒子在平面内的形态2D转换注意：在使用转换前，都需要给元素添加一个过渡效果：transition: all 0.5s;位移使用 translate实现元素的位移。语法：transform: translate(100px, 50px);
或：transform: translate(100%
......
238
0
0
2022-12-02
使用transform属性实现元素在空间内的位移、旋转、缩放等效果。空间转换也叫3D转换，是从坐标轴角度定义的，x y z三条坐标轴构成了一个立体空间，z轴位置与是想方向相同。空间位移使用translate实现元素空间位移效果。语法：transform: translate3d(x,y,z);
单个方向控制：transform:translateX(值)；
......
254
0
0
2022-12-02
基本上每一个网站都有logo，可能是文字形式的也可能是图片形式，而一个logo是企业形象或者产品形象的符号化体现，一个好看的有特色的logo更是能大大提高网站的吸引力。今天说的就是针对网站logo通过css制作一个扫光特效美化。这个方法主要针对博客类网站或者直接后台可以添加自定义css特效的网站，当然如果你稍懂一点前端技术的话也可以添加到自己的任意网站上。在
......
320
0
0
2022-12-02
场景： 让盒子四个角变得圆润，增加页面细节，提升用户体验。属性名： border-radius常见取值： 数字+px、百分比写法：border-radius:50px;
或
border-radius:10%;
原理：赋值规则： 从左上角开始赋值，然后顺时针赋值，没有赋值的看对角！边框圆角的场景应用画一个正圆：盒子必须是正方形设置边框圆角为盒子宽高的一
......
228
0
0
2022-12-02
1.直接设置父元素的高度优点： 简单粗暴、方便。缺点： 有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块等。2.额外标签法操作：在父元素内容的最后添加一个块级元素给添加的块级元素设置clear：both缺点： 会在页面中添加额外的标签，会让页面的HTML结构变得复杂。3.单伪元素清除法操作： 用伪元素替代了额外标签。基本写法：.father::aft
......
229
0
0
2022-12-02
静态定位：静态定位是默认值，就是之前认识的标准流。 代码：postion:static 静态定位不能通过方向偏移值来改变。相对定位：自恋型定位，相对于自己之前的位置进行移动。 代码：postion:relative需要配合访问属性来移动相对于自己原来的位置进行移动在页面中占位置→没有脱标应用场景 ：配合绝对定位组cp（子绝父相），用于小范围的移动。绝对定位：
......
250
0
0
2022-12-02
权重比较1、对于相同的选择器（比如同样都是类选择器），其样式表排序：行级样式 > 内嵌样式表 > 外部样式表（就近原则） 2、对于相同类型的样式表（比如同样都是内部样式表），其选择器排序：ID选择器 > 类选择器 > 标签选择器 3、外部样式表的ID选择器 > 内嵌样式表的标签选择器计算权重计算权重然后依据各选择器的权重进行比较
......
222
0
0
2022-12-02
font-weight 字体粗细属性说明对应值norml正常（默认值）100lighter较细400bold较粗700bolder很粗900font-style 字体风格属性说明normal正常（默认值）italic斜体oblique斜体在这里，有些字体有斜体italic属性，但有些字体却没有italic属性，oblique是让没有italic属性的字体也能
......
239
0
0
2022-12-02
边框样式border-widthborder-width用于定义边框的宽度，通常是一个像素值。border-styleborder-style用于定义边框的风格，通常有三种：属性说明none无样式dashed虚线solid实线除了上表列出这几个，还有hidden、dotted、double等取值。不过其他取值几乎用不上，可以直接忽略。border-color
......
287
0
0
2022-12-01
表格标题位置语法：caption-side:取值;默认情况下，表格标题是在表格的顶部，属性为：top，如果想把标题放在底部，属性为：bottom。如果想要定义表格标题的位置，在table或caption这两个元素的CSS中定义caption-side属性，效果是一样的，一般情况，我们只在table中定义就行。表格边框合并语法：border-collapse:
......
298
0
0
2022-12-01
CSS3说明 此笔记为本人学习遇见狂神说的教程学习笔记，侵删。快速入门html文件中<!-- 规范，<style> 可以编写css的代码，每个声明，最好使用分号结尾
语法：(里面不能写html代码， 注释/**/)
选择器{
声明1;
声明2;
......
326
0
0
2022-12-01
1.盒子模型盒子模型组成： > 盒子模型组成的主要有 边框border，外边距margin ，内边距padding，内容content；- 边框border:
> border可以设置元素的边距，边距有三部分，宽度，验收，颜色
> border: border-width || border-style || border-colo
......
321
0
0
2022-11-24
一个工具：前端快速开发插件EmmetEmmet 的前身就是 Zen Coding。 它是一组专门用来提高编写 HTML 和 CSS 代码速度的便利工具。将它整合进文本编辑器，可以提供一些功能和快捷方式，加快开发速度。提供包括 Eclipse、IDEA、UltraEdit、SlickEdit 的插件;CSS复合选择器CSS复合选择器是对基础选择器进行组合而成；
......
274
0
0
2022-11-24
随着css3实现各种炫酷动画效果越来越流行。今天给大家推荐一些css3和SVG实现loading加载动画效果。先上一波令人愉悦的动画效果。怎么样，是不是感觉很nice，那就继续往下看吧。这里为大家整理了一些不错的效果。1、CSSFX简单酷炸的css3效果，可一键复制css样式。# 演示地址
https://cssfx.lovejade.cn/
# g
......
379
0
0
2022-11-11
今天我们来看一下顶级的CSS动画库，帮助你创建惊人的动画。动画给页面带来生命力，有意义的动画将UX提升到一个新的水平。CSS动画使得你网站上元素不在是呆板无趣，并且不用借助任何JavaScript脚本。由于它是纯的CSS，所以很容易掌握。CSS3动画有一些新的语法，一旦你习惯了，你会发现动画其实很简单。CSS动画库可以在你网站元素上添加预先设定好的样式来实现
......
398
0
0
2022-11-11