前端知识小总结3-白红宇

前端知识小总结3

阅读量：5128 次

发布时间：2019-06-13

本文共 11740 字，大约阅读时间需要 39 分钟。

二：

1--Position

属性值：static、fixed、absolute、relative

absolute：脱离文档流，原先的位置会被其他元素占据。top、bottom、left、right用来设置元素的绝对位置，都是相对于浏览器窗口进行移动。top和bottom同时存在时，只有top起作用；如果两者都未指定，则其垂直保持原先位置不变，其顶端与原文档流位置一致。left和right同时存在时，只有left起作用；如果两者都未指定，则其水平保持位置不变，其左边将与原文档流位置一致。

relative：依然存在于文档流中，其他元素按原先位置不会抢占其位置。top、bottom、left、right用来设置元素的相对位置，同样相对于元素原先位置进行移动。top和bottom同时存在时，只有top起作用。left和right同时存在时，只有left起作用。

ps：absolute状态下，如果父级元素的position属性值为relative，则上述的相对浏览器窗口定位将会变成相对父对象定位。

2--Float

属性值left/right/none/inherit，布局而非定位

3--如何消除浮动

² 先说浮动的副作用：浮动会使当前标签产生向上浮的效果，同时影响前后标签、父级标签的位置及 width height 属性。背景不能显示/边框不能撑开/margin/padding设置值不能正常显示。

² 清除浮动方法：

使用设置高度样式(给父元素设置高度)，清除浮动产生，前提是对象内容高度要能确定并能计算好.

.div1{background-color: #DDDDDD;border:1px solid red;/*解决代码*/height:200px;}

.div2{background-color: cyan;border:1px solid red;height:100px;margin-top:10px}

.left{float:left;width:20%;height:200px;background-color: blue}

.right{float:right;width:30%;height:80px;background-color: blueviolet}

</style>

<div class="right">Right</div>

</div>

div2

</div>

Ø 结尾处加空div标签清除浮动，应用该样式，缺点产生无意义标签。

.div1{background-color: #DDDDDD;border:1px solid red}

.div2{background-color: cyan;border:1px solid red;height:100px;margin-top:10px}

.left{float:left;width:20%;height:200px;background-color: blueviolet}

.right{float:right;width:30%;height:80px;background-color: chartreuse}

/*清除浮动代码*/
.clearfloat{clear:both}

</style>

<div class="right">Right</div>

</div>

div2

</div>

Ø 父级div定义overflow:hidden或者overflow：auto，可以清除父级内产生的浮动。overflow:hidden让父元素紧贴内容，即可紧贴其对象内容，包括浮动的元素，从而可以清除浮动。

.div1{background-color: #DDDDDD;border:1px solid red;/*解决代码*/width:98%;overflow:hidden}

.div2{background-color: cyan;border:1px solid red;height:100px;margin-top:10px;width:98%}

.left{float:left;width:20%;height:200px;background-color: blueviolet}

.right{float:right;width:30%;height:80px;background-color: antiquewhite}

</style>

<div class="right">Right</div>

</div>

div2

</div>

Ps：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

父级元素定义伪类：after和zoom：

.div1{background-color: cyan;border:1px solid red;}

.div2{background-color: blanchedalmond;border:1px solid red;height:100px;margin-top:10px}

.left{float:left;width:20%;height:200px;background-color: blueviolet}

.right{float:right;width:30%;height:80px;background-color: deeppink}

/*清除浮动代码*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}

.clearfloat{zoom:1}//浏览器兼容

</style>

<div class="right">Right</div>

</div>

div2

</div>

Ps：利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。利用其伪类clear:after在元素内部增加一个类似于div.clear的效果

父元素浮动

父元素绝对定位

4--自适应布局

Css：

Width:calc(100%-100px);

Height:calc(100%-100px)

Absolute、relative

position：top、left、bottom

5--px、em、rem

px单位名称为像素，固定值

em单位名称为相对长度单位，相对值，相对于父元素，若父元素没有设置大小，则相对于默认字体大小。会继承父级元素字体大小。

rem：相对值，相对于HTML根元素

ps：浏览器默认字体高16px，未经调整的浏览器符合：1em=16px；

重写：

1. body选择器中声明Font-size:62.5%；

2. 将你的原来的px数值除以10，然后换上em作为单位；

6--meta

meta标签分两大部分：http-equiv和name变量。

Content为其必需属性，而http-equiv、name、scheme为其可选属性。

使用带有 http-equiv 属性的 <meta> 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。

content 属性始终要和 name 属性或 http-equiv 属性一起使用。

Ps：

7--过渡transition、动画transform、渐变（gradient）、圆角（border-radius）、阴影（text-shadow）、动画（animation）

Transition：让元素从一种样式过渡到另一种样式。需要考虑两点，即希望效果作用在哪个css属性上、效果的时长。

触发方式：hover、active、focus、@media、onclick

eg.过渡效果应用于宽度属性，时长2秒

div{

transition: width 2s;

-moz-transition: width 2s; /* Firefox 4 */

-webkit-transition: width 2s; /* Safari 和 Chrome */

-o-transition: width 2s; /* Opera */ }

div:hover{

width:300px; //开始样式设定为非300px。

}

Ps：若向多个样式添加过渡效果，可以通过添加多个属性实现，属性间用逗号隔开。若对一个属性进行应用效果，则属性值间直接用空格隔开。

div{

transition: width 2s, height 2s, transform 2s;

-moz-transition: width 2s, height 2s, -moz-transform 2s;

-webkit-transition: width 2s, height 2s, -webkit-transform 2s;

-o-transition: width 2s, height 2s,-o-transform 2s; }

div{

transition-property: width;

transition-duration: 1s;

transition-timing-function: linear;

transition-delay: 2s;

-moz-transition-property:width; /* Firefox 4 */

-moz-transition-duration:1s;

-moz-transition-timing-function:linear;

-moz-transition-delay:2s;

-webkit-transition-property:width; /* Safari 和 Chrome */

-webkit-transition-duration:1s;

-webkit-transition-timing-function:linear;

-webkit-transition-delay:2s;

-o-transition-property:width; /* Opera */

-o-transition-duration:1s;

-o-transition-timing-function:linear;

-o-transition-delay:2s; } 等价于

div{

transition: width 1s linear 2s;

-moz-transition:width 1s linear 2s; /* Firefox 4 */

-webkit-transition:width 1s linear 2s; /* Safari and Chrome */

-o-transition:width 1s linear 2s;} /* Opera */

transform：transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转(rotate)、缩放(scale)、移动(translate)或倾斜(skew)。

translate（x,y）定义2D转换 translate3d(x,y,z)定义3D转换

translateX(x) 定义转换，只是用X轴的值

translateY(y) 定义转换，只是用Y轴的值

translateZ(z) 定义转换，只是用Z轴的值

2D转换：使元素改变形状、尺寸和位置的一种效果，其方法有：translate()、rotate()、scale()、skew()、matrix()、

translate()方法，元素从其当前位置根据x、y坐标进行移动

div{

transform: translate(50px,60px);

-ms-transform: translate(50px,60px); /* IE 9 */

-webkit-transform: translate(50px,60px); /* Safari and Chrome */

-o-transform: translate(50px,60px); /* Opera */

-moz-transform: translate(50px,60px); /* Firefox */

}

rotate()方法，元素根据指定的角度按顺时针方向进行旋转，若给定角度为负数，则按逆时针方向旋转

div{

transform: rotate(60deg);

-ms-transform: rotate(60deg); /* IE 9 */

-webkit-transform: rotate(60deg); /* Safari and Chrome */

-o-transform: rotate(60deg); /* Opera */

-moz-transform: rotate(60deg); /* Firefox */

}

scale()方法，元素大小根据缩放参数增加或减小

div{

transform: scale(2,3);//2表示宽度为原的2倍，高度为原3倍

-ms-transform: scale(2,3); /* IE 9 */

-webkit-transform: scale(2,3); /* Safari 和 Chrome */

-o-transform: scale(2,3); /* Opera */

-moz-transform: scale(2,3); /* Firefox */

}

skew()方法，元素根据翻转角度进行放置

div{

transform: skew(10deg,20deg);//把元素沿x轴翻转10度，y轴翻转20度

-ms-transform: skew(10deg,20deg); /* IE 9 */

-webkit-transform: skew(10deg,20deg); /* Safari and Chrome */

-o-transform: skew(10deg,20deg); /* Opera */

-moz-transform: skew(10deg,20deg); /* Firefox */

}

matrix（）方法，把所有2D转换方法组合在一起，需要6个参数

3D转换：使元素改变形状、尺寸和位置的一种效果，其方法有：rotateX()、rotateY()

rotateX()方法，元素围绕x轴以给定的角度进行旋转

div{

transform: rotateX(120deg);

-webkit-transform: rotateX(120deg); /* Safari 和 Chrome */

-moz-transform: rotateX(120deg); /* Firefox */

}

rotateY()方法，元素围绕y轴以给定度数进行旋转

div{

transform: rotateX(120deg);

-webkit-transform: rotateX(120deg); /* Safari 和 Chrome */

-moz-transform: rotateX(120deg); /* Firefox */

}

渐变（gradient）、

  Mozilla内核下的线性/径向渐变：

-moz-linear-gradient(top,#ccc,#000)；其中，第一个参数表示线性渐变的方向，top是从上到下，left是从左到右，left top则是从左上角到右下角的方向；第二个与第三个参数分别是起点颜色和终点颜色，中间可以插入多种颜色表示多种颜色的渐变。（firefox）。

background: -moz-radial-gradient(#ccc,#000,blue);

background: -moz-radial-gradient(#ccc 5%,#000 25%,blue 50%);

.example{

width:160px;

height: 80px;

}

.e1{

background: -moz-linear-gradient(top,#ccc,#000);

/*该效果只在Mozilla内核下才能正常显示，即firefox浏览器可运行*/ }

</style>

Webkit内核下的线性/径向渐变：-webkit-linear-gradient(top,#ccc,#000)；其中，

-webkit-gradient(linear,left top，left bottom，from(#ccc), to(#000));其中，第一个参数表示渐变类型，linear或radial供选择；第二个参数和第三个参数，都是一对值，分别表示渐变起点和终点；第四个和第五个参数分别是color-stop函数，第一个表示渐变的位置，0为起点，0.5为中点，1为结束点，第二个表示该点的颜色。（chrome或Safari）。background: -webkit-radial-gradient(red,#ccc,#000);

background: -webkit-radial-gradient(red 5%,#ccc 25%,#000 50%);

.e1{

width:160px;

height: 80px;

/* background: -webkit-gradient(linear,0 0,100 100,from(#ccc), to(#000));*/
background: -webkit-linear-gradient(top,#ccc,#000); }

</style>

Opera下的线性渐变：-o-linear-gradient（top，#ccc，#000）；第一个参数表示线性渐变的方向，top从上到下，left从左到右，left top从左上角到右下角；第二个参数和第三个参数分别是起点颜色和终点颜色，中间可以插入多种颜色。

.e1{

width:160px;

height: 80px;

border:1px solid red;

background: -o-linear-gradient(left,#ccc,#000);

/*Opera44不支持gradient？？？？*/

}

</style>

Trident（IE）下的渐变：IE依靠滤镜实现渐变。filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=”#000”,endColorstr=”#000”);

圆角（border-radius）：用于设置圆角边框，可以选择px、em或者%

.div1{

width:100px;

height:200px;

border-radius: 50px;

background-color: orangered;

}

</style>

border-radius:300px；

border-radius: 300px 300px 300px 300px/300px 300px 300px 300px;

border-radius: 左上角水平圆角半径大小右上角水平圆角半径大小右下角水平圆角半径大小左下角水平圆角半径大小/左上角垂直圆角半径大小右上角垂直圆角半径大小右下角垂直圆角半径大小左下角垂直圆角半径大小;

阴影（text-shadow、 box-shadow）：text-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果。

box-shadow属性向框中添加一个或多个阴影。其参数为：h-shadow（必需u，水平阴影的位置）、v-shadow（必需，垂直阴影的位置）、blur（可选，模糊距离）、spread（可选，阴影的尺寸）、color（可选，阴影的颜色）、inset（可选，将外部阴影改为内部阴影）

ps：非零值的border-radius会以相同的作用影响阴影的外形。

.demo1{

width:100px;

height:100px;

background-color:blanchedalmond;

    /*     box-shadow:-2px 0 15px green,0 -2px 5px blue,0 2px 5px red,2px 0 5px yellow;*/
         /* box-shadow:0 0 0 1px red;*/
            box-shadow:inset 0 0 6px red;

}

</style>

text-shadow：向文本设置阴影，其属性值有h-shadow（必需，水平阴影的位置）、v-shadow（必需，垂直阴影的位置）、blur（可选，模糊的距离）、color（可选，阴影的颜色） text-shadow: x偏移 y偏移 blur color；blur指模糊半径。

.p1{

text-shadow:20px 20px 2px red;

}

</style>

<div class="p1"><p>一切如愿一切顺利</p></div>

动画（animation）：其参数有：name（指定要绑定到选择器的关键帧的名称）、duration（动画指定需要多少秒或毫秒完成）、timing-function（设置动画将如果完成一个周期）、delay（设置动画在启动前的延迟间隔）、iteration-count（定义动画的播放次数）、direction（指定是否应该轮流反向播放动画）、fill-mode（规定动画不播放时要应用到元素的样式）、play-state（指定动画是否正在运行或已暂停）

animation通过keyframes属性实现动画效果，命名由@keyframes开头，后面紧跟动画的名称，加{}，{}中为一些不同时间段的样式规则，以%为单位。其中动画的名称与animation中的关键帧的名称要一致！样式规则由多个百分比构成，分别给每一个百分比中需要有动画效果的元素添加不同的属性，从而达到一种不断变化的效果，如移动、改变元素颜色、位置、大小、形状等。可以使用“from”、“to”表示一个动画从哪开始到哪结束。

Ps：animation-timing-function为控制时间的属性，其值有linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n)、steps（）。

animation默认以ease方式过渡，它会在每个关键帧之间插入补间动画，因此动画效果是连贯性的。linear、cubic-bezier的过渡函数也会为其插入补间。如果遇到不需要补间的效果，只需要关键帧间的跳跃可选择steps过渡方式。

linear实现的是线性变化，即从一个状态过渡到另一个状态；而steps没有过渡效果，而是一帧帧的变化。steps函数指定了一个阶跃函数，第一个参数表示时间函数中的间隔数量num，第二个参数可选，start和end指示在每个间隔的起点或终点发生阶跃变化，默认为end。step-start等同于steps（1，start），动画分成1步，动画执行时为开始左侧端点的部分为开始；step-end等同于steps（1，end），动画分成一步，动画执行时以结尾端点开始。num指示每两个关键帧间的变化次数，即类似0%到25%间变化5次，而不是整个动画。Step-start在变化过程中，以下一帧的显示效果来填充间隔动画；step-end以上一帧的显示效果来填充动画。

（）

@keyframes name{

From {

Properties:Properties value;

}

Percentage {

Properties:Properties value;

}

to {

Properties:Properties value;

}

或者