前端知识小总结3

二:

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设置值不能正常显示。

²  清除浮动方法:

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

<style type="text/css">
    .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="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<div class="div2">
    div2
</div>

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

<style type="text/css">
    .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="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="clearfloat"></div>
</div>
<div class="div2">
    div2
</div>

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

<style type="text/css">
        .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="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<div class="div2">
    div2
</div>

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

  • 父级元素定义伪类:after和zoom:

<style type="text/css">
    .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="div1 clearfloat">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<div class="div2">
    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> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。<meta> 标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

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

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

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

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

<meta http-equiv="Content-Type"
content="text/html; charset=gb2312">

Ps:https://zhidao.baidu.com/question/2052283721385566387.html

http://www.w3school.com.cn/tags/tag_meta.asp#meta_prop_content

http://www.cnblogs.com/esshs/articles/157588.html

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%);
 

<style type="text/css">
       .example{
           width:160px;
           height: 80px;
       }
      .e1{
          background: -moz-linear-gradient(top,#ccc,#000);
          /*该效果只在Mozilla内核下才能正常显示,即firefox浏览器可运行*/      }
    </style>
<div class="example e1"></div>

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%);
 

<style type="text/css">
        .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>
<div class="e1"></div>

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

<style type="text/css">
        .e1{
            width:160px;
            height: 80px;
            border:1px solid red;
            background: -o-linear-gradient(left,#ccc,#000);

/*Opera44不支持gradient????*/
        }
    </style>
<div class="e1"></div>

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

圆角(border-radius):用于设置圆角边框,可以选择px、em或者%

<style type="text/css">
       .div1{
           width:100px;
           height:200px;
           border-radius: 50px;
           background-color: orangered;
       }
    </style>
<div class="div1"></div>

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会以相同的作用影响阴影的外形。

<style type="text/css">
        .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>
<div class="demo1"></div>

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

<style type="text/css">
        .p1{
            text-shadow:20px 20px 2px red;
        }
    </style>
<div class="p1"><p>一切如愿一切顺利</p></div>

动画(animation):

未完待续。。。

时间: 2024-10-07 18:11:30

前端知识小总结3的相关文章

前端知识小总结5

1--css实现水平垂直居中 <style type="text/css"> .box { width: 300px; height: 300px; background: #111; display: flex; align-items: center; /* 垂直居中 */ justify-content: center; /* 水平居中 */ } .box .con { width: 100px; height: 100px; background-color: #f

web前端知识小笔记(二)

1.if条件语句相关 对于 if 语句括号里的表达式,ECMAScript 会自动调用 Boolean()转型函数将这个表达式的结果转换成一个布尔值.如果值为 true,执行后面的一条语句,否则不执行. 2.arguments相关 通过arguments 对象的length属性,来智能的判断有多少参数,然后把参数进行合理的应用 . 比如,要实现一个加法运算,将所有传进来的数字累加,而数字的个数又不确定. function box() { var sum = 0; if (arguments.le

前端知识:12个非常实用的JavaScript小技巧

在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值,如果存在就返回true值.为了做这样的验证,我们可以使用!!操作符来实现是非常的方便与简单.对于变量可以使用!!variable做检测,只要变量的值为:0.null." ".undefined或者NaN都将返回的是false,反之返回的是true.比如下面的示例: func

web前端体系-了解前端,深入前端,架构前端,再看前端。大体系-知识-小细节

1.了解前端,深入前端,架构前端,再看前端.大体系-知识-小细节 个人认为:前端发展最终的导向是前端工程化,智能化,模块化,组件化,层次化. 2.面试第一关:理论知识. 2-1.http标准 2-2.w3c标准 2-3.ECMAScript标准 3.框架和类库 4.编码开发 5.运行环境 6.自我修养. 6-1.前端开发思维.敏捷软件开发流程(如SCRUM)和项目管理知识(如考取PMP). 6-2.个人github和技术博客.建立开源项目等总结经验和反思感想. 6-3.研究学习Web相关最新知识

Web 前端知识体系精简

Web前端技术由html.css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学者很难理清楚整个体系的脉络结构.本文将对Web前端知识体系进行简单的梳理,对应的每个知识点点到为止,不作详细介绍.目的是帮助大家审查自己的知识结构是否完善,如有遗漏或不正确的地方,希望共勉. JAVASCRIPT 篇 0.基础语法 Javascript基础语法包括:变量定义.数据类

前端知识学习步骤

著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:龚一峰链接:https://www.zhihu.com/question/19862294/answer/44311692来源:知乎 css 编写规范 http://cssguidelin.es/ 前端性能优化的24种方法 http://browserdiet.com/en/ 学习js正确的方法 JS: The Right Way 很有趣的js编程教材(才出的) Eloquent JavaScript 设计师写的js入门教

Web前端知识体系精简

Web前端技术由html.css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学者很难理清楚整个体系的脉络结构.本文将对Web前端知识体系进行简单的梳理,对应的每个知识点点到为止,不作详细介绍.目的是帮助大家审查自己的知识结构是否完善,如有遗漏或不正确的地方,希望共勉. JAVASCRIPT 篇 0.基础语法 Javascript基础语法包括:变量定义.数据类

前端知识体系2

Raw Blame History 1226 lines (983 sloc) 67.4 KB QQ联盟群交流(492107297)群规 GITHUB在线地址 http://t.cn/RL2NtqX 看云在线地址 http://t.cn/RUdaGHn 这是我们联盟群的组织结构,加入等级参考JS高级前端开发群加群说明. 这本来是我QQ群内部的一份公共约定的日常交流规则,后来得到大伙的一致认可,并用实际行动来捍卫它,使我倍受感动. 后来想:传播使爱更有力量,阅读使内心更为坚强,沉淀使生活更为醇香,

向着全栈工程师前进!Web前端知识体系精简

Web前端技术由html.CSS和JavaScript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学者很难理清楚整个体系的脉络结构.本文将对Web前端知识体系进行简单的梳理,对应的每个知识点点到为止,不作详细介绍.目的是帮助大家审查自己的知识结构是否完善,如有遗漏或不正确的地方,希望共勉. JAVASCRIPT 篇 重点:爱创课堂8月份web前端培训课程就要开课: 特针对零基础开