css--c3选择器

2019.7.20

CSS3
选择器：
相邻选择器 div+p
兄弟选择器 div ~p
:focus 获取焦点时触发
属性选择器
(E标签 attr属性)
E[attr] / E[attr=”值”] E[attr~=”值”] E[attr｜=”值”]
e[attr^=”val”] 开头包含val
e[attr$=”val”] 结尾包含val
e[attr*=”val”] 值内包含val

伪对象选择器
:first-letter 第一个字
:first-line 第一行

::before

超链接地址以doc结尾的，在之前插入图片，before、after必须与content配合使用！！！
::after
注意：和content配套使用
::selection 被选择时触发

结构伪类选择器
e:first-child 第一个子元素e
e:nth-child(n) n表示 数字，odd(奇数行) , even（偶数行）, 公式(2n) n=0,1,2…
e:only-child 唯一子元素e
e:first-of-type 第一个同类型
e:last-of-type 最后一个同类型的
e:nth-of-type (n) n表示 数字，odd(奇数行) , even（偶数行）, 公式(2n) n=0,1,2…
e:empty 空元素
e:root 根元素

状态伪类选择器
E：checked 选加后
e:disabled 禁用后
e:enabled 可用时

边框
border-radius圆角
边框阴影
box-shadow: h-shadow v-shadow blur spread color inset;
//水平位置 垂直位置 模糊距离 阴影程度 阴影颜色 内置/默认
text-shadow: h-shadow v-shadow blur color;
//水平位置 垂直位置 模糊距离 阴影颜色

border-image: source slice width outset repeat;
图像源路径，边界向内偏移 ，图像边界宽度，用于指定在边框外部绘制 border-image-area 的量，是否重复（3值）
是否应重复（repeated）、拉伸（stretched）或铺满（rounded）

background-origin:border-box/padding-box/content-box
背景定位位置：边框线、填充、内容区开始
background-size 背景图片大小（像素，百分比）
多背景：
逗号间隔，最前面的在最上面！！！
渐变色：
线性渐变
background: linear-gradient(direction, color-stop1, color-stop2, …);
默认从上向下
－webkit- 起始点位置
-o- 、 -moz- 终点位置
正常标准的 ：to 终点位置

多个颜色值：
颜色挨个添加
角度
0deg 90deg 180deg -90deg
linear-gradient(180deg,color1,color2…)
不均匀颜色块
linear-gradient(颜色块 位置点，颜色块 位置点) 位置点按百分比比例添加
eg: -webkit-linear-gradient(red 20,yellow,70%,green 90%)
重复背景填充效果
eg: background:-webkit-repeating-linear-gradient(left,orange,yellow 10%,green 50%);

径向渐变
background: radial-gradient(center, shape size, start-color, …, last-color);
center表示中心坐标位置，默认在中心点，可以用百分比或精确值表示中心坐标位置
shape表示形状： circle 圆形 ellipse 表示椭圆形 默认为椭圆
size参数：
closest-side最近的边
farthest-side最远的边
closest-corner最近的角
farthest-corner最远的角

重复的径向渐变：

自定义字体调用
@font-face {
font-family: font1;
src:url(fonts/Marvel-Regular.ttf);
}
调用：
font-family:font1

column-count 列数，分为几列
column-gap 列间距
column-rule 分隔线的样式

resize: none |both| horizontal| vertical
不能调整大小 、可以调整宽高、调整宽、 调整高

弹性盒子！！！

父容器：
display:flex;
display: -webkit-flex;
子容器的水平排列方式
justify-content:flex-start/flex-end/center/space-between/space-around （写在父容器里）
行首对齐、行尾对齐、中轴对齐、平均分布两边无间隔、平均分布两边有间隔距离
-webkit-justify-content：flex-start －webkit-兼容写法

垂直方向：
align-items: flex-start | flex-end | center | baseline | stretch

flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。