码迷,mamicode.com
首页 > Web开发 > 详细

前端学习——css(初级)

时间:2016-06-23 23:52:09      阅读:228      评论:0      收藏:0      [点我收藏+]

标签:

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的使用,以及floatposition的差异

     float的使用

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

    语法

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

    floatposition的差异

           严格意思上讲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  定义过渡效果何时开始。

 

前端学习——css(初级)

标签:

原文地址:http://www.cnblogs.com/ychl/p/5612371.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!