2019.6.22 Web全栈开发学习笔记（六）-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44363959/article/details/97133915

Day 6

课程内容

一、新的选择器

相邻选择符（相邻兄弟选择器）
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

div+p
{
  background-color:yellow;
}

兄弟选择器（后续兄弟选择器）
后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

div~p
{
  background-color:yellow;
}

焦点选择器
用于选择具有焦点的元素。

input:focus
{ 
background-color:yellow;
}

表示一个字段在获得焦点时，背景颜色为黄色

属性选择器
通过用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
::after
::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 可用时

二、阴影

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

三、背景

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(颜色块位置点，颜色块位置点) 位置点按百分比比例添加
-webkit-linear-gradient(red 20,yellow,70%,green 90%)
重复背景填充效果
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 分隔线

七、弹性盒子
弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
父容器：
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’属性的限制。