选择器:.box:类名选择器, #box:ID选择器 ,div p:后代选择器, div.box:交集选择器 ; div,p,span:并集选择器 ,
div>p :子代选择器; *:通配符,div+p:选中div后面的第一个P,div~p:选中div后面所有的P
伪类选择器::hover鼠标经过 , :link正常状态, :action点击, :viaited点击之后的状态
结构伪类:E:first-child:选择E父盒子中的第一个E,last-child:选择E父盒子中的最后一个E
E:nth-child(n):选择E父盒子中的第n个E,E:nth-child(odd/even):选择E父盒子中编号为奇数、偶数的E标签
E:nth-child(-n+5):选择E父盒子中的前五个E标签 , E:nth-last-child(-n+5):选择E父盒子中的后五个E标签
伪元素:用::标示,::before,在之前添加,::after,在之后添加,产生的伪元素相当于div的子元素,可以使用标签的属性
伪元素选择器:::frist-letter 选择第一个字母,::frist-line 选择第一行,::selection 选择区域的样式,一般用于设置背景颜色和字体 颜色
透明:rgba模式(红蓝绿(0-255) alpha 透明度(0-1))
background-color:rgba(0,0,255,0.3)
HSLA H:色调 S:饱和度 L:亮度 A:alpha透明度
background-color:hsla(0,50%,50%,0.1)
opacity:(取值0-1);可以给盒子设置透明,但是会影响子盒子,并切子盒子不能更改透明度
background:transparent;可以设置透明,但是无法自定义颜色,完全透明
文本阴影:text-shadow:3px 3px 3px red
盒子模型:传统盒子宽度=padding+border+width,内容区域大小不变,总体大小变化
C3盒子模型 box-sizing:content-box、padding-box、border-box
私有化前缀:-webkit-(谷歌的),-moz-(火狐),-ms-(IE )这个去百度详细了解如果加前缀也无法显示就放弃使用
边框圆角:border-radius:100px(正圆)或100%(拓展性强)
border-radius:左上,右上,右下,左下
边框阴影:box-shadow:左右位移值 上下位移值 模糊值 阴影大小值 颜色 inset内阴影
边框图片:border-image-source:url();
border-image-slice:27 27 27 27;图片边框的剪裁
border-image-width:27px;图片边框的宽度
border-image-repeat:
repeat;边框图片的正常平铺,但是可能会显示不完整
round平铺,但是保证图片完整显示
stretch拉伸显示
背景尺寸:background-size:设置背景大小(cover放大图片直至盖住整个盒子,会超出 contain能完整显示,但不能保证布满饿盒子)
背景原点:默认背景从padding开始 background-origin:padding-box;(border-box,content-box)
背景裁剪:background-clip:padding-box;
多背景:
线性渐变:渐变属于背景background-image:linear-grendient(to right,起始颜色,终止颜色),方向也可以使用角度设置比如4 5deg,颜色还可以自定义在框内所占的长度比这样实现彩虹线,又或者从多少开始多少结束这样就可以实现斑马线
径向渐变:语法:radiul-gragient(辐射半径 中心点位置 ,起始颜色,终止颜色)
backgroud-image:radial-gradient(at left top,yellow, blue)
backgroud-image:radial-gradient(at 50px 10px yellow,blue)
过渡体验:配合:hover使用
1、transition:width 2s,backgroud-color 1s(其还有延迟执行属性linear 1s表示延迟1s执行或者这样写 (transition:all 2s)
2、transition-property 过渡属性
3、transition-duration 过渡时间
4、transition-timing-function 过渡曲线
(linear匀速ease(ease-out)减速ease-in加速ease-in-out先加速后减速)
5、transition-delay延迟属性
气泡案例
位移:translate()
1、右移正数,左移负数(右下为负,左下为负)
2、第一个指水平移动,第二个值垂直移动距离
3、可写百分比数值,相对与自身的尺寸
4、盒子在父盒子中居中的方法
position:absolute;
left:50%;
transform:translate(-50%);
旋转:rotate(45deg)
正值顺时针,负值逆时针
旋转中心:transform-origin 默认旋转中心:几何中心
本博客是用于本人学习笔记,不喜勿喷,禁止用于商业盈利