依旧是CSS部分
贴个CSS主要知识点总结的链接:http://blog.csdn.net/html5_/article/details/26098273

【自己的笔记做得好乱,以前一直以为是字丑的原因,现在觉得大概自己归纳整理能力实在差劲,有什么办法能提高这技能?】

问题总结:
Q1 - css中的区块 inline inline-block block 三者有什么区别呢?

A1 - 内联元素是不可以控制宽和高、margin等;并且在同一行显示,不换行。
块级元素时可以控制宽和高、margin等,并且会换行。

inline:使用此属性后,元素会被显示为内联元素,元素则不会换行。
block:使用此属性后,元素会被现实为块级元素,元素会进行换行。
inline-block:是使元素以块级元素的形式呈现在行内。意思就是说,让这个元素显示在同一行不换行,但是又可以控制高度和宽度,这相当于内敛元素的增强。

    1. 盒布局
      基本的两种类型 - inline和block
      A - 使用inline-block属性可以直接将两个div元素进行并列显示,不需要使用float属性,也不需要用clear清除浮动了。

      div{width: 200px;height: 200px;}
      .div1{background: red;display: inline-block;height: 100px;}
      .div2{background: green;display: inline-block;}
      .div3{background: blue;display: inline-block;}
      .div4{background: yellow;display: inline-block;height: 30px;vertical-align: top;}
      .div5{background: green;display: inline-block;}

      要点:a - 使用inline-block并列显示的div之间的默认对齐方式与div元素是否为空有关,可用vertical-align进行设置(相关链接:http://bbs.csdn.net/topics/392094244
                 b - 使用inline-block并列显示的元素之间默认有空格,解决方法是在代码中令该元素之间紧邻,不要有空格,如:<div>……</div><div>……</div>
      B - 在css2.1之前,如果要实现水平菜单,需要用float属性,大多数菜单是利用ul列表和li列表项目来显示的,li元素隶属于block类型下的list-item类型,所以要并列显示就要用float属性

      ul{margin: 0;padding: 0;}
      li{
      display: inline-block;//传统方式是用float:left;
      padding: 10px 20px;
      background-color: #f60;
      width: 100px;
      text-align: center;
      list-style: none;
      border-right: 2px solid red;
      }
      a{
      text-decoration: none;
      color: #fff;
      }

      C - inline-table

      table{
      border: 2px solid black;
      display: inline-table; 将表格以行内元素显示
      vertical-align: bottom;
      }
      td{
      border: 2px solid blue;
      }

      效果:

      【气死我了,浏览器各种卡顿自动退出,笔记都没来及保存,第二回了,实在没心力再整理一遍】
      【现在是第二天,想了想,还是补补吧】
      A - 盒阴影 box-shadow:length length radius color;
      文字阴影离文字的横方向距离、纵方向距离、模糊半径、颜色;
      模糊半径为0时,将绘制不向外模糊的阴影
      横纵方向距离都设为0时,在盒子周围绘制阴影
      横方向为负值时,向左绘制阴影
      纵方向为0时,向右绘制阴影
      B -指定宽高计算方法 box-sizing(https://www.cnblogs.com/zhaoran/archive/2013/05/24/3097482.html
      这个其实就是指定盒子区域要不要包括内边距和边框
      box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box。

  1. border-radius:半径;
    可以指定两个半径,第一个指定左上角与右下角边框(按照对角线划分)
    如果使用了border-radius属性但是没有设置边框时,浏览器会把背景的四个角设置为圆角
    绘制四个不同半径的圆角边框
    border-top-left-radius - 左上角
    border-bottom-left-radius - 左下角
    border-top-right-radius - 右上角
    border-bottom-right-radius - 右下角
  2. 图像边框 border-image(http://www.cnblogs.com/yolo-bean/p/7954454.html
    使用方法:border-image:url('图像路径') 边距(不能带单位)/宽度 上下方式 左右方式;(四个边距,上右下左,相同时可缩写为一个)
    repeat平铺 stretch拉伸  round
    补充:
    各种浏览器的私有前缀
    -ms-    IE9
    -moz-     火狐Firefox
    -webkit-    Safari&Chrome
    -o-        Opera
        1. transform变形功能
          A:
          ratate旋转
          使用方法:-moz-transform:rotate(角度)    顺时针旋转,角度单位是deg

          scale缩放
          使用方法:-moz-transform:scale(值) 倍数缩放
          可能的值:scale(x,y)表示x,y轴同时缩放| scaleX(x)表示仅x轴缩放| scaleY(y)表示仅y轴缩放

          skew倾斜
          使用方法:transform:skew(值) 角度
          可能的值:skew(x,y)表示x,y轴同时倾斜,只有一个参数时,只在水平方向倾斜| skewX(x)表示仅x轴扭曲变形| skewY(y)表示仅y轴扭曲变形

          translate移动
          使用方法:-moz-transform:translate(值) 移动的距离
          可能的值:translate(x,y)表示向x,y轴方向同时移动,只有一个参数时,只在水平方向移动| translateX(x)表示仅在x轴方向移动| translateY(y)表示仅向y轴方向移动

          <style type="text/css">
              div{
                  width: 100px;
                  height: 100px;
                  display: inline-block;
                  background: gray;
                  margin: 50px;
              }
              div.div1:hover{
                  -moz-transform:rotate(45deg);
          transform-origin:0 0;
              }
              div.div2:hover{
                  -moz-transform:scale(0.5);
              }
              div.div3:hover{
                  -moz-transform:skew(45deg);
              }
              div.div4:hover{
                  -moz-transform:translate(50px,50px);
              transform-origin: top left;
              }     </style>
          </head>
          <body>
          <div class="div1">rotate旋转</div>
          <div class="div2">scale缩放</div>
          <div class="div3">skew倾斜/扭曲</div>
          <div class="div4">translate移动</div>
          </body>

          B:可以同时使用多种功能 transform:方法1 方法2 方法3;,如:-moz-transform:rotate(45deg) scale(0.5);
          C:tramsform-origin:X Y;改变元素基点(http://blog.csdn.net/shenshuai89/article/details/47176309

        2. CSS3中的动画功能(http://blog.csdn.net/z983002710/article/details/76407757
          A:transition平滑过渡
          贝塞尔曲线扫盲(http://blog.csdn.net/cdnight/article/details/48468653
          自定义CSS动画过渡中的贝塞尔曲线(http://dtop.powereasy.net/Item.aspx?id=3614
          B:animations高级动画
          /*变换颜色*/
          div{
          width: 100px;
          height: 100px;
          background: gray;
          }
          /*定义关键帧合集*/
          @-moz-keyframes mycolor{
          0%{
          background: red;
          }
          20%{
          background:green;
          }
          40%{
          background: blue;
          }
          }
          div:hover{
          /*运用动画*/
          -moz-animation-name:mycolor;
          -moz-animation-duration:5s;
          -moz-animation-timing-function:linear;
          -moz-animation-iteration-count:infinite; /*这个表示无限循环*/
          }
        3. 布局相关样式
          A:多栏布局
          column-count属性 - 将一个元素中的内容分成多栏进行显示。
          用法:column-count:栏目数;
          兼容性写法:-moz-column-count:栏目数;……
          注意:在使用多栏布局的时候,要将元素的宽度设置为多个栏目的总宽度

          column-width属性 - 指定栏目的宽度来生成分栏
          兼容性写法:-webkit-column-width……

          column-gap属性 - 指定栏目与栏目之间的距离

          column-rule属性 - 给栏目之间增加分割线

          /*.div1{
          width: 100%;
          -moz-column-count:3;
          }*/
          .div1{
          width: 100%;
          -moz-column-width:150px;
          -moz-column-gap:150px;
          -moz-column-rule:solid 2px red; /*跟定义border一样,要分别指定样式 宽度 颜色*/
          }
          div.div3{
          width: 100%;
          height: 300px;
          background: #f60;
          }

          B:盒布局
          使用方法 - 在外层盒子中添加样式:display:-moz-box;
          (传统方法是用float,但是高度不同时无法对齐)
          盒布局与多栏布局的区别 - 多栏布局的栏目宽度必须相等,也只能统一指定栏目宽度,所以多栏布局比较适合在文字内容页面使用,并不适合在整个网页编排时使用
          C:弹性盒布局
          弹性盒布局 - 让DIV宽度随浏览器窗口变化而变换(自适应)
          兼容性写法:-moz-box-flex

          改变元素的显示顺序
          使用弹性盒布局的时候,可以通过box-oridinal-group属性来改变各个元素的显示顺序,浏览器根据序号从小到大显示元素
          兼容性写法:-moz-box-oridinal-group

          box-orient指定多个元素的排列方向(用兼容性写法)
          属性值:horizontal - 水平方向从左到右排列子元素
                  vertical - 垂直方向从上到下排列子元素

          	<style type="text/css">
          #main{
          margin: 0 auto;
          display: -moz-box; /*盒布局*/
          -moz-box-orient:vertical; 指定元素的排列方向为垂直排列
          }
          #left{
          /*float: left;*/
          width: 300px;
          padding: 10px;
          background: gray;
          -moz-box-ordinal-group:3; /*改变元素的显示顺序*/
          }
          #right{
          width: 300px;
          padding: 10px;
          background: #f60;
          -moz-box-ordinal-group:2;
          /*float: left;*/
          } #content{
          /*float: left;*/
          background: yellow;
          -moz-box-flex:1; /* 弹性盒布局*/
          -moz-box-ordinal-group:1;
          }
          #left,#right,#content{
          -moz-box-sizing:border-box;
          } </style>
          </head>
          <body>
          <div id="main">
          <div id="left">
          <h1></h1>
          <ul>
          <li><a href="demo.html">这是1</a></li>
          <li><a href="demo.html">这是2</a></li>
          <li><a href="demo.html">这是3</a></li>
          <li><a href="demo.html">这是4</a></li>
          <li><a href="demo.html">这是5</a></li>
          </ul>
          </div>
          <div id="content">能的值:skew(x,y)表示x,y轴同时倾斜,只有一个参数时,只在水平方向倾斜| skewX(x)表示仅x轴扭曲变形|
          skewY(y)表示仅y轴扭曲变形 translate移动 使用方法:-moz-transform:translate(值) 移动的距离 可能的值:translate(x,y)表示向x,y轴方向同时移动,
          只有一个参数时,只在水平方向移动| translateX(x)表示仅在x轴方向移动| translateY(y)表示仅向y轴方向移动使用方法:transform:skew(值) 角度 可能的值:skew(x,y)
          表示x,y轴同时倾斜,
          只有一个参数时,只在水平方向倾斜| skewX(x)表示仅x轴扭曲变形| skewY(y)表示仅y轴扭曲变形 translate移动 使用方法:-moz-transform:translate(值) 移动的距离 </div>
          <div id="right">
          <h1>推荐文章</h1>
          <ul>
          <li><a href="demo.html">这是1</a></li>
          <li><a href="demo.html">这是2</a></li>
          <li><a href="demo.html">这是3</a></li>
          <li><a href="demo.html">这是4</a></li>
          <li><a href="demo.html">这是5</a></li>
          </ul>
          </div>
          </div>
          </body>

          元素的宽高自适应
          在使用盒布局的时候,元素的宽高具有自适应性,就是元素的宽高可以根据排列方式的改变而改变

          使用弹性盒布局来消除空白
          方法就是给子DIV中加入一个box-flex属性

          对多个元素使用box-flex属性
          box-flex:一个正数;当数值相同时子元素平分容器宽高,否则值越大所占面积越大

          <style type="text/css">
          #main{
          display: -moz-box; /*先变成盒布局*/
          border:solid 5px green;
          /*-moz-box-orient:horizontal;*/
          -moz-box-orient:vertical;
          width: 500px;
          height: 400px;
          }
          #div1{
          background: blue;
          -moz-box-flex:1;
          }
          #div2{
          background: pink;
          -moz-box-flex:1; /*清除空白*/
          }
          #div3{
          background: yellow;
          } #div1,#div2,#div3{
          -moz-box-sizing:border-box;
          font-size: 30px;
          -moz-box-flex:1;
          }
          </style>
          </head>
          <body>
          <div id="main">
          <div id='div1'>这是DIV1</div>
          <div id='div2'>这是DIV2</div>
          <div id='div3'>这是DIV3</div>
          </div>
          </body>

          指定水平方向与垂直方向的对齐方式(http://blog.csdn.net/juzipchy/article/details/72870152
          box-pack(水平)和box-align(垂直)属性来指定元素中的内容或者子元素的水平或垂直方向的对齐方式

          属性值:start| center |end

media queries与自适应布局(http://blog.csdn.net/z983002710/article/details/76432959

02_HTML5+CSS详解第四天的更多相关文章

  1. 02_HTML5+CSS详解第三天

    WebStorage简单的网页留言板用到的函数有3个1.saveStorage函数使用"new Date().getTime()"语句来获取当前的日期和时间戳,然后使用localS ...

  2. 02_HTML5+CSS详解第一天

    视频来源:麦子学院 讲师:朱朝兵 HTML5概念:HTML即超文本标记语言(HyperText Makeup Language),是一种语法简单,结构清晰的解释型文档,不同于其他编程语言. HTML5 ...

  3. 02_HTML5+CSS详解第二天

    html5大纲分析工具:https://gsnedders.html5.org/outliner/ <section> <h1>HTML部分</h1> <se ...

  4. CSS详解

    Web前端开发css基础样式总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255 ...

  5. IIS负载均衡-Application Request Route详解第四篇:使用ARR实现三层部署架构(转载)

    IIS负载均衡-Application Request Route详解第四篇:使用ARR实现三层部署架构 系列文章链接: IIS负载均衡-Application Request Route详解第一篇: ...

  6. 前端技术之_CSS详解第四天

    前端技术之_CSS详解第四天 一.第三天的小总结 盒模型box model,什么是盒子? 所有的标签都是盒子.无论是div.span.a都是盒子.图片.表单元素一律看做文本. 盒模型有哪些组成: wi ...

  7. jquery的css详解(二)

    jq的工具方法style用于设置样式,jq的实例方法css在设置样式时就是调用的它,接下来分析一下源码. jQuery.extend({ ............................ st ...

  8. OutputCache属性详解(四)— SqlDependency

    目录 OutputCache概念学习 OutputCache属性详解(一) OutputCache属性详解(二) OutputCache属性详解(三) OutputCache属性详解(四)— SqlD ...

  9. ViewPager 详解(四)----自主实现滑动指示条

    前言:前面我们用了三篇的时间讲述了有关ViewPager的基础知识,到这篇就要进入点实际的了.在第三篇<ViewPager 详解(三)---PagerTabStrip与PagerTitleStr ...

随机推荐

  1. SQL Server-聚焦什么时候用OPTION(COMPILE)呢?

    前言 上一篇我们探讨了在静态语句中使用WHERE Column = @Param OR @Param IS NULL的问题,有对OPTION(COMPILE)的评论,那这节我们来探讨OPTION(CO ...

  2. 登录模块的进化史,带大家回顾java学习历程(二)

    接着前面的登录模块的进化史,带大家回顾java学习历程(一) 继续往下面讲 前面我们去实现登录功能,都是想着要完成这个功能,直接在处理实际业务的类中去开始写具体的代码一步步实现,也就是面向过程的编程. ...

  3. 如何在linux下录制terminal操作?

    相关包: ttyrec: ttyrec is a tty recorder. Recorded data can be played back with the included ttyplay co ...

  4. Angular整合zTree

    1 前提准备 1.1 新建一个angular4项目 参考博文:点击前往 1.2 去zTree官网下载zTree zTree官网:点击前往 三少使用的版本:点击前往 2 编程步骤 从打印出zTree对象 ...

  5. TCP/IP(六)应用层(DNS和HTTP协议)

    前言 到这一篇我已经把TCP/IP五层模型详细的说明了一遍,大体的从物理层到最上层的应用层做了一个大概的了解,其实总体学下来东西非常的多,我们需要经常的去系统性的去学习它.不然过一段时间就忘记了! 回 ...

  6. 整数n的全排列

    第一道用搜索码的.得纪念一下 #include <iostream> #include <cstdio> #include <cstring> #include & ...

  7. Monthly update for Dynamics 365 for Operation

    日期 标题, 类别 版本 描述 2017/8/22 Dyn 365 Fin and Ops, Ent ed July 2017 Plat Update 10 Category: Download   ...

  8. Servlet面试题归纳

    尊重原创:http://blog.csdn.net/caohaicheng/article/details/38116481 1.说一说Servlet生命周期 Servlet生命周期包括三部分: 初始 ...

  9. 20170723-Ioc与AOP

    Ioc与AOP 功能.语法.分类.原理.例子.补充(AOP-Ioc-DI) 1.AOP: ①功能体现:是拦截,过滤器: ②相关语法:借助特性语法作为切入点: ③实现方式分类:动态代理+静态织入: ④实 ...

  10. 教你搭建你自己的Git服务器

    http://lib.csdn.net/article/git/50086 导读 现在我们将要学习如何搭建 git 服务器,如何编写自定义的 Git 钩子来在特定的事件触发相应的动作(例如通知),或者 ...