CSS
文章平均质量分 50
Lmx!
学而不思则罔,思而不学则殆。
展开
-
CSS3 2D转换
CSS3 2D转换进行2D转换使用的属性使用transform属性可以进行一些二维的图形变换,如:平移、旋转等translate(x, y),移动方法,使元素从当前位置向x和y方向移动相应的像素距离rotate§,旋转方法,使元素相对于当前位置旋转p角度(一般使用deg为单位,度)scale(w, h),缩放方法,使元素相对原来的宽度和高度缩小或放大相应的倍数scaleX(w),缩放宽度,scale方法的一部分使元素的宽缩小或放大scaleY(h),缩放高度,scale方法的一部分使元素的高原创 2021-09-13 14:15:57 · 67 阅读 · 0 评论 -
CSS3动画属性
CSS3动画设置CSS3动画的一般流程设置关键帧将关键帧绑定到元素上设置动画的播放时间关键帧动画设置使用@keyframes [名称] 的形式来定义关键帧。使用form……to……来设置(动画时间开始到结束的样式)使用百分比来规定整个播放时间中各个百分比时的样式示例:@keyframes example{/*第一种方式*/ form {font-size:50px} to{font-size:30px}}@keyframes example{ 10%{原创 2021-09-13 10:10:15 · 256 阅读 · 0 评论 -
BFC(Block Formatting Context) 块级格式化上下文
BFC(Block Formatting Context) 块级格式化上下文BFC就好像标签的一个属性,可以使一个区域具有独立渲染不影响其他区域的特性。BFC常用的几个方式float属性不为noneoverflow属性不为visibleposition属性为absolute或fixeddisplay属性为inline-blockcontain值为layout、content、或paint多列容器BFC的用处避免外边距重叠清除浮动阻止元素被浮动元素覆盖...原创 2021-04-01 19:19:06 · 95 阅读 · 0 评论 -
Less学习
Less(css预处理器)学习less的优势css使用不能看出html节点的嵌套结构,less的嵌套可以看出html的结构less提高的是程序员的编码效率,而不是运行的速度。Less的使用方式直接引入,style标签要做引入的less.js之上(这种方式是运行时编译,会降低网页的加载速度)。使用考拉编译less,将整个.less文件编译成css文件使用node.js或各种脚手架Less的使用注释方式//不会编译到css中/**/会编译到css中Less中的变量原创 2021-06-10 22:15:31 · 139 阅读 · 0 评论 -
flex布局
flex布局常见父项属性flex-direction:设置主轴方向(默认row);row:从左到右;row-reverse:从右到左;column:从上到下;column-reverse:从下到上;justify-content:设置主轴上的子元素的排列方式(默认flex-start);flex-start:从头部开始;flex-end:从尾部开始;center:在主轴居中对齐;space-around:平分剩余空间;space-between:两端对齐;flex原创 2021-06-10 22:21:53 · 54 阅读 · 0 评论 -
CSS隐藏滚动条,保留滚动功能
CSS隐藏滚动条,保留滚动功能原理:设置父级为溢出隐藏,而子级不进行溢出隐藏设置同时改变子级的宽度使进度条溢出到父级外面。设置父级overflow:hidden;是为了使父级溢出隐藏。再设置子级的y轴方向可以滚动,然后设置子级的宽度使得滚动条溢出父级元素,达到隐藏滚动条的效果(实际上是滚动条溢出)示例:<!-- 设置外层标签的高度小于内层标签的高度,使滚动条出现 --><div style="height: 500px; border:solid 2px red; overflo原创 2021-08-18 11:23:26 · 3258 阅读 · 0 评论