css的知识点归纳与总结

前言

    css是页面的化妆师，也是每个前端必须要掌握的基础，在工作中也常常因为频于业务，而不能很好的去沉淀技术，本文主要是作者业余学习记录下来的笔记,主要记录了css常用一些的基础，以及css高级应用，例如精灵图，字体图标等，还有css3新特性,主要是新增的属性选择器、结构伪类选择器、伪元素选择器，过渡，2d/3d转换(动画)等，还有些规范建议，HTML5新特性等，方便查缺补漏。

基础

字体设置

• 各种字体之间必须使用英文状态下的逗号隔开。
• 现在网页中普遍使用14px+
• 中文字体需要加英文状态下的引号,英文字体一般不需要加引号。当需要设置英文字体时,英文字体名必须位于中文字体名之前。
• 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-fanily:'Times new Roman';
• 尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示
• 尽量不用中文,有兼容问题,最好用对应的英文或者unicode编码。

* {
   font-family: "Microsoft  YaHei",tahoma,arial,"Hiragino Sans GB"
 }

字体粗细

 span {
    font-weight:400;
 }

tips：数字400 => normal(不加粗) ,而700 => bold(加粗),推荐使用数字

font 综合设置

 span  {
   font: font-style font-weight font-size/line-height font-family
 }

tips: 要写全要按以上顺序书写,可省略，但必须保留font-size和font-family,否则font属性不起作用

选择器

• id
• class
• 行内
• 标签
• 通配符选择器 *
• 链接伪类选择器
  • :link 未访问的链接
  • :visited 已访问的链接我们已经点击过一次的状态
  • :hover 鼠标移动到链接上
  • :active 选定的链接 当我们点击别松开鼠标显示的状态
• 结构伪类选择器(css3新特性)
  • :first-child 选取属于父元素的首个子元素的指定选择器。
  • :last-child 选择属于其父元素的最后一个子元素的指定选择器
  • :nth-child(n) 匹配属于其父元素的第N个子元素，不论元素的类型 even 偶数 odd 奇数,如果用公式n从0开始 (从上往下数)
  • :nth-last-child(n) 选择器匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数，n 可以是数字、关键词或公式(从下往上数)

<ul>
  <li>第一个孩子li>
  <li>第二个孩子li>
  <li>第三个孩子li>
  <li>第四个孩子li>
  <li>第五个孩子li>
  <li>第六个孩子li>
  <li>第七个孩子li>
 <ul> 

/*li是ul的孩子，后面对应选择第几个孩子*/

 // even => 2n  偶数 2、4、 6 
 li:nth-child(even) {
     color:red
 }
 // odd => 2n+1/2n-1 奇数 1、3、5、7 
 li:nth-child(odd) {
     color:red
 }

• :target
  目标伪类选择器：选择器可用于选取当前活动的目标元素

 :target {
   color: red;
   font-size:3
 } 

tips：link visited hover active 顺序不要改变，按照lvha的顺序。可简单写,只写一个hover。

css复合选择器

• 交集选择器
  既属于p又属于red

 p.red{
  font-size:    20px;
 }

 <p class='red'>111p>
 <p >222p>

• 并集选择器
  只要选择器都会执行后面样式

div,
p,
span {
color:blue;
font-size:18px
}

• 后台选择器

子孙后代都可以选择，用空格隔开

div p {
 color:pink;
}

  <p>211p>
<div>
  <p>
  111
  p>
div>

• 子元素选择器
  只选择亲儿子

div > p {
 color:pink;
}

• 属性选择器(css3)

 /*包含title这个属性*/
 
 a[title] {
  color:red;   
 }
 
 /*包含的属性等于*/
 
 input[type='text'] {
      color:red;
 } 
 

 <a href='#'
 title='测试1'>测试1a>
 
 <input
 type="text"
 >input>

首行缩进

p {
   text-indent:2em
}

tips:1em就是一个字的宽度 如果是汉字的段落，1em 就是一个汉字的宽度。

字间距和单词间距

 div {
    letter-spacing:2px; /* 字间距*/ 
  }
  
  p {
   word-spacing:10px; /*单词间距*/
 }

颜色半透明(css3)

/*参数: r、g、b、a*/
 color:rgba(0,0,0,0.3)

文字阴影(css3)

/*水平位置 垂直位置 
模糊距离
阴影颜色
*/

h1 {
 text-shadow:1px 2px 3px rgba(0,0,0,0.3);
}

块级元素

• 每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性、常用于网页布局和网页结构的搭建

• 块级元素的特点:

  • 总是从新行开始
  • 高度、行高、外边距以及内边距都可以控制。
  • 宽度默认是容器的100%
  • 可以容纳内联元素和其他块元素

• 常见的块元素有:
  

  ~

  、

  、

  、

  、
  、

  行内元素

  • 行内元素(内联元素)不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度，高度，对齐等属性，常用于控制页面中文本的样式。

  • 常见的行内元素有:
    、、、、、、、、、

  • 行内元素的特点

    • 和相邻行元素在一行上。
    • 高、宽无效，但水平方向的padding和margin可以设 置，垂直方向的无效。
    • 默认宽度就是它本身内容的宽度。
    • 行内元素只能容纳文本或者其他行内元素。(a特殊)

  行内块元素(特殊的行内元素)

  • 在行内元素中有几个特殊的标签 、、 ,可以对他们设置宽高和对齐属性，有些资料可能会称它们为行内块元素

  • 行内块元素的特点：

    • 和相邻行内元素(行内块)在一行上，但是之间会有空白缝。
    • 默认宽度就是它本身内部的宽度。
    • 高度、行高、外边距以及内边距都可以控制。

  显示模式转换

  • 块级标签转为行内标签模式

   div  {
      display:inline;  
    }
  

  • 行内标签模式转为块级模式

   span {
     display:block; 
   }
  

  • 行内标签模式转为行内块模式

    a {
        display:inline-block;  
    } 
  

  单行文字垂直居中

  原理: 行高的上空隙和下空隙把文字挤到中间了,是如果行高小于盒子高度，文字会偏上，如果行高小于盒子高度，则文字偏下，上下空隙和和平均分布

  //盒子高度40px
  p {
     line-height:40px 
  }
  

  背景图片

  • 背景各个属性的应用

  img {
  
     //引入
     background-image:url(images/icon.png);
     //不平铺
     background-repeat:no-repeat;
     /*方位 x、y   x是left/right，自动转换，top/bottom  不论顺序,自动转换，可省略一个，那么另一个就是center */
     
     //background-position:left center
     
     /*还可以是精确位置 如果写了精确位置,那么第一个一定是x，第二个一定是y*/
     
     //background-position:20px 20px
     
    /*还可以是混合，如果写了混合位置,那么第一个一定是x，第二个一定是 y*/
     background-position:20px center
   
    /*参数 scroll(滚动，默认)和fixed(固定)*/
     background-attachment:fixed //背景图像固定
    
  }
  

  • 背景的简写

  background:背景颜色,背景图片地址,背景平铺 背景图像滚动,背景图片位置。

  
  body {
   background:black url(images/bg.jpg) no-repeat fixed center top;    
  }
   
  

  tips:以上没有特定的顺序，只是按这习惯写

  • 背景的半透明

  img {
    background:rgba(0,0,0,0.3) 后面必须4个值
  }
  

  css的三大特性

  • 层叠性

   p {
       color:red;
   }
   
    
   p {
       color:blue;
   }
   //最后p是blue颜色 后面的颜色覆盖前面的颜色
  

  • 继承性

  子元素可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承，以及color属性)和文字相关的才会继承

  /* /1.5 那么行高就是12*1.5*/
   body {
   font:12px/1.5   
   }
  
  div {
   /*子元素继承了父元素body的行高1.5*/
   /*这个1.5就是当前元素文字大小font-size的1.5倍 所以当前的div的行高就是21元素*/
     font-size:14px;
  }
  
  

   <body>
     <div>div>
   body>
  

  • 优先级

  选择器	选择器权重
  继承 或者*	0,0,0,0
  元素选择器	0,0,0,1
  类选择器，伪类选择器	0,0,1,0
  ID选择器	0,1,0,0
  行内样式style=""	1,0,0,0
  !important 重要的	无穷大

  tips:

  1. 权重是由4组数字组成，但是不会有进位。
  2. 可以理解为类选择器永远大于元素选择器,id选择器永远大于类选择器，依次类推。
  3. 等级判断从左到右，如果某一位数值相同，则判断下一位数值。
  4. 可以简单记忆法：通配符合继承权重为0，标签选择器为1，类(伪类)选择器为10，id选择器100，行内样式表为1000，!important 无穷大
  5. 继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0

  • 权重叠加

  复合选择器会有权重叠加的问题，但注意不会有进位

  • div ul li ----> 0,0,0,3
  • .nav ul li ----> 0,0,1,2
  • a:hover ----> 0,0,1,1
  • .nav a ----> 0,0,1,1

  盒子模型

  • 边框

  边框会影响盒子的实际大小我们有两种方案解决:

  1. 测量盒子大小的时候，不量边框。
  2. 如果测量的时候包含了边框，则需要width/height 减去边框宽度

  • padding

  /*三个 第一个是上 中间是左右 最后一个是右*/
  div {
      padding:10px 20px 30px
  }
  

  padding 会影响盒子的实际大小
  ，因此我们有以下方案解决:
  如果测量的时候包含了边框，则需要width/height 减去边框宽度

  • margin
    margin的典型应用，应用于块级盒子水平居中对齐

  
  div{
      //必须有个宽度
      width:900px;
      height:200px;
      background-color:red;
      //上下没有边距 左右设置auto
      margin:0 auto;
  }
  

  • 嵌套块元素坍塌
    当盒子里嵌套着盒子的时候，在里外盒子都设置margin，会使得边距合并，使得父盒子一起移动了,里面的间距看不到了;

   解决方案：
   1.可以为父元素定义边框(会增大盒子)；
   2.可以为父元素定义内边距(会增大盒子);
   3.可以为父元素添加overflow:hidden。(推荐，不增大盒子)
   4.浮动、固定、绝对定位的盒子不会有塌陷问题
  

  • 清除内外边距

  不同浏览器的不同元素、标签的内外间距都不同，可以使用以下方法来清空，解决问题。

   * {
      padding:0;
      margin:0;
    }
  

  tips:

  1. padding有个特殊情况 如果没指定宽度或高度padding不会撑大盒子的宽或高,孩子如果没有指定宽度或高度，父亲有宽度或高度，孩子设置了padding也不会撑开盒子,注意以上水平居中方法只属于块级使用方法，
  2. 要让行内元素和行内块元素水平居中可以使用在行内元素和行内块元素的父级添加text-align:center

  3. 行内元素为了照顾兼容性，尽量只设置左右内外边距，上下设置了也不起作用，但是转换为块级和行内块元素就可以了。

  圆角边框(css3)

  • 原理: radius 半径(圆的半径)原理:(椭)圆与边框的交集形成圆角效果

    div {
      border-radius:20px;
    }
  

  • 正方形变圆

    
    div {
        width:200px;
        height:200px;
        border-radius:50%;
        /*或者把数值改成高度或宽度的一半*/
        //border-radius:100px;
    }
  

  • 矩形变圆

    div {
        width:200px;
        height:100px;
        /*如果是个矩形，设置为高度的一半*/
        border-radius:50px;
    }
  

  tips: border-radius后面参数值简写，分别代表左上，右上，右下，左下。

  盒子阴影(css3)

   div {
        width:200px;
        height:200px;
        box-shadow:10px 10px 
   }
  

  • 6个参数值(从左到右)

  值	描述
  h-shadow	必需。水平阴影的位置。允许负值。
  v-shadow	必需。垂直阴影的位置，允许负值。
  blur	可选。模糊距离。
  spread	可选。阴影的尺寸。
  color	可选。阴影的颜色。请参阅css颜色值。可也用rgba
  inset	可选。将外部阴影(outset)改为内部阴影。

  tips:

  1. 默认的是外阴影(outset),但是不可以写这个单词，否则导致阴影无效。
  2. 盒子阴影不占用空间，不会影响其他盒子排列。

  文字阴影(css3)

   span {
        font-size:50px;
        color:red;
        font-weight:700;
        text-shadow:10px 10px;
   }
  
  

  • 4个参数值(从左到右)

  值	描述
  h-shadow	必需。水平阴影的位置。允许负值。
  v-shadow	必需。垂直阴影的位置，允许负值。
  blur	可选。模糊距离。
  color	可选。阴影的颜色。请参阅css颜色值。可也用rgba

  浮动

  • 浮动语法

   div {
     float:left //或者right
   }
  

  • 设置了浮动的元素的最重要特性:

    • 脱离标准普通流的控制(浮) 移动到指定位置(动),(俗称脱标/脱离文档流)
    • 浮动的盒子不再保留原先的位置
    • 无论任何属性的标签都会变成具有行内块元素的特性
    • 设置浮动后就不继承了父类的宽度，根据内容来决定的
    • 浮动的盒子中间是没有缝隙的，是紧挨在一起的
    • 浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流
    • 一个盒子里面有多个盒子，如果其中一个盒子浮动了，那么其他的兄弟也应该浮动起来，以防止引起问题。
    • 浮动的元素不会压住下面标准流盒子内的文字，但会压住下面的盒子，浮动产生的目的最初是为了做文字环绕效果的

  • 清除浮动

  由于父级盒子很多情况下，不方便给高度，但是子盒子浮动，脱离文档流又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子，所以需要清除浮动。

   /*1.额外标签法,也称为隔墙法，找到浮动的最后一个元素后再加个标签,必须是块级元素标签*/
    .clear {
      clear:both; 
    }
    
   /*2.可以给父级添加overflow,缺点,无法显示溢出的部分*/
   .box{
      overflow:hidden;
   }
   
   /*3.可以给父级添加:after*/
   .clearfix:after {
      //伪元素必须写的属性
      content:'';
      //插入的元素必须是块级，伪元素是行内
      display:block;
      //不要看见这个元素
      height:0;
      //核心代码清除浮动
      clear:both;
      //不要看见这个元素
      visibility:hidden;
   }
   
   /*4.双伪元素清除浮动*/
   .clearfix:before,
   .clearfix:after 
   {
     content:'';
     display:table;//转换为块级，并在同一行上显示
   }
   
   .clearfix:after {
       clear:both;
   }
   
  

   <div class='box clearfix'>
     <div class='item1'>item1div>
     <div class='item2'>item2div>
     <div class='clear'>item2div>
   <div>
  

  tips:

  1. 浮动元素经常和标准流进行搭配使用，用标准流排列上下位置，之后内部元素采取浮动排列左右位置，符合网页布局第一准则。
  2. 需要清除浮动的原因:父级没高度；子盒子浮动了；影响下面布局，我们就应该清除浮动了。

  ps切图

  • 图层切图
    右击图层->快速导出png

  tips:遇到要导出多个图层的情况下，要合并图层再转为png。

  • 切片工具
    文件菜单->导出->存储为web所用格式->选择我们要的图片格式->存储。

  • ps插件切图
    cutterman是一款运行在photoshop中的插件，安装并使用它能更好的切图

  tips:

  1. cutterman插件要求你的ps必须是完整版，不能是绿色版，所以大家需要安装完整版本,如何判断:看 窗口菜单的扩展功能，如果不是灰色的，可以使用，就是完整版的。
  2. 点击进入cutterman官网

  定位

  • 相对定位是元素在移动位置的时候，是相对于它原来的位置来说的，它的特点:
    • 它是相对于自已原来的位置来移动的(移动位置的时候参照点是自己原来的位置)
    • 原来在标准流的位置继续占用,后面的盒子仍然以标准流的方式对待它。(不脱标，继续保留原来位置)因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。

   div {
      position:relative;  
      
   }
  

  • 绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的,它的特点:

    • 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位
    • 如果祖先元素有定位(相对、绝对、固定定位)，则以最近一级的有定位祖先元素为参考点移动位置。
    • 绝对定位不再占有原先的位置(脱标)

   div {
      position:absolute;  
      
   }
  

  • 子绝父相:子级是绝对定位的话，父级要用相对定位。

    • 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
    • 父盒子需要加定位限制子盒子在父盒子内显示。
    • 父盒子布局时，需要占有位置，因此父亲只能是相对定位。

  tips:因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位。

  
   .father{
       positon:relative;
   }
   
   .child {
      position:absolute;  
   }
   
  

  • 固定定位:fixed(重要)
    固定定位是元素固定于浏览器可视区的位置，主要使用场景:可以在浏览器页面滚动时元素的位置不会改变。

    div {
      positon:fixed; 
    }
    
  

  固定定位的特点:

  1. 以浏览器的可视窗口为参照点移动元素。
  2. 跟父元素没有任何关系。
  3. 不随滚动条滚动。
  4. 固定定位不在占有原先的位置(脱离文档流)。

  • 粘性定位:可以被认为是相对定位和固定定位的混合。sticky粘性的语法:

    div {
      position:sticky;
      /*当前元素的可视区和滚动条齐平的时候,使用粘性定位*/
      top:0;
    }
  

  tips: 粘性定位的特点:

  1. 以浏览器的可视窗口为参照点移动元素(固定定位特点)
  2. 粘性定位占有原先的位置(相对定位特点)
  3. 必须添加top、left、right、bottom其中一个才有效。
  4. 跟页面滚动搭配使用，但兼容性差，IE不支持。

  • 绝对定位的垂直水平居中

  
   div {
     position:absolute;
     /*让盒子的左侧移动到父级元素的水平中心位置*/
     left:50%;
     top:50%;
     margin-left:-100px;/*让盒子向左移动自身宽度的一半*/
     margin-top:-100px;/*让盒子向上移动自身高度的一半*/
     width:200px;
     height:200px;
     background-color:black;
   }
  

  定位的特殊特性

  1. 行内元素添加绝对或者固定定位,可以直接设置高度或宽度。
  2. 块级元素添加绝对或者固定定位，如果不给宽度和高度，默认大小是内容的大小
  3. 浮动元素、绝对定位(固定定位)元素的都不会触发外边距合并的问题。
  4. 绝对定位(固定定位)会压住下面标准流所有的内容。
  5. 脱离文档流后，margin就无效了。

  定位叠放次序

  在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序(z轴)

   div {
      z-index:1;
   }
  

  1. 数值可以是正整数、负整数或0，默认是auto,数值越大，盒子越靠上
  2. 如果属性值相同，则按照书写顺序，后来居上
  3. 数字后面不能加单位
  4. 只有定位的盒子才有z-index属性

  显示隐藏元素

  • display 显示隐藏

   div {
      display:none;//隐藏对象
     //display:block;//显示对象
   }
  

  tips: display隐藏元素后，不再占有原来的位置。

  • visibility 属性用于指定一个元素应可见还是隐藏

   div {
        visibility:visible; //元素可视
       //visibility:hidden; //元素隐藏
   }
  

  tips: visibility隐藏元素后，继续占有原来的位置

  • overflow

   div {
       overflow:hidden; //元素隐藏
   }
  

  overflow

  属性值	描述
  visible	不剪切内容也不添加滚动条
  hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
  scroll	不管超出内容否，总是显示滚动条
  auto	超出自动显示滚动条，不超出不显示滚动条

  tips: 一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
  但是如果有定位的盒子，请慎用overflow:hidden 因为它会隐藏多余的部分。

  高级应用

  精灵图(雪碧图)

  • 精灵图主要是为了有效减少服务器接收和发送请求的次数，提高页面的加载速度，而出现了css精灵技术(也称css Sprites、css雪碧)

  • 精灵图特点:

    • 精灵图主要针对于小的背景图片使用。
    • 主要借助于背景位置来实现background-position。
    • 一般情况下精灵图都是负值。(千万注意网页中的坐标：x轴右边走是正值，左边是负值，y轴同理。)

   .box1 {
     width: 60px;
     height: 60px;
     margin: 100px auto;
     background: url(images/sprites.png) no-repeat -100px 0;
   }
   
    .box2 {
     width: 20px;
     height: 20px;
     margin: 200px;
     background: url(images/sprites.png) no-repeat -150px -106px;
   }
  

  • 精灵图缺点:
    • 图片文件还是比较大。
    • 图片本身放大和缩小会失真。
    • 一旦图片制作完毕想要更换非常复杂

  tips:背景图片默认是左上角对齐

  字体图标

  字体图标的出现，主要解决了精灵图的以上问题。可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体

  • 字体图标的优点:

    1. 轻量级:一个图标字体要比一系列的图像要小，一旦字体加载了，图标就会马上渲染出来，减少了服务器请求。
    2. 灵活性：本质其实是文字,可以很随意的改变颜色、产生隐影、透明效果、旋转等
    3. 兼容性：几乎支持所有的浏览器
  

  • 字体图标下载地址

    • icomoon字库 下载地址
    • 阿里iconfont字库(推荐) 下载地址

  • 字体图标的使用

   //字体声明 
   @font-face {
     //1. 把下载得到的fonts放到我们项目中。
     //2. 打开下载得到的style.css,复制@font-face这一段。
   }
   
   //使用
   span {
       font-family:'icomoon';
       color:black;
       font-size:12px;
   }
  

  • 追加字体图标

  把下载的压缩包里的selection.json从新上传

  tips: 字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。

  1. 如果遇到一些结构和样式比较简单的小图标，就用字体图标。
  2. 如果遇到一些结构和样式复杂一点的小图片，就用精灵图。

  css 三角

  • 网页中常见一些三角型，使用css直接画出来就可以，不必做成图片或者字体图标。

   div {
    width:0;
    height:0;
    line-height:0;
    font-size:0;
    border:50px solid transparent;
    border-left-color:red;
   }
  
  

  • css 三角巧妙运用

  做出直接三角形

   div {
      width:0;
      height:0;
      /*1.只保留右边的边框有颜色*/
      border-color:transparent red transparent transparent;
      /*2.样式都是solid*/
      border-style:solid;
      /*3.上边框宽度要大,右边框宽度稍小，其余的边框为0*/
      border-width:100px 50px 0 0;
     /*border-width=>border-top、border-right、border-bottom、border-left*/
   }
  

  用户界面

  • 鼠标样式

    <ul>
     <li style='cursor:default'>我是默认的小白鼠标样式li>
     
     <li style='cursor:pointer'>我是鼠标小手样式li>    
      
     <li style='cursor:move'>我是鼠标移动样式li>    
     
     <li style='cursor:text'>我是鼠标文本样式li>     
      
     <li style='cursor:not-allowed'>我是鼠标禁止样式li>       
      
    ul>
   
  

  • 取消表单轮廓和防止拖拽

    input,textarea {
     //取消表单轮廓
     outline:none;
    }
   
    textarea {
     //防止拖拽文本域
     resize:none; 
    }
  

  tips:文本域的开闭合标签最好在一行，防止文本域里面的光标错位。

  vertical-align

  实现行内块(图片和表单都属于行内块3)和文字垂直居中，如果是其他类型元素可先转换为行内块

   div {
      display:inline-block;
      vertical-align:middle;
   }
  

  • 图片底侧空白缝隙解决
    • 给图片的父亲加边框，会发现图片的底部会有个空白缝隙，是因为图片默认是和我们文字的基线对齐。
    • 把图片转换为块级元素 display:block;

  文字溢出省略号显示

  • 单行文字溢出省略号显示

  
   div {
       width:150px;
       height:80px;
       background-color:red;
       margin:100px auto;
       //要满足以下条件才可以
       white-space:nowrap;
       overflow:hidden;
       text-overflow:ellipsis;
   }
  

  • 多行文本溢出省略号显示

   /*适合于webkit浏览器或移动端,不考虑ie的情况，pc也可用*/
   div {
       width:150px;
       height:80px;
       background-color:red;
       margin:100px auto;
       //要满足以下条件才可以
       overflow:hidden;
       text-overflow:ellipsis;
       /*弹性伸缩盒子模型显示*/
       display:-webkit-box;
       /*限制在一个块元素显示的文本的行数*/
       -webkit-line-clamp:2;
      /*设置或检索伸缩对象的子元素的排列方式*/
       -webkit-box-orient:vertical;
   }
  

  布局小技巧

  • margin负值巧妙运用

    • 让每个盒子margin 往左移动-1px 正好压住相邻盒子边框，可以去掉相邻盒子的边框。
    • 如果在某些条件下需要显示被压住的边框 鼠标经过某个盒子的时候，提高当前盒子的层级即可(如果没有定位，则加相对定位(保留位置))，如果有定位，则加z-index)

  • 文字围绕浮动元素巧妙利用

  利用浮动不会压住文字，实现左图右文

  • 行内块的巧妙运用

    利用行内块元素的特性一行显示按钮，并在父类中用text-align:center来横向居中显示子类;

  • css 初始化代码

  常用的公共兼容代码

  
  * {
  //把我们的内外边距全部清0
   margin:0;
   padding:0;
   /*css3的盒子模型，可以让border和padding不会撑大盒子。*/
   box-sizing:border-box;
  }
  
  //em和i协调的文字不倾斜
  em,i {
   font-style:normal
  }
  
  //去掉li的小圆点
  li {
   list-style:none
  }
  
  img {
  /*border:0 照顾低版本浏览器， 如果图片外面包含了链接会有边框的问题*/
   border:0;
   //取消图片底侧有空白缝隙的问题
   vertical-align:middle
  }
  
  button {
  /*当我们鼠标经过button 按钮的时候，鼠标会变成小手*/
   cursor:pointer  
  }
  
  a {
   color:#666;
   //隐藏蓝色的线
   text-decoration:none
  }
  
  a:hover {
   color:#c81623
  }
  
  button,input {
   font-family:Microsoft YaHei,Heiti   SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
   /*默认有灰色边框我们需要手动去掉*/
   border: 0;
   outline: none;
  }
  
  
  body {
    //css3 抗锯齿性，让文字显示的更加清晰
   -webkit-font-smoothing:antialiased;
   background-color:#fff;
   font: 12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans
   /*"\5B8B\4F53" 是宋体的意思,用Unicode编码浏览器的兼容性小*/
   GB,"\5B8B\4F53",sans-serif;
   color:#666
  }
  
  .hide,.none{
   display:none
  }
  
  /*清除浮动的*/
  .clearfix:after { 
   visibility:hidden;
   clear:both;
   display:block;
   content:".";
   height:0
  }
  
  .clearfix {
    *zoom:1
  }
  
  //把语义化标签转换为块级,兼容ie9
  article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary
  {
   display:block
  }
  
  

  css3新特性

  属性选择器

   <input type="text" value="请输入用户名">
  
   <input type="password" value="请输入用户名" name="">
   
  

    /*属性选择器*/
    /*必须是input,但是同时具有value这个属性 选择这个元素*/
    input[value] {
      color:red    
    }
    /*属性选择器还可以选择属性=值的某些元素*/
    input[type='text'] {
      color:red    
    }
    
  

  选择器	简介
  E[att]	选择具有att属性的E元素
  E[att=“val”]	选择具有att属性且属性值等于val的E元素
  E[att^=“val”]	匹配具有att属性且值以val开头的E元素
  E[att$=“val”]	匹配具有att属性且值以val结尾的E元素
  E[att*=“val”]	匹配具有att属性且值中含有val的E元素

  tips:类选择器、属性选择器、伪类选择器、权重为10。

  结构伪类选择器

  结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素

  选择器	简介
  E:first-child	匹配父元素中的第一个子元素E
  E:last-child	匹配父元素中最后一个E元素
  E:nth-child(n)	匹配父元素中的第n个子元素E
  E:first-of-type	指定类型E的第一个
  E:last-of-type	指定类型E的最后一个
  E:nth-of-type(n)	指定类型E的第n个

   <ul>
     <li>我是第1个孩子li>
     <li>我是第2个孩子li>
     <li>我是第3个孩子li>
     <li>我是第4个孩子li>
     <li>我是第5个孩子li>
     <li>我是第6个孩子li>
     <li>我是第7个孩子li>
     <li>我是第8个孩子li>
     <li>我是第9个孩子 li>
     <li>我是第10个孩子li>
   <ul>
   
   <section>
     <p>第一个p>
     <div>第二个div>
     <div>第三个div>
   section>
   
  

   /*选择ul的第一个孩子,且这孩子必须是li,所以在后代中指定li*/
   ul li:first-child {
       background:pink;
   }
   
   //选择ul里面的最后一个孩子
   ul li:last-child {
       background:pink;
   }
  
  /*
  1. n可以是数字,关键字和公式；
  2. 如果是数字，就是选择第n个子元素，里面数字从1开始...
  3. n可以是关键字：even偶数，odd奇数。
  4. n可以是公式：常见的公式如下(如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略)。
  */
  
  /* 执行的时候首先看 :nth-child(n) 之后再看前面的li */
  ul li:nth-child(n) {
       background:blue;
   }
   
   /* 执行的时候首先看 :div ，之后回去看 nth-of-type(n)*/
  section div:nth-of-type(n) {
       background:blue;
   }
   
   
  /* nth-child(n) 和 nth-of-type(n)区别*/
  /* nth-child(n)会把父亲下所有的盒子都排列序号,不仅仅是指定的那个选择器;nth-of-type(n)会把父亲下指定元素的盒子排列序号*/
   
  

  公式	取值
  2n	偶数
  2n+1	奇数
  5n	5 10 15…
  n+5	从第5个开始(包含第五个)到最后
  -n+5	前5个(包含第5个)…

  tips:

  1. nth-child(n) 公式值n从0开始计算
  2. 结构伪类选择器一般用于选择父级里面的第几个孩子
  3. nth-child 对父元素里面所有孩子排序选择(序号是固定的)先找到第n个孩子，然后看看是否和E匹配
  4. nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配 E，然后再根据E找第n个孩子
  5. 如果是无序列表，nth-child，用的多。
  6. 类选择器、属性选择器、伪类选择器、权重为10。

  伪元素选择器

  伪元素选择器可以帮助我们利用css创建新标签元素，而不需要HTML标签，从而简化HTML结构。规范写法前面两个::,单冒号仅用来支持ie8的。

  选择器	简介
  ::before	在元素内部的前面插入内容
  ::after	在元素内部的后面插入内容

  tips:

  1. before和after创建一个元素，都是属于行内元素
  2. 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素。
  3. 语法: element::before {}
  4. before和after 必须有content属性
  5. before和after都是盒子，before和after都在父元素里面创建，before在父元素内容的前面创建元素，after在父元素内容的后面插入元素，。
  6. 伪元素选择器和标签选择器一样，权重为1

  css3盒子模型

  css3中可以通过box-sizing来指定盒模型，有2个值：即可指定为content-box、border-box,这样我们计算盒子大小的方式就发生了改变。

  可以分成两种情况：
  1. box-sizing:content-box 盒子大小为width+padding+border(以前默认的)
  2. box-sizing:border-box 盒子大小为width
  
  如果盒子模型我们改为了box-sizing:border-box,那padding和border就不会撑大盒子了(前提padding和border不会超过width宽度)
  

  • 滤镜filter

  filter, css属性将模糊或颜色偏移等图形效果应用于元素。

   /* filter:函数(); 例如：filter:blur(5px); blur模糊处理,数值越大越模糊*/
   img {
       filter:blur(5px)
   }
  

  • calc函数

  calc() 此函数让你在声明css属性值时执行一些计算

    //需求我们的子盒子宽度永远比父盒子小30像素
    .father
      {
       width:300px;
       height:200px;
       background-color:red
     }
     
    .son {
        //子继承父的宽度然后再减去30px
        width:calc(100%-30px);
        height:30px;
        background-color:yellow;
    }
  

    <div class="father">
      <div class="son">
    div>
  

  过渡

  transition: 要过渡的属性 花费时间 运动曲线 何时开始;

  参数	说明
  要过渡的属性	想要变化的css属性，宽度高度 背景颜色 内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以
  花费时间	单位是秒（必须写单位）比如0.5s
  运动曲线	默认是ease(可以省略)
  何时开始	单位是秒（必须写单位）可以设置延迟触发时间 默认是0s（可以省略）

   div
   {
      width: 200px;
      height: 100px;
      background-color: red;
      //可以用逗号隔开，写多个属性
      transition: width .5s ease 1s,height .5s ease 1s;
      //可以用all代表多个属性
      //transition: all .5s 
    }
    
    div:hover{
          width: 400px;
    }
    
  

  tips:动画写到本身上，谁做动画给谁加

  2d转换translate

  2D移动是2D转换里的一种功能，可以改变元素在页面中的位置，类似定位。

   
   div {
      width:200px;
      height:200px;
       //x,y
      transform:translate(30px,40px);
      //横向 
      transform:translateX(30px);
      //纵向
      transform:translateY(40px);
      /*
      这里的50%就是100px 因为translate中的百分比单位是相对于自身元素的，盒子的宽度是200px
      */
      transform:translateX(50%);
   }
  
  

  • 实际应用：垂直居中

  
   .father {
       position:relative;
       width:400px;
       height:400px
   }
   
   .son {
       position:absolute;
       width:200px;
       height:200px;
       left:50%;
       top:50%;
       transform:translate(-50%,-50%)
       /*以下等价于以上transform
        margin-left:-100px; 
        margin-top:-100px; 
       */
   }
  
  

  tips:

  1. 定义2D转换中的移动，沿着X和Y轴移动元素。
  2. translate最大的优点：不会影响到其他元素的位置。
  3. translate中的百分比单位是相对于自身元素的translate(50%,50%)
  4. 对行内标签没有效果

  2d转换rotate

   div {
       width:150px;
       //顺时针旋转45度
       transform:rotate(45deg)
   }
  

  • 实际应用–小三角

    
    div {
        width:249px;
        height:35px;
        border：1px solid #000;
    }
   
    div::after {
      content:"";
      position:absolute;
      top:8px;
      right:15px;
      width:10px
      height:10px;
      border-right:1px solid #000;
      border-bottom:1px solid #000;
      transform:rotate(45deg);
      transition:all 0.4s
   }
   
    div:hover::after {
      transform:rotate(225deg);
    }
   
  

  • 设置转换中心点

   div {
      transform-origin:x y;
   }
  

  • 实际应用–中心点的设置左下角旋转

   .div {
       width:200px;
       height:20px;
       border:1px solid pink;
       margin:100px auto;
       overflow:hidden;
   }
   
   div::before {
       content:"牛逼";
       display:block;
       width:100%;
       height:100%;
       background-color:red;
       transform:rotate(180deg);
       //左下角
       transform-origin:left bottom;
       transition:all 0.4s;
   }
  
   div:hover::before {
       //鼠标移动上去，还原
       transform:rotate(0deg);
   }
  

   <div>div>
  

  tips：

  1. 注意后面的参数x和y用空格隔开
  2. x y 默认转换的中心点是元素的中心点(50% 50%)
  3. 可以给x y 设置像素 或者方位名词 (top bottom left right center )

  2d转换scale

  缩放，顾名思义，可以放大和缩小。

   
    div {
        width:200px;
        height:200px;
        background-color:red;
        margin:100px auto;
        transform-origin:left bottom;
    }
    
  
    div:hover {
      /*
         1.里面写的数字不跟单位，就是倍数的意思,
         1就是1倍 2就是2倍
        */
       //transform:scale(x,y);
       //修改了宽度为原来的2倍，高度不变。
       transform:scale(2,1)
       /*
         宽高同时放大
         transform:scale(2)
       */ 
      
       /*
         宽高同时缩小
         transform:scale(0.5)
       */ 
    }
  

  tips:

  1. 我们可以进行缩小 小于1 就是缩放
  2. 不影响其他的盒子，以前的控制宽、高会影响其他盒子。
  3. 可以设置缩放的中心点。

  • 实际运用–图片放大

   div {
       //不让放大时超出范围
       overflow:hidden
       float:left;
       margin:10px;
   }
   
   div img {
       transition: all .4s
   }
   
   div img:hover {
       transform:scale(1,1);
   }
  

  • 2D旋转 综合写法

    
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
        transition: all .5s;
    }
   
   div:hover {
    /*我们同时又位移和其他属性，我们需要把位移放到最前面。
    
    */
      transform: translate(150px,50px) rotate(180deg);
   }
  

  tips:

  1. 同时使用多个转换，其格式为: transform:translate() rotate() scale()…等
  2. 其顺序会影响转换的效果。(先旋转会改变坐标轴方向)
  3. 当我们同时又位移和其他属性的时候，记得要将位移放到最前。

  动画(animation)

  动画是css3中最具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
  相比较过滤,动画可以实现更多变化，更多控制，连续自动播放等效果。

  • 动画的基本使用
    • 先定义动画
    • 再使用(调用)动画

  /*需求：想页面一打开，一个盒子就从左走到右边
  1.定义动画
  */
   
   @keyframes move {
    /*开始状态 可省略*/
     0% {
       transform:translate(0,0 );
     }
    /*第一状态*/    
     25% {
       transform:translate(1000px,0);
      }
    /*第二状态*/   
      50% {
      transform:translate(1000px,500px);
      }
    /*第三状态*/ 
      75% {
       transform:translate(0,500px);   
      }
    /*结束状态 第四*/
     100% {
      transform:translate(0,0);
     }  
   
   }
   
   div {
      width: 200px;
      height: 200px;
      background-color:pink;
      /*2.调用动画*/
      /* 动画名称 */
      animation-name:move;
      /* 动画持续时间 */
      animation-duration:10s
   }
   
  

  tips:

  1. 0% 是动画的开始，100%是动画的完成。这样的规则就是动画序列。
  2. 在@keyframes中规定某项css样式，就能创建由当前样式逐渐改为新样式的动画效果。
  3. 动画是使元素从一种样式逐渐变化为另一种样式的效果您可以改变任意多的样式任意多的次数。
  4. 请用百分比来规定变化生的时间，或用关键词"from"和"to"，等同于0%和100%
  5. 百分比就是总的时间(我们这个案例10s)的划分25%*10=2.5s

  • 动画常用属性

  
   div {
       width: 100px;
       height: 100px;
       background-color:pink;
       /*动画名称*/
       animation-name:move;
       /*持续时间*/
       animation-duration:2s;
       /*运动曲线*/
       animation-timing-function:ease;
       /*何时开始*/
       animation-delay:1s;
       /*重复次数 iteration 重复的 count 次数 infinite 无限  */
       animation-iteration-count:infinite;
       /*是否反方向播放 默认的是 normal 如果反方向 就写alternate*/
       animation-direction:alternate;
       /*动画结束后的转态 默认是backward 回到起始转态 我们可以让他停留在结束状态   forwards*/
       animation-fill-mode:forwards;
   }
  
   div:hover {
    /*鼠标经过div 让这个div 停止动画，鼠标离开就继续动画*/
    animation-play-state:paused;
   }
  

  属性	描述
  @keyframes	规定动画
  animation	所有动画属性的简写属性，除了animation-play-state属性
  animation-name	规定@keyframes动画的名称(必须的)
  animation-duration	规定动画完成一个周期所花费的秒或毫秒，默认是0.(必须的)
  animation-timing-function	规定动画的速度曲线，默认是"ease",还有linear,是匀速的意思
  animation-delay	规定动画何时开始，默认是0
  animation-iteration-count	规定动画被播放的次数，默认是1，还有infinite:无限
  animation-direction	规定动画是否在下一周期逆向播放，默认是"normal","alternate"逆播放
  animation-play-state	规定动画是否正在运行或暂停，默认是"running",还有"paused"
  animation-fill-mode	规定动画结束后状态，保持forwards,回到起始backwards

  • 动画简写

  animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的转态;

  div {
  animation:move 2s linear 0s 1 alternate forwards  
  }
  
  /*省略写法--顺序除了持续时间一定在何时开始之前,其他随意*/
  
  div {
   animation: move 2s   linear alternate forwards 
  }
  

  tips:

  1. 以上简写，要用空格隔开，持续时间一定在何时开始之前。
  2. 前面2个属性一定要写，其他可以省略，顺序不定

  • 实际应用–波纹(大数据地图地点)

  
   map {
       position: relative;
       width: 747px;
       height: 616px;
       //中国地图
       background:url(media/map.png) no-repeat
       margin 0 auto;
   }
   
   .city {
     position: absolute;
     top:100px;
     right:100px;
     color:#fff;
   }
   
   
   .dotted {
      width: 8px;
      height: 8px;
      background-color: #09f;
      border-radius: 50%;
   }
  
   .city div[class^='pulse'] {
     /*保证我们小波纹在父盒子里面水平垂直居中，放大之后就会中心向四周发散*/
      position:absolute;
      top:50%
      left:50%
      transform:translate(-50%,-50%);
      width: 8px;
      height: 8px;
      //有阴影波纹会更好看
      box-shadow: 0 0 12px #009dfd; 
      border-radius:50%;
   }
   
   .city div.pulse2 {
      animation-delay:0.4s;
   }
  
   .city div.pulse3 {
      animation-delay:0.8s;
   }
  
  
   @keyframes pulse {
      0% { } 
      70% {
       /*
       transform:scale(5);我们不要用scale,因为他会让阴影变大;
       */
       width:40px;
       height:40px;
       opacity:1;
      }
      100% {
       width:70px;
       width:70px;
       opacity:0;
      }
   }
  

  
  <div class='map'>
   <div class='city'>
    <div class='dotted'>div>
    <div class='pulse1'>div>
    <div class='pulse2'>div>
    <div class='pulse3'>div>
   div>
  div>
  

  • 速度曲线细节

  animation-timing-function:规定动画的速度曲线，默认是"ease"

  值	描述
  linear	动画从头到尾的速度是相同的。匀速
  ease	默认。动画以低速开始，然后加快，在结束前变慢。
  ease-in	动画以低速开始。
  ease-out	动画以低速结束。
  ease-in-out	动画以低速开始和结束
  steps()	指定了时间函数中的间隔数量(步长)

    /*需求：打字机效果*/
   div {
       overflow:hidden;
       width:0;
       height:30px;
       background-color:pink;
       white-space:nowrap;
      /*steps 就是分几步来完成我们的动画 有了steps 就不要再写 ease 或者linear了*/     
       animation:w 4s steps(10) forwards;
       
   }
   
   @keyframes w {
   
       0% {
           width: 0;
       }
       
       100%{
           width: 200px;
       }
   }
  

    /*需求：奔跑的小熊
     1.准备小熊的跑的各种动作背景图，放在一张里面(类型精灵图)
     2.用背景图的position,改变位置,让它呈现有跑在一个盒子中的感觉。 */
  
   body {
      background-color: #ccc;
   }
  
   div {
      position:absolute;
      width: 200px;
      height: 100px;
      background: url(media/bear.png) no-repeat;
       /*我们元素可以添加多个动画，用逗号分隔*/
      animation: bear 1s steps(8) infinite, move 3s forwards;
   }
   
   @keyframes bear {
       0% {
         background-position:0,0;
       }
       
       100%{
         background-position:-1600px 0
       }
   }
   
   @keyframes move {
   
      0% {
         left:0;
       }
   
      100%{
        /*left 50% 会多跑宽度的一半的距*/
         left:50%;
         //margin-left:-100px;
         transform:translateX(-50%)
      }
   }
  

  tips:我们元素可以添加多个动画，用逗号分隔

  3D转换

  • 三维坐标系

  三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。

  x轴：水平向右 注意：x右边是正值，左边是负值
  
  y轴：垂直向下 注意:y下面是正值，上面是负值
  
  z轴：垂直屏幕 注意：往外面是正值，往里面是负值
  

  • 3D移动 translate3d

  3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。

  /*语法:transform:translate3d(x,y,z)*/ ;
   div {
       width: 200px;
       height: 200px;
       background-color:pink;
      /*translateZ(100px) 向外移动100px (向我们的眼睛来移动的)*/ 
      transform:translate3d(100px,100px,100px)
     }
  

  tips:

  1. transform:translateZ(100px):仅仅是在Z轴上移动,translateZ一般用px单位
  2. xyz是不能省略的，如果没有就写0;

  • 3D透视 perspective

  透视写在被观察元素的父盒子上面的，是一种观察的距离，Z轴越大(正值) 我们看到的物体就越大，近大远小;

    body {
       //有了透视,  transform:translateZ 才管用，透视越小，看到的物品越立体，盒子越大
       perspective: 500px;
    }
    
    div {
       width: 100px;
       height: 200px;
       background-color: pink;
       margin: 100px auto;
       transform:translateZ(0)
    }
  

  • 3D旋转 rotateX

   body {
       perspective: 300px;
    }
    
   img {
     display: block;
     margin: 100px auto;
     transition: all 1s;
   }
   
  
   img:hover {
      //transform:rotateX(180deg);
      //transform:rotateY(180deg);
      //transform:rotateZ(180deg);
      //参数 x,y,z 那个有值就是沿着该轴旋转，最后一个表示旋转的角度。   
      //transform:rotate3d(1,0,0,45deg);
      //沿着x和y的矢量即沿着对角线旋转45deg
      transform:rotate3d(1,1,0,45deg);
   }
   
  
  

    <img src="media/pig.jpg">
  

  tips: 对于元素旋转的方向的判断 可根据左手准则

  1. X轴旋转: 左手的手拇指，指向x轴的正方向(指向右手边的方向)，其余手指的弯曲方向就是该元素沿着x轴旋转的方向。
  2. Y轴旋转：左手的手拇指指向y轴的正方向(指向自己的方向)，
     其余手指的弯曲方向就是该元素沿着y轴旋转的方向(正值)。

  • 3D呈现transfrom-style
    • 控制子元素是否开启三维立体环境。
    • transform-style:flat子元素不开启3d立体空间 默认的
    • transform-style:preserve-3d;子元素开启立体空间
    • 代码写给父级，但是影响的是子盒子

   /*
    需求:两个盒子交叉(呈十字)立体旋转
   */
   
   body{
      //body是div的爷爷级，也算是父级。
      perspective:500px;
   }
  
   .box {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      transition:all 2s;
      /*让子元素保持3d立体空间环境*/
      transform-style:preserve-3d;
   }
    
   .box:hover {
      transform:rotateY(60deg);
   }   
    
   .box div {
       position:absolute;
       top:0;
       left:0;
       width:100%;
       height:100%;
       background-color:red;
   }
   
   .box div:last-child {
       background-color:blue;
       transform:rotateX(90deg);
   }
  
  

    <div class="box">
      <div>div>
      <div>div>
    <div>
  

  • 实际案例–两面翻转的盒子

   
     body {
        //透视
        perspective:400px;
     }
   
    .box {
        position: relative;
        width: 300px;
        height: 300px;
        margin: 100px auto;
        transition: all .6s;
        /*让子元素保持3d立体空间环境*/
        transform-style:preserve-3d;
    }
    
    .box:hover {
       transform:rotateY(180deg);
    }
  
    .front,
    .back {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        font-size: 30px;
        color: #fff;
        text-align: center;
        line-height: 300px;
    }
  
    .front {
        background-color:red;
        z-index:1;
    }
    
    .back {
        background-color:blue;
        transform:rotateY(180deg);
    }
  
  

   <div class="box">
    <div class="front">我是正面div>
    <div class="back">我是负面div>
   div>
  
  //box父盒子里面包含前后两个子盒子，box是翻转的盒子 front是前面盒子，back是后面盒子。
  

  杂项

  css书写规范

  • 建议遵循以下顺序

   1.布局定位属性: display/position/float/clear/visibility/overflow(建议display第一个写，毕竟关系到模式)
   2.自身属性:width/height/margin/padding/border/background
   3.文本属性:color/font/text-decoration/text-align/vertical-align/white-space/break-word
   4.其他属性(css3):content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient
  

  • 示例

   div {
      //布局
      display:block;
      position:relative;
      float:left;
      //自身属性
      width:100px;
      height:100px;
      margin:0 10px;
      padding:20px 0;
      //文本属性
      font-family:Arial,'Helvetica Neue', Helvetica,sans-sefif;
      color:#333;
      //css3新增的
      background:rgba(0,0,0,.5);
      border-radius:10px;
   }
  

  页面布局整体思路

  为了提高网页制作的效率，布局时通常有以下的整体思路

  1. 必须确定页面的版心(可视区/安全距离)，我们测量可得知。
  2. 分析页面中的行模块，以及每个行模块中的列模块。其是页面布局第一准则。
  3. 一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置，页面布局第二准则。
  4. 制作HTML结构，我们还是遵循，先有结构，后有样式的原则，结构永远最重要。

  网页布局总结

  通过盒子模型，清楚知道大部分html标签是一个盒子。
  通过css浮动、定位可以让每个盒子排列成为网页。
  一个完整的网页,是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。

  1. 标准流：
     可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。
  2. 浮动：
     可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。
  3. 定位：
     定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。

  html5的新特性

  • 语义化标签

   <header>header>
   <article>article>
   <aside>aside>
   <details>details>
   <figcaption>figcaption>
   <footer>footer>
   <hgroup>hgroup>
   <main>main>
   <menu>menu>
   <nav>nav>
   <section>section>
   <summary>summary>
  

  • 音视频标签

   <audio> audio>
   <video> video>
  

  • 新增的input类型

  属性值	说明
  type=“email”	限制用户输入必须为Email类型
  type=“url”	限制用户输入必须为URL类型
  type=“date”	限制用户输入必须为日期类型
  type=“time”	限制用户输入必须时间类型
  type=“month”	限制用户输入必须月类型
  type=“week”	限制用户输入必须周类型
  type=“number”	限制用户输入必须数字类型
  type=“tel”	手机号码
  type=“search”	搜索框
  type=“color”	生成一个颜色选择表单

  • 新增的表单属性

  属性	值	说明
  required	required	表单拥有该属性表示其内容不能为空，必填
  placeholder	提示文本	表单的提示信息，存在默认值将不显示
  autofocus	autofocus	自动聚焦属性,页面加载完成后自动聚焦到指定表单
  autocomplete	off/on	当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开，如autocomplete=“on”,关闭autocomplete="off"需要放在表单内，同时加上name属性，同时成功提交
  multiple	multiple	可以多选文件提交

  参考资料

  https://www.bilibili.com/video/av80149248?from=search&seid=8416252108771814025

  推荐

  如果还想知道前端其他的方面的知识，可以看过来

  • vue知识点归纳与总结(笔记)

  • es5、es6、es7知识点的归纳与总结(笔记)

  • 不一样的css，sass(scss)的基本使用

  未完待续~~~