首页 > 其他 > 详细

我盆友的学习笔记,记得挺详细的 部分摘自博友

时间:2018-08-19 00:15:33      阅读:215      评论:0      收藏:0      [点我收藏+]

HTML5    CSS3   部分css属性或标签

1、 <!DOCTYPE   html>   文档类型声明,告诉浏览器如何渲染html

     <html lang="en"> 页面为什么语言

 

 

 

2、html5与html4有什么不同?

  头部声明;  

   语义化标签,更人性化,更生动;header  nav  section aside article footer address等

3、<meta charset="UTF-8"> 字符编码

  <meta http-equiv="X-UA-Compatible"   content="IE=edge,chrome=1"/>各种IE的兼容性设置      优先使用IE最新版和Chorme
      <meta name="viewport"   content="width=device-width,initial-scale=1,minmum-scale=1,maximum-scale=1,user-scalable=no"/>  创建一个虚拟的窗口    窗口宽度为设备宽度     初始缩放比例   最小缩放比例   最大缩放比例     是否允许缩放比例

  width=640(微信常见)   user-scalable=no,禁止缩放,默认是yes

5、 a,img{

    -webkit-touch-callout:none}  //禁止长按超链接或图片弹出菜单kk

  html,body{

    -webkit-user-select:none;

    user-select:none;}  //禁止选中文本

  button,input,optgroup,select,textarea{

    -webkit-appearance:none;}  //去掉webkit默认的表单样式    如果不去掉在IOS中不会改变样式

  a,button,input,optgroup,select,textarea{

    -webkit-tap-highlight-color:rgba(0,0,0,0)};//去掉a,input,和button点击时的蓝色外边框和灰色半透明背景; 浏览器支持IOS

6、 input::-webkit-input-placeholder{

    color:yellow;} //修改-webkit   placeholder样式

  input:focus::-webkit-input-placeholder{

    color: #foo} //input:focus 获得焦点时 placeholder样式

  input::-webkit-input-speach-button{

    display:none;}  //隐藏Android的语音输入按钮

7、 body{

    -webkit-text-size-adjust: 100% !important}//禁止IOS调整字体大小;

    默认就随着终端改变字体,如果body设成全局或者继承就会随着终端改变,不要设成全局或者继承的

  -webkit-text-size-adjust:none ; 禁用webkit内核浏览器文字调整大小

8、 audio音频   video视频   canvas画布   svg本地存储地理定位

 

  chrome/360极速版/苹果ios/搜狗浏览器    内核 webkit

  火狐内核 MOZ      兼容opera前缀 -o   兼容IE内核  -ms

9、sass/scss  预处理器,用于书写css样式,预编译

  继承: extend 

  使用sass时,继承是一个很不错的减少css重复代码的功能。继承可以让一个选择器继承另一个选择器所有的样式,并联合声明。

  方法: @extend 除了包含和群组以外的样式都已用来继承

10、sass

    后缀名: scss 和sass 两个功能一样、

    输出样式的风格有四种,默认为nested

        nested:嵌套缩进的css代码

        expanded:展开多行的css代码

        compact:简洁格式的css代码

        compressed: 压缩后的css代码

    变量以$开头    !default默认值

        如果在字符串中引用变量,则需要将变量名字在 #{}中

        默认变量只需在变量值后加上 !default

    嵌套中的&表示父元素选择器。

        css属性页可以嵌套(用的较少)

    混合器:@mixin     调用@include

    占位符选择器: %

        占位符选择器的优势在于声明后,如果不调用则不会产生类似。

        .text的多余css代码,占位选择器通过%标示来定义,也通过@extend来调用 

        %名字{样式}   调用 @extend %    

    运算:      Sass 中,运算只是其基本特性之一。sass做加法运算是可以不考虑参数带单位,但需要单位同一,加号可以不需要空格隔开;

          减法注意空格;       乘法只需一个乘数带单位(否则会出错),em/px/%等多种单位;   

          做除法,css中“/”已经作为一个符号,不会报错 。做为除法: 函数,变量,表达式的一部分,圆括号包裹,例width: (100px/2);

        做除法时两个都带单位时,得到的值没有单位。

              详细案例请参观博客:http://www.cnblogs.com/Medeor/p/4966952.html

        数字: 如1,2,13,10px   (如果带单位,单位需同一)

        字符串拼接(+): 

          p::before{

                 content: "hello" + -world ;

                font-family: sans- + "serif"; }

          输出结果:

          p::before{

              content: "hello-world";

              font-family:  sans-serif;}

        颜色: 如: blue    #04a3fg(分段计算,红绿蓝rgb)   rgba(255, 0,0,0,5);   

        布尔型:例 true ,false

        空值: 例 null 

        值列表: 用空格或逗号分开     nth-child(index)    nth-of-type(index)

   循环:

      $for  $i  from <start> through <end>   

 

      $for  $i  from <start> to <end>    区别:   to 和 through区别  包含最后一个值?     through包含

      用法:   $for  $i  from 1  to 3{

          .item-#{$i} {

              width: 2em*$i}

          }

      输出:   .item-1{ width: 2em}       .item-2{width: 4em}    .item-3{width: 6em}

       总结 $i 是变换的值     .item-${$i}#{1}    输出  .item-11      .item-21     .item-31    变换十位数

     @while循环

        用法:  

          $types: 3 ;  $type-width: 20px

          @while  $types >0{

            .while-#{$types}{

              width:  $type-width + $types;   (加号 拼接)

            }

            $types: $types-1;

          }

       输出结果:

          .while-3{ width: 23px}    .while-2{width: 22px}    .while-1{width: 21px}

     @each 循环

      遍历一个列表,从列表中取值;(数组或对象)

      循环指令的形式:  @each  $var  in  <list>

      $list: adam john wynn mason kuroir;//$list 是一个列表
      @mixin author-images { 
           @each $author in $list {
               .photo-#{$author} {
                      background: url("/images/avatars/#{$author}.png");}
          }
      }

     .author-bio {
          @include author-images;}

      输出:

        .author-bio .photo-adam {
            background: url("/images/avatars/adam.png"); }
        .author-bio .photo-john {
            background: url("/images/avatars/john.png"); }
        .author-bio .photo-wynn {
            background: url("/images/avatars/wynn.png"); }
        .author-bio .photo-mason {
            background: url("/images/avatars/mason.png"); }
        .author-bio .photo-kuroir {
            background: url("/images/avatars/kuroir.png"); }

11、CSS3动画

  过渡动画  transition: name duration easing delay

          (transition-name   transition-duration   transition-timing-function   transition-delay )

        name 动画的属性或样式(width,color),不写或设置为all   ,表示要过渡所有发生了改变的属性;过渡多个属性,属性与属性之间用逗号        隔开;

        duration:定义过渡效果执行时间   m/ms

        easing: 动画曲线     ease-out 由快到慢      linear:匀速(默认)   ease-in-out慢快慢     ease-in:由慢到快

    注意: transition 不要出现在hover里伪类

        例:  -webkit-transition:  width  1.5s  ease-in   0.5s(延迟执行)     超过两个时用all   

  animation关键帧动画

        animation-interation-count 元素动画的循环次数   默认值1; infinite无限循环

        animation-direction:  元素动画播放的方向,(是否允许反向播放); alternate动画播放在第偶数次向前播放,第奇数次反方向  

        @keyframes 关键帧,用于引出(创建)一个动画  @keyframes animationname {keyframes-selector {css-styles;}} 

                    @keyframes name1{ from{};to{};}   @keyframes name2{0%{}; 50%{}; 100%{}}

  css3中的动画框架:  animate.css

            使用方法:  <div class="animate   zoomIn">进入放大的动画</div>

            常用的动画类型:   bounce弹跳; flip 掷; flash闪现;  shake震动发抖,  swing秋千悬挂,    wobble摇摆摇晃;  ring环形;                       fadeIn淡入   fadeout淡出    rotate翻转

 

  

  transform:  translate() /scale() / skew()/ rotate() 主要对元素进行2D转换    translateX()   translateY()等  后面几个属性也一样

        transform-origin: x    y;    定义rotate旋转,skew倾斜和scale缩放中心点;

            x,y可以使具体数值/百分比/(left,top,right,bottom);

           默认在 元素的中心点上;    中心点的改变 对translate位移没有影响

  transform:  translate3d() / scale3d() / skew3d() / rotate3d() 3D转换  此时会开启硬件加速

        translate()位移,是占位的      scale() 缩放    skew()扭曲     rotate(60deg)旋转 单位 deg

  vertical-align: middle   控制文字和图片居中对齐的方法    注意: 一行中文字也有图片用定位做(对齐的基线默认 baseline,图片一般较大,需要下移一下)

      手机端要建立一个大盒子,宽度100%,高度 auto

      $list : red  blue  green  orange   #fff   #000;    background:nth($list,3)

  box-sizing: border-box   盒子的width和height 包含边框(content-box ==border-box)

  鼠标状态: cursor: pointer手的状态/ move可移动状态 / wait转圈状态(加载状态)

  box-shadow: x偏移   y偏移   模糊度   颜色   inset     (内阴影)

  相对单位:  rem  ,em;  

      区别: rem 相对于根元素html的字体大小。doc默认的是 16px;  html{ font-size: 625%;body{font-size: .14rem}}  谷歌不支持小于12px           的字体。  (不继承父元素的大小)                                         100px==1rem        不继承字体大小,先定义一个全局的

         em: 相对于父元素,且字体大小可以继承的。

  before 和 after伪类  

      在选择器前后定义样式或添加新元素

      选择器::before{ 

            content:"文字",

            display:table;  //其他css样式}

      选择器::after{

            content:"wenzi",

            display: table;  //其他css样式  }

  字体库:   网址: http://icomoon.io 

      字体模块   @font-face     把自定义的web字体,嵌入到你的网页中,当用户电脑上没有此种字体时,自动从网上下载。

      用法:     字体类型:  .woff()      .ttf和.otf     .eot(IE9only)      .ttf(True Type字体)和.otf(OpenType)    EOT (Embedded OpenType)

          @font-face{

              font-family: 字体名称(自定义),

              src: url("自定义字体路径,相对/绝对"),

                ,url(‘font.eot‘); /* IE9 */     //IE9只支持  .eot格式的字体}

           注:Internet Explorer 9 只支持 .eot 类型的字体, Firefox, Chrome, Safari, 和 Opera 支持 .ttf 与.otf 两种类型字体.

             Internet Explorer 9+, Firefox, Chrome, Safari, 和 Opera 支持 WOFF (Web Open Font Format) 字体.

               Internet Explorer 8 及更早IE版本不支持@font-face 规则.

          .woff  是web中最佳格式         .eot是IE专用字体       .svg是基于svg字体渲染的一种格式 

         字体的调用:  h1{font-famify: "字体名字"}

14、弹性盒(伸缩盒)

    由于老伸缩盒(09年 ),与新伸缩盒差异大,只说新盒子(11年);

    向内挤压:   -webkit-box-sizing: border-box

      新盒子::

        display: -webkit-flex

        flex-direction: row | row-reverse | column | column-reverse   排列方式

        flex:none | <‘ flex-grow ‘> <‘ flex-shrink >‘? || <‘ flex-basis ‘>

          -webkit-flex-grow: 分配父元素剩余空间扩展比率

          flex-sharink: 按比例收缩比率

          flex-basis: 伸缩基准率

          flex-basis: length | percentage | auto默认 | content内容自动计算宽度

          flex-flow:<‘ flex-direction ‘> || <‘ flex-wrap ‘>  子元素的排列方式 | 是否多行

        justify-content: flex-start | flex-end | center | space-between | space-around

            space-between:第一个元素靠左边界,第二个元素靠右边界,中间默认是平均分配

            space-around: 两两之间的空白空间相等,同时第一个元素的空间以及最后一个元素的空间为其他空白空间 的一半

        align-items:  flex-start | flex-end | center | baseline | stretch

          stretch :  使项目边距盒的尺寸,接近所在行的尺寸,但同时会遵照  min/max- width|height 属性的限制

    弹性盒子是否换行:

      flex-wrap: nowrap | wrap | wrap-reverse   

        默认是nowrap容器为单行,该情况下子项可以能会溢出容器

        wrap: 定义flex容器为多行,子项内容可能会断行

        wrap-reverse: 反转 wrap 排列

        说明:该属性控制是单行或是多行,同时横轴的方向决定了新行堆叠的方向

    

    

 

    l    

 

  

        

    

  

  

  

      

        

  

  

              

  

  

 

我盆友的学习笔记,记得挺详细的 部分摘自博友

原文:https://www.cnblogs.com/baota/p/6506541.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!