css笔记

1、text-indent:首行缩进
2、word-spacing :单词间距;letter-spacing:字符间距
3、border 可以嵌入,外凸等,inset,outset
4、position:fixed 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动:
relative 相对定位元素的定位是相对其正常位置。
在这里插入图片描述
5、overflow:hidden 不显示滚动条,scroll 显示 visible 不切割内容,auto 视内容长度决定,超出则scroll
6、图片水平居中::display:block,margin: auto
7、 transform: translate(50px,100px); translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。
transform: rotate(30deg); rotate()方法,在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。
transform: scale(2,3); scale(2,3)转变宽度为原来的大小的2倍,和其原始大小3倍的高度。
transform: skew(30deg,20deg); 包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参 数为负表示向相反方向倾斜。
8、:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单
9、属性选择器
在这里插入图片描述10、响应式布局
在这里插入图片描述11、background-origin:控制img在哪里显示,在内、在外还是内容里面
在这里插入图片描述12、background-clip: 背景剪裁属性是从指定位置开始绘制。
在这里插入图片描述13、background-image: linear-gradient(#e66465, #9198e5);从顶部开始的线性渐变。起点是红色,慢慢过渡到蓝色
background-image: linear-gradient(to right, red , yellow);从左到右渐变
14、background-image: radial-gradient(shape size at position, start-color, …, last-color);径向渐变
15、box-shadow:
在这里插入图片描述16、text-overflow:
在这里插入图片描述17、 word-wrap:break-word,允许长文本换行
keep-all,不允许长文本换行
break-all,允许换行
18、transform:
在这里插入图片描述19.transition:过渡

在这里插入图片描述在这里插入图片描述20、@keyframes 规则是创建动画。
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
animation:变化时长5s,infinite(循环,永久)
在这里插入图片描述alternate:交替
在这里插入图片描述21、column-count:3;将文本创建为3列
column-gap:40px;每列间距为40px
column-rule-style: solid;列与列间的边框样式
column-rule-width: 1px;列与列间的边框宽度
column-rule-color: lightblue;列与列间的边框颜色
column-rule: 1px solid lightblue;简写
column-span:all;效果类似于标题跨越所有列
column-width:100px;指定列的宽度
22、 resize属性指定一个元素是否应该由用户去调整大小 auto
23、 box-sizing:border-box; box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值