二十一、二维变换

发表于 2020-09-11 分类于前端

二十一、二维变换

通过CSS3 transform转换，我们能够对元素进行移动、缩放、旋转、斜切等操作。

移动:translate()

使用translate（）函数，你可以把元素从原来的位置移动。移动参照元素左上角原点

a）语法：translate（tx）I translate（tx，ty）

b）tx是一个代表X轴（横坐标）移动的向量长度，当其值为正值时，元素向X轴右方向移动，反之其值为负值时，元素向X轴左方向移动。

c）ty是一个代表Y轴（纵向标）移动的向量长度，当其值为正值时，元素向Y轴下方向移动，反之其值为负值时，元素向Y轴上方向移动。
如果ty没有显式设置时，相当于ty=0。

d）也可以使用translatex(tx)或者translateY(ty)

样式：

<head>
    <style>
                * {
            padding: 0;
            margin: 0;
        }
        
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            margin-left: 200px;
            /*添加过渡效果css样式名称耗时*/
            transition: transform 2s;
        }
        
        div:active {
            /*使用transform实现元素的移动
            a.移动是参照元素的左上角
            b.执行完毕之后会恢复到原始状态
            1.如果只有一个参数就代表×方向
            2.如果有两个参数就代表x/y方向*/
            transform: translate(100px, 100px);
            /*添加水平或者垂直方向的移动*/
            /* transform: translateX(300px); */
            /* transform: translateY(300px); */
        }
    </style>
</head>

缩放:scale()

样例

<head>
    <style>
            div:nth-of-type(2):active {
            /*实现缩放 1指不缩放，>1放大;<1缩小;参照元素的几何中心放大
            1.如果只有一个参数，就代表x和y方向都进行相等比例的缩放
            2.如果有两个参数，就代表x/y方向*/
            transform: scale(2, 1);
            /*缩放指定的方向*/
            /* transform:scaleX(0.5); */
            /* transform: scaleY(0.5); */
        }
    </style>
</head>

旋转:rotate()

旋转rotate（）函数通过指定的角度参数对元素根据对象原点指定一个2D旋转。它主要在二维空间内进行操作，接受一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转

a）语法：

rotate(a):

b）a：代表的是一个旋转的角度值。其取值可以是正的，也可以是负的。
如果取值为正值时，元素默认之下相对元素中心点顺时针旋转；如果取值为负值时，元素默认之下相对元素中心点逆时针旋转

样式：

<head>
    <style>
			div:nth-of-type(3):active {
            transform: rotate(300deg);
        }
    </style>
</head>

斜切:skew()

2D斜切：skew（）：能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate（）函数的旋转不同，rotate（）函数只是旋转，而不会改变元素的形状。skew（）函数不会旋转，而只会改变元素的形状
a）语法：

skew(ax) I skew(ax，ay)

b）ax：用来指定元素水平方向（X轴方向）倾斜的角度。
c）ay：用来指定元素垂直方向（Y轴方向）倾斜的角度。如果未显式的设置这个值，其默认为0。
d）也可以使用skewx（sx）或者skewY（sy）

同时添加多个transform属性值

用空格分割，例：

transform:translateX(700px) rotate(-90deg);

十九、过渡

发表于 2020-09-11 分类于前端

十九、过渡

通过过渡transition，我们可以在不使用IFlash 动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果.要实现这一点，必须规定两项内容：

1.规定希望把效果添加到哪个CSS属性上，

2.规定效果的时长

语法

transition: property duration timing-function delay;

样式

<head>
    <style>
               * {
            padding: 0;
            margin: 0;
        }
        
        div {
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            left: 100px;
            top: 100px;
            /* 添加过渡效果：过渡效果执行完毕之后，默认会还原到原始状态*/
            /*1.transition-property：添加过渡效果的样式属性名称*/
            /* transition-property: left; */
            /* 2.transition-duration：过渡效果的耗时I以秒做为单位/ */
            /* transition-duration: 2s; */
            /*3.transition-timing-function：设置时间函数--控制运动的速度*/
            /*transition-timing-function:linear；*/
            /*4.transition-delay：过渡效果的延迟*/
            /*transition-delay：2s；*/
            /*简写：transition：属性名称过渡时间时间函数延迟*/
            /* transition: left 2s linear 0s; */
            /*为多个样式同时添加过渡效果*/
            /* transition: left 2s linear 0s, background-color 5s linear 0s; */
            /* 为所有样式添加过渡效果 all:所有 
            1.所有样式的过渡效果一样
            2.效率低下，会去查询所有添加的样式
            3.建议不用*/
            transition: all 2s
        }
        
        div:active {
            left: 1000px;
            background-color: blue;
        }
    </style>
</head>

参数

对象	定义
property	规定设置过度效果的CSS属性的名称
duration	规定完成过渡效果需要多少秒或毫秒
timing-function	规定速度效果的速度曲线
delay	定义过渡效果何时开始

补充参数

补充说明 tansition-timing-function：属性规定过渡效果的速度曲线

对象	定义
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier（0，0，1，1）
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier（0.25，0.1，0.25，1））
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier（0.42，0，1，1））
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier（0，0，0.58，1））
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier（0.42，0，0.58，1））
cubic-bezier(n,n,n,n)	在cubic-bezier函数中定义自己的值。可能的值是0至1之间的数值。

十八、边框图片

发表于 2020-09-11 分类于前端

十八、边框图片

div{
width: 300px;
height: 300px;
margin: 100px auto;
border: 27px solid red;
/*添加边框图片*/
/*border-image-source:可以指定边框图片的路径，默认只是填充到容器的四个角点*/
border-image-source:ur1("../images/border1.png");
/*让它成为九宫格：border-image-slice：设置四个方向上的裁切距离.fi11：做内容的？
S内部填朴/
border-image-slice：27 fill;
}

/*border-image-width：边框图片的宽度。如果没有设置这个属性，那么宽度默认就是元素的原始的边框宽度。
细节：1.边框图片的本质是背景，并不会影响元素内容的放置2.内容只会被容器的border和padding影响
建议：一般将值设置为原始的边框的宽度*/
border-image-width：27px；
/*border-image-outset：扩展边框*/
border-image-outset:epx；
/*border-image-repeat:I repeat：直接重复平铺
round：将内容缩放进行完整的重复平铺*/
border-image-repeat:round；
/*缩写：*/
/*border-image:source slice/width/outset repeat；*/
border-image: url("../images/border1. png")27 /27px /epx round;

二十、伸缩盒子

发表于 2020-09-11 分类于前端

二十、伸缩盒子

伸缩布局

布局的传统解决方案，基于盒状模型，依赖 display 属性+position属性+float属性。

它对于那些特殊布局非常不方便。CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。

样式：

<head>
    <style>
                * {
            padding: 0;
            margin: 0;
        }
        
        .box {
            width: 900px;
            height: 600px;
            border: 1px solid red;
            box-sizing: border-box;
            margin: 0 auto;
            /* 设置父容器为盒子；会使每一个子元素为伸缩项 */
            display: flex;
            /* 设置子元素排列方式 */
            justify-content: space-around;
            flex-wrap: wrap;
            flex-direction: column;
        }
        
        .first {
            width: 200px;
            height: 200px;
            background-color: red;
            flex-grow: 1;
        }
    </style>
</head>

重要属性

a）display:flex：如果一个容器设置了这个属性，那么这个盒子里面的所有直接子元素都会自动的变成伸缩项（flex item）
b）justify-content：设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式，语法：justify-content:flex-start I flex-end I center I space-
between I space-around

flex-start：

弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。

flex-end：

弹性盒子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。

center：

弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐，同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距（如果剩余空间是负数，则保持两端相等长度的溢出）。

space-between：

左右对齐父容器的开始和结束，中间平均分页，产生相同的间距

space-around：

将多余的空间平均的分页在每一个子元素的两边margin:e auto.造成中间盒子的间距是左右两边盒子间距的两倍*/

常用属性

flex-flow：

是flex-wrap和flex-direction的综合

flex-wrap：控制子元素是否换行显示，默认不换行
nowrap：不换行–则收缩
wrap：换行
wrap-reverse：翻转，原来是从上到下，翻转后就是从下到上来排列

flex-direction：

设置子元素的排列方向：就是用来设置主轴方向，默认主轴方向是row（水平方向）

row：水平排列方向，从左到右
row-reverse：水平排列方向，从右到左
column：垂直排列方向，从上到下
column-reverse：垂直排列方向，从下到上*/

flow-grow：

可以来扩展子元素的宽度：设置当前元素应该占据剩余空间的比例值比例值计算：当前空间的flex-grow/所有兄弟元素的flex-grow的和flex-grow的默认是0,说明子元素并不会去占据剩余的空间

flow-grow:1;

flex-shrink：

定义收缩比例，通过设置的值来计算收缩空间比例值计算：当前空间的flex-shrink/所有兄弟元素的flex-shrink的和默认值为1

flex-shrink:2;

flex属性：

flex属性是flex-grow,flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选
语法：

flex:[flex-grow][flex-shrink][flex-basis]:大多数情况下没必要使用这种语法，当使用flex缩写时，大多数情况下没必要使用这种语法

flex:[number]:这个语法指定了一个数字，代表了这个伸缩项目该占用的剩余空间比例

flex:auto:属性值被设为auto的伸缩项目，会根据主轴自动伸缩以占用所有剩余空间

其他属性

align-items：

设置子元素（伸缩项）在侧轴方向上的对齐方式center：设置在侧轴方向上居中对齐

flex-start：设置在侧轴方向上顶对齐flex:end：设置在侧轴方向上底对齐

stretch：拉伸：让子元素在侧轴方向上进行拉伸，填充满整个侧轴方向默认值

baseline：文本基线

align-items:center；

align-self:

设置单个子元素在侧周方向上的对其方式

align-self: flex-end

十七、渐变

发表于 2020-09-11 分类于前端

十七、渐变

渐变：

渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。可分为线性渐变、径向渐变

线性渐变

1.linear-gradient线性渐变指沿着某条值线朝一个方向产生渐变效果

a）语法：

1	linear-gradient([<point>\|\|<angle>,]?<stop>,<stop>[,<stop>]*)

b）参数说明：

第一个参数表示线性渐变的方向，
1.to left：设置渐变为从右到左。相当于：270deg；
2.to right：设置渐变从左到右。相当于：90deg；
3.to top：设置渐变从下到上。相当于：0deg；
4.to bottom：设置渐变从上到下。相当于：180deg。这是默认值，等同于留空不写。也可以直接指定度数，如45deg
第二个参数是起点颜色，可以指定颜色的位置
第三个参数[,]是终点颜色，你还可以在后面添加更多的参数，表示多种颜色的渐变

c) 样例:

<head>
    <style>
        diV {
            width: 300px;
            height: 300px;
            /*添加渐变：渐变不是一个单一钩，它产生的是图像，所以需要使用
        background*/
            /*1inear-gradient（方向，开始颜色位置，颜色2位置，颜色3位置.…）；*/
            /*方向：
        to top:edeg to right：9edegI to bottom：18edeg--默认址
        to left：270deg*/
            background: linear-gradient(to right，red，blue);
            background: linear-gradient(to right，red 0%，red 50%，blue 50%，blue 100%);
        }
    </style>
</head>

径向渐变

2.radial-gradient径向渐变指从一个中心点开始沿着四周产渐变效果

a）语法：

1	<radial-gradient>=radial-gradient([[<shape>ll<size>][at ]？，I at <position>，]？<color-stop>[，<color-stop>]+)

b）取值：
i.确定圆心的位置。如果提供2个参数，第一个表示横坐标，第二个表示纵坐标；如果只提供一个，第二值默认为50%，即center

i.shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样

ii.size：渐变的大小，即渐变到哪里停止，它有四个值。closest-side：最近边；farthest-side：最远边；closest-corner：最近角；farthest-corner：最远角。默认是最远的角farthest-corner

iv.：指定颜色。Rgba hsla

c) 样式：

<head>
        <style>
        div {
            width: 300px;
            height: 200px;
            /*添加径向渐变：产生也是图像*/
            /*background:radial-gradient（red，blue）；*/
            /*语法：radial-gradient（形状大小坐标）：
            形状shape:circle：产生正方形的渐变色ellipse：适配当前的形状，如果是正方形的容器，两者效果一样
            at position：坐标，默认在正中心。可以赋值坐标（参照元素的左上角），也可以赋值关键字（left center right top bottom）
            大小size:closest-side：最近边；farthest-side：最远边；closest-corner：最近角；farthest-corner：最远角。默认是最远的角farthest-corner*/
            /*background:radial-gradient（circle，red，blueI；*/
            /* background: radial-gradient(circle at 50px 50px, red, blue); */
            /*background:radial-gradient（at left top，red，blue）；*/
            /* 设置颜色的位置 */
            background: radial-gradient(red, red 50%, blue 50%, blue);
        }
    </style>
</head>

重复渐变

样式：

<head>
    <style>
       div {
            width: 300px;
            height: 200px;
            background:repeating-radial-gradient(circle closest-side at center center,
#fff 0%,#fff 18%,#000 10%,#000 20%);
    </style>
</head>

十六、背景样式

发表于 2020-09-10 更新于 2020-09-11 分类于前端

十六、背景样式

/*1.添加背景颜色*/
/*background-color:skyblue；*/
/*2.添加背影图片
如果图片大于容器，那么默认就从容器左上角开始放置
如果图片小于容器，那么图片默认会平铺*/
/*background-image:url（"../images/bg-img.jpg"）；*/
background-image:url（"../inages/sharel.png"）；
/*3.设置背景平铺
round：会将图片进行缩放之后再平铺
space：图片不会缩放平铺，只是会在图片之间产生相同的间距值*/
/*background-repeat:space；*/
/*4.设置在滚动容器的背景的行为：跟随滚动/固定fixed：背景图片的位置固定不变
scro11：当滚动容器的时候，背景图片也会跟随滚动*/
/*local和scro11的区别：前提是滚动当前容器的内容
loca1：背景图片会跟随内容一起滚动
scro11：背景图片不会跟随内容一起滚动*/
background-attachment:scroll；

background-size属性

CSS里的background-size属性能够让程序员决定如何在指定的元素里展示，它通过改变背景尺寸的通过各种不同是属性值改变背景尺寸呈现的大小。往往建议不要将图放大，如果有需要，尽量让图缩小

语法

对象	定义
background-size:auto	原始图片大小
number	具体数值
percentage	百分比0-100%
cover	放大铺满
contain	缩小铺满

cover与contain刚好相反，背景图片会按比例缩放自适应整个背景区域，如果背景区域不足以包含所有背景图片，图片内容会溢出

1.图片大于容器：等比例缩小，会填满整个背景区域，有可能造成图片的某些区域不可见

2.图片小于容器：等比例放大，填满整个背景区域，图片有可能造成某个方向上内容的溢出

十五、圆角

发表于 2020-09-10 分类于前端

十五、圆角

/*添加边框圆角*/
/*1.设置一个值：四个角的圆角值都一样*/
/*border-radius：10px；*/
/*2.设置两个值：第一个值控制左上/右下，第二个值控制右上/左下*/
/*border-radius：10px 30px；*/
/*3.设置三个值：第一个值控制左上，第二值控制右上/左下，第三个值控制右下*/
/*border-radius：10px 40px 60px；*/
/*4.设置四个值：左上右上右下左下*/
border-radius：10px 30px 60px 100px；

/*添加/是用来设置当前个不同方向的半径值水平×方向/垂直y方向*/
/*border-radius：100px/50px；*/
/*添加某个角点的圆角*/
/*border-radius:epx 50px 0px 0px；*/
/*border-上下-左右Iradius:*/
/*border-top-right-radius：100px；border-top-left-radius：100px；*/
/*border-bottom-left-radius：100px；border-bottom-right-radius：100px；*/

/*设置某个角点的两个方向上的不同圆角*/
/*border-top-right-radius：100px 50px；border-bottom-left-radius：80px 40px；border-bottom-right-radius：60px 30px；border-top-left-radius：40px 20px；*/
/*如果想设置四个角点的不同方向上的不同圆角值*/
/*分别是水平方向的：左上，右上，右下，左下/垂直方向的：左上，右上，右下，左下*/

十四、盒模型

发表于 2020-09-10 分类于前端

十四、盒模型

主体

<head>
    <style>
        .box {
            width: 400px;
            height: 200px;
            background-color: #ccc;
            margin: 100px auto;
        }
        
        .left {
            width: 200px;
            height: 100%;
            background-color: red;
            float: left;
            /* 添加内间距 */
            padding-left: 10px;
            /* 添加右边框 */
            /* border-right: 3px solid green; */
            /* 设置盒模型 */
            /* content-box:你设置的width属性值仅仅是内容的宽度，盒子的最终宽度值在windth的基础上再加上padding和border的宽度 */
            /* border-box:你设置的width属性值就是盒子最终宽度 */
            box-sizing: border-box;
        }
        
        .right {
            width: 200px;
            height: 100%;
            background-color: blue;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">321</div>
        <div class="right"></div>
    </div>

</body>

对象	定义
width	宽度
height	高度
background-color	背景颜色
margin	外边距的宽度
margin: auto	居中
float	浮动
padding-left	添加内间距
border-right	添加右边框
content-box	仅内容的宽度
border-box	盒子最终宽度
box-sizing	规定两个并排的带边框的框

鼠标上移添加边框

1
2
3

.item:hover{
	border:10px solid red;
}

对象	定义
item	自定义类
hover	当鼠标移上时候触发

十三、伪类选择器

发表于 2020-09-10 分类于前端

十三、伪类选择器

1.兄弟伪类

主体案例

<body>
   <ul>
     <1i class="first">前端与移动开发</1i>
     <span>能不能变成蓝色</span>
     <1i>java</1i>
     <1i>javascript</1i>
     <li>c++</1i>
     <1i>平面设计</1i>
   </ul>
</body>

1) +：获取当前元素的相邻的满足条件的元素

<head>
    <style>
        .first + li{
            color:blue;
        }
    </style>
</head>

1.必须相邻

2.必须是指定类型的元素

2) ~：获取当前元素的满足条件的兄弟元素

<head>
    <style>
        .first ~ li{
            color:pink;
        }
    </style>
</head>

同级指定类型的元素

2.相对于父元素的结构伪类

1）查找元素;不过滤其它元素

查找E元素的父级元素中的第一个E元素

E:first-child：查找E元素的父级元素中的第一个E元素

下面这句样式查找：li的父元素中的第一个li元素

1.相对于当前指定元素的父元素

2.查找的类型必须是指定的类型

<head>
    <style>
        li:first-child {
            color: red;
        }
    </style>
</head>

查找E元素的父元素中最后一个指定类型的子元素

E：1ast-child：查找E元素的父元素中最后一个指定类型的子元素

li:last-child {
    /* background-color背景色 */
    background-color: skyblue;
}

2）查找指定元素;过滤其他元素

查找的时候限制类型first-of-type

1.也是相对于父元素

2.在查找的时候只会查找满足类型条件的元素，过渡掉其它类型的元素

li:first-of-type {
    color: red;
}

li:last-of-type {
    color: orange;
}

3）指定索引位置

指定索引位置nth-child（从1开始的索引||关键字||表达式）

1
2
3

li:nth-child(5) {
    background-color: lightblue;
}

4）奇偶数

偶数个元素添加背景even：偶数

1
2
3

li:nth-child(even) {
    background-color: orange;
}

奇数个元素添加背景odd：奇数

1
2
3

li:nth-child(odd) {
    background-color: pink;
}

5）指定头尾元素个数

想为前面的5个元素添加样式

n：默认取值范围为e～子元素的长度,但当n=0时选取无效

0>>5 -1>>4 -4>>1 -5>>0

li:nth-of-type(-n+5) {
          font-size: 30px;
      }
      
      li:nth-last-of-type(-n+5) {
          font-size: 30px;
      }

6）空值

空值：没有任何的内容，连空格都没有

1
2
3

li:empty {
    background-color: red;
}

其它伪类

E:target：可以为锚点目标元素添加样式，当目标元素被触发为当前锚链接的目标时，调用此伪类样式

1
2
3

h2:target{
color:red;
}

<li><a href="#title1">标题</a></li>
<h2 id=title1>
    标题
</h2>

十二、属性选择器

发表于 2020-09-10 分类于前端

属性选择器

属性选择器：

属性是相对于标签而言，所谓属性选择器就是你根据指定名称的属性的值来查找元素。

主体

<body>
    <pstyle="">看看能不能也添加样式</p>
        <ol>
            <li class="red" style="">河南再次发生矿难，死伤人数超过100</li>
            <li class="blue">禽流感次发生蔓延，温家宝指示</li>
            <li class="darkred" style="">南方农作物减产绝收面积上亩</li>
            <li class="blue">猪流感在广减产绝收发</li>
            <li class="red">全国多作物减产绝收面积上亩</li>
            <li class="blueviolet">猪流感在广东群体性暴发</li>
        </ol>

</body>

1.E[attr]

1.E[attr]：查找指定的拥有attr属性的E标签。如查找拥有style属性的1i标签

<head>
        <style>
                li[style] {
            text-decoration: underlinel；
        }
        </style>
</head>

2.E[attr=value]

2.E[attr=value]：查找拥有指定的Attr属性并且属性值为value的E标签。如想查找拥有class属性并且值为Red的标签且是严格匹配

<style>
            li[class=red] {
            font-size: 30px;
        }
</style>

3.E[attr*=value]

3.E[attr*=value]：查找拥有指定的attr属性并且属性值中包含（可以在任意位置）value的E标签

<style>
            li[class*=red] {
            font-size: 30px;
        }
</style>

4.E[attr =value]

4.E[attr =value]：查找拥有指定的attr属性并且属性值以value开头的E标签

<style>
        li[class^=blue] {
            font-size: 30px；
        }
</style>

5.E[attr$=value]

5.E[attr$=value]：查找拥有指定的attr属性并且属性值以value开结束的E标签

<style>
        li[class$=blue] {
            font-size: 30px；
        }
</style>