前端学习——css(初级)

1.Css盒模型（box model）

　　web开发中，html的每个元素都是盒子，盒子可以装内容（content）、可以有填充物（padding）、有外壳（border） 和 外保护层（margin） 。下图为控制台中的盒子详解：浏览器的控制台是我们了解一个元素最好的一个工具，下图可以清晰的看出一个盒子所拥有的属性。

     元素的实际宽高

　　　上图可清晰的看出 元素实际的宽=border-left+padding-left+元素内容宽+padding-right+border-right

　　　　　　　　　　　 元素实际的高=border-top+padding-top+元素内容高+padding-bottom+border-bottom

        　　　　　　　　     而margin则可以看作每一个盒子之间的空隙并不是盒子实际的宽高

     css3（box-sizing）

　　　box-sizing有三个值：content-box:元素的宽高值只包换元素的宽高，padding+border会影响实际宽高。

　　　　　　　　　　　　 border-box:元素的宽高包含了padding+border+content。

　　　　　　　　　　　　 inherit:从父元素继承 box-sizing 属性的值。

2.基本格式化-包含块

    什么是包含块

      包含块（Containing Block）是视觉格式化模型的一个重要概念，它与盒模型类似，也可以理解为一个矩形，而这个矩形的作用是为它里面包含的元素提供一个参考，元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。

      包含块简单说就是定位参考框，或者定位坐标参考系，元素一旦定义了定位显示（相对、绝对、固定）都具有包含块性质，它所包含的定位元素都将以该包含块为坐标系进行定位和调整。

   如何寻找包含块

      根元素：

    　　   默认条件下，html元素为包含块，一些浏览器把body设为包含块。

    非根元素：

            1、非根元素，除非元素使用的是绝对位置，包含块由最近的块级祖先元素盒子的内容边界组成。

            2、非根元素有属性 'position:fixed'，包含块由视口建立。
            3、非根元素有属性 'position:absolute'，包含块设置在最近的postion不是static的祖先元素(这里的祖先元素可以是块级元素，也可是内联元素)：

                 a、如果祖先元素是块级元素，包含块设为该块级元素的padding边沿

                 b、如果祖先元素是内联元素则包含块设为该内联元素的内容边沿

 

3.了解float的使用，以及float与position的差异

     float的使用

     　 float(浮动)的框可以使元素向左或向右浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框  表现得就像浮动框不存在一样。主要适用元素需要向左向右对齐的时候。

    语法

　　　float:none 不使用浮动  默认值
　　   float:left 靠左浮动
　　　float:right 靠右浮动

    float与position的差异

           严格意思上讲float只能叫布局，而position才叫定位。

　　   float仍会占据其位置，position会覆盖文档流中的其他元素

4.详解position

   CSS positon：属性规定元素的定位类型

　　这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移，同时它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高，它显示的越在上层。

   值 描述

　　　absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

　　　　   　　   元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

　　   fixed：生成固定定位的元素，相对于浏览器窗口进行定位。

　　　          元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

　　　relative：生成相对定位的元素，相对于其正常位置进行定位。

　　　　　　　  因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

　　   static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

　　　inherit：规定应该从父元素继承 position 属性的值。

5.实现元素居中

   元素水平居中

 

{
      margin：0 auto；  
}
{
      text-align:center；
}
{
      width:200px;
      position:relative;
      left:-50%;
      margin-left:-100px;
}
{
　　display:flex;
　　justify-content:center;
   }

 

  元素垂直居中

     

{
   display: table-cell;
   vertical-align: middle;
}
{			
   height:200px;
   line-height:200px; 
}
{
   height:200px;
   position:relative;
   top:-50%;
   margin-top:-100px;
}

 

6.了解css3动画

   @keyframes 规则和所有动画属性

   animation 属性是一个简写属性，用于设置六个动画属性

 

  • animation-name  规定需要绑定到选择器的 keyframe 名称
  • animation-duration  规定完成动画所花费的时间，以秒或毫秒计。
  • animation-timing-function  规定动画的速度曲线。

    • inear 动画从头到尾的速度是相同的。

    • ease 默认。动画以低速开始，然后加快，在结束前变慢。

    • ease-in 动画以低速开始。
    • ease-out 动画以低速结束。ease-in-out 动画以低速开始和结束

    • cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值，可能的值是从 0 到 1 的数值。

  • animation-delay  规定在动画开始之前的延迟。
  • animation-iteration-count  规定动画应该播放的次数。
  • animation-direction  规定是否应该轮流反向播放动画。

    • normal 默认值。动画应该正常播放。

    • alternate 动画应该轮流反向播放。

 transform

   rotate
      设置元素顺时针旋转的角度，用法是：
         transform: rotate(x);
         参数x必须是以deg结尾的角度数或0，可为负数表示反向。
   scale
  　　 设置元素放大或缩小的倍数，用法包括：
　　　　transform: scale(a); 元素x和y方向均缩放a倍
　　　　transform: scale(a, b); 元素x方向缩放a倍，y方向缩放b倍
　　　　transform: scaleX(a); 元素x方向缩放a倍，y方向不变
　　　　transform: scaleY(b); 元素y方向缩放b倍，x方向不变
   translate
　　 设置元素的位移，用法为：
　　　　transform: translate(a, b); 元素x方向位移a，y方向位移b
　　　　transform: translateX(a); 元素x方向位移a，y方向不变
　　　　transform: translateY(b); 元素y方向位移b，x方向不变
　skew
　　设置元素倾斜的角度，用法包括：
　　　　transform: skew(a, b); 元素x方向逆时针倾斜角度a，y方向顺时针倾斜角度b
　　　　transform: skewX(a); 元素x方向逆时针倾斜角度a，y方向不变
　　　　transform: skewY(b); 元素y方向顺时针倾斜角度b，想方向不变
　　　　以上的参数均必须是以deg结尾的角度数或0，可为负数表示反向。
　matrix
　　设置元素的变形矩阵，因为矩阵变形过于复杂，暂略。
   origin
　　设置元素的悬挂点，用法包括：
　　　　transform-origin: a b; 元素的悬挂点为(a, b)
　　　　元素的悬挂点即为它旋转和倾斜时的中心点。取值中的a、b可以是长度值、以%结尾的百分比或者left、top、right、bottom四个值。

 transition

   transition 属性是一个简写属性，用于设置四个过渡属性：

  • transition-property  规定设置过渡效果的 CSS 属性的名称。
  • transition-duration  规定完成过渡效果需要多少秒或毫秒。
  • transition-timing-function  规定速度效果的速度曲线。

    • 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 之间的数值

  • transition-delay  定义过渡效果何时开始。

 

posted @ 2016-06-23 22:04  隔壁家的老黄  阅读(287)  评论(0)  编辑  收藏  举报