前端总结·基础篇·CSS

时间:2022-04-03 19:55:13
前端总结·基础篇·CSS
1 常用重置+重置插件(Normalize.css,IE8+)
* {box-sizing:border-box;}  /* IE8+ */body {margin:0;}  /* 去除边距 */ul {margin:0;padding-left:0;}  /* 去除边距和左填充 */li {list-style-type:none;}  /* 去除列表的圆点 */a {text-decoration:none;}  /* 去除下划线 */
2 浏览器前缀
{
   transition: width 2s;
    -moz-transition: width 2s;  /* Firefox 4 */
    -webkit-transition: width 2s;   /* Safari 和 Chrome */
    -o-transition: width 2s;    /* Opera */
}
3 兼容性
为针对不同IE浏览器进行样式修改,可以使用css hack
指定版本:IE6(_),IE7(+),IE8(/),IE9(:root 9)
指定范围:IE6-7(*),IE8-10(\0),IE9-10(\9\0),IE All(\9)
除了手写IE兼容性,你也可以直接使用IE9.js自动处理IE6-9的bug。
IE6-9支持的支持圆角、背景渐变、边框图片、盒阴影、rgba等可视化的功能可以用CSS3PIE
IE6-8支持媒体查询可以使用Respond.js
IE6-7支持CSS3 box-sizing可以使用borderBoxModel.js
IE6-8支持:first-child等高级CSS选择符,可以用selectivizr
让IE8及以下的浏览器支持H5新元素,可以用html5shiv.js
4 指定渲染模式
<meta http-equiv="X-UA-Compatible" content="IE=7" />  // IE8-9使用IE7模式渲染
<meta http-equiv="X-UA-Compatible" content="IE=8" />  // IE8-9使用IE8模式渲染
<meta http-equiv="X-UA-Compatible" content="edge" />  // IE8-9使用IE最高版模式渲染
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  // 安装GCF之后,IE使用chrome模式渲染
5 CSS库
为了方便快速的再次实现需要的效果,把常用的功能封装起来。通过设置class的方式,使用封装好的css库。
CSS3悬浮效果(Hover.CSS
提示(HINT.css
进度(progress.js
加载动画(css-loaders
按钮(Buttons
预处理(less,sass
界面(Bootstrap
 
 
1  路径:
          1 ../ 上一级目录
          2 ./  当前目录
          3  /   根目录  
 
2  float+margin-布局
双飞翼布局比圣杯布局多使用了1个div,
少用大致4个css属性(圣杯布局container的 padding-left和padding-right这2个属性,
加上左右两个div用相对布局position: relative及对应的right和left共4个属性,;
而双飞翼布局子div里用margin-left和margin-right共2个属性
,比圣杯布局思路更直接和简洁一点。
简单说起来就是:双飞翼布局比圣杯布局多创建了一个div,但不用相对布局了。
 
3  clear:清除浮动
       eg:    .clear{ zoom: 1;}
            .clear:after { content:'';display:block;clear:both;}
            .fl{ float:left;}
            .fr{ float:right;}
      浮动:1.overflow    将父辈元素的overflow设置为hidden
            2.after伪类      对于元素after伪类进行设置
        
4  position与dispay 
         1.display:none;       // 会清除原本占用的布局空间。
         2.visibility:hidden;     // 隐藏元素
         3.display:none;         // 隐藏元素并清除原本占用的布局空间
(1)清除布局空间的定位(absolute fixed)
   fixed 偏移量相当视口的。固定定位(fixed)不会随着鼠标的滚动而改变位置。他真的是固定屏幕的某一个位置的,比较常见的是网页右下角的广告。
   absolute 偏移相当于最近的一段podition 不是static的祖先元素。绝对定位(absolute)的定位原点是非默认定位(static)的父节点。可以是absolute fixed relative,如果父节点没有这些,那定位原点就是body了。使用了这两种定位中的一种,元素原本占用的布局空间将会消失(脱离文档流)。下面是绝对定位(absolute)的一个例子。左图是默认布局,右图是使用绝对定位(absolute)之后的(元素原本的布局空间被清除)。
(2)留布局空间的定位(relative)
   元素原本占用的布局空间依旧保留在文档流中。 
   reltive偏移相当于原先在文档中的位置。相对定位(relative)相对原有位置定位。把上例中的absolute改成relative即可看到效果。使用这种方法,元素原本占用的布局会保留。
(3)默认定位:默认定位为static。
(4)巧用relative+absolute定位 父相子绝
   父级采用relative,子代采用absolute。则子代的定位原点变为父级元素的左上角。    
 
5 居中
(1)水平居中
   a. text-align:center
     .parent {width: 500px;height: 100px;border: 1px solid #ddd;text-align: center;}.child {display: inline-block;width: 100px;}<div class="parent"><span          class="child">123</span> </div>
     该方法可以水平居中块级元素中的行内元素,如`inline`,`inline-block`;
     对于块级元素中的块级元素,只会让子元素中的内容居中,子元素仍然是左对齐,如上述例子中span改成`display:block`,则child会左对齐,其中的文字会         相对于span居中。
 b. margin:0 auto
    .parent {width: 500px;height: 100px;border: 1px solid #ddd;}.child {display: block;margin:0 auto;width: 100px;}<div class="parent"><span  class="child">123</span></div>
    对于已知width的块级元素,可以用`margin:0 auto`来设置水平居中。
 
(2)垂直居中
   a. line-height
      对于已知height的单行文本,设置line-height=height的值,即可实现垂直居中。
   b. vertical-align: middle
      模拟成表格属性来实现居中。
     .parent {display: table-cell; //模拟表格属性vertical-align: middle;text-align: center;width: 500px;height: 100px;border: 1px solid #ddd;}.
      child {display: inline-block;width: 100px;}
     <div class="parent"><span class="child">123</span></div>
   c. position:absolute + translate
     对于height和width未知的元素可以采用该方法
         .parent {position: relative;width: 500px;height: 100px;border: 1px solid #ddd;}.
        child {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: #ddd;}
       <div class="parent"><span class="child">123<br>123<br>123</span></div>
 (3) 水平居中
        1.text-align:center             水平居中的块级元素的行内元素 inline inline-block
        2.margin:auto                   对已知的width块级元素
 
6  垂直矩阵
        1.line-height                   单行文本
        2.vertical-algin:middle            表格
        3.position:absolute+translate   对height,width未知的元素采用该方法
        4.flex布局                      多个因素
 
7  行高
        1.line-height            在文本行中垂直居中
        2.vertical-align        (1)top     按顶线对齐
                                        (2)bottom  按底线对齐
                                        (3)middle  文字居中
                                        (4)..px    按数字                
8  margin-外边距
   垂直方向的margin会合并,水平方向的不会。实际显示的margin是两者中较大的那个
         1.margin:0 auto  (对已知的width块级元素,实现水平居中等功能)
         2.margin:上外    右外    下外  左外
         3.margin:上外    左右外  下外
         4.margin:上下外  左下外
         5.margin:上下左右外
 
9  padding-内边距
 
    padding:1px 2px 1px 2px;(top/right/bottom/left)
         1.padding:上内    右内    下内  左内
         2.padding:上内    左右内  下内
         3.padding:上下内  左右内  
         4.padding:上下左右内
 
10  border
       outline和border类似,但是不占用布局空间。
 
     border-image:url() 30 30 stretch;(round为边框重复,stretch为边框拉伸)
 
         border:1px solid rgba(——,——,——,透明度)     
 
11  border-radius-圆角  
   border-radius: 10px 0 10px 0; //设置圆角(四个值分别为top-left、top-right、bottom-right和bottom-left)   
         1.border-radius:左上      右上       右下    左下
         2.border-radius:左上      右上右下   左下
         3.border-radius:左上右上  右下左下
         4.border-radius:左上右上右下左下
         1.圆    border-radius(100%)
         2.半圆  border-radius(10px 0  0 10px)
         3.扇形  border-radius(0  0 0 10px)
         4.椭圆  border-radius(20px 40px)  
 
 
12  list-列表与表格
         1.list-style-type     cellspacing border
                             合并边框:border-collapse:collapse
         2.list-style-image
         3.list-style-position
 
13  text-文本样式
     @font-face用来设置自定义字体
         1.text-algin        水平对齐方式
         2.text-indent       文本缩进
         3.line-height       行间距
         4.text-decoration
 
14  word-文字折行
          1.word-wrap:    文字溢出
          2.word-break:   进行字母级截断
          3.white:space:      
 
15  input   
          1.aufocus          自动获取焦点
          2.requred
          3.placehoder
          4.pattern          正则表达式
          5.height/width     只适用于image
 
16  overflow
          1.visble 滚动条
          2.hidden
          3.scroll:滚动条显示
          4.auto: 滚动条自动显示   
 
17  box-shadow-阴影
     opacity: .5;  // 设置默认透明度为0.5
         box-shadow:
 
18  background-背景属性
制作精灵图(sprite)可以用,
然后将元素的width和height设置成小图的大小。
background:red url(laughcry.gif) repeat top left;
 多背景:(-image:url(bg.jpg),url(dog.jpg))定位源(-origin:content-box/padding-box/border-box)显示区域(-clip:content-box;)和尺寸(-size(80px 60px))   
 
    1.三种写法:
                     (1)image、
           (2)repeat、
                     (3)position、
                     (4)color(理解)
      2.background:url(img/..) no-repeat  颜色  (10px 10px)
                                             repeat                      x        y
           1.背景颜色
           2.渐变色背景
           3.背景与属性
           4.base64和性能优化
            5.多分辨流适配  
 
19  linear-gradient-渐变    
     background:linear-gradient(red,blue,green)
    * background:linear-gradient(to right,red 10%,blue 50%,green 70%)
    * background:linear-gradient(rgba(220,220,220,0),rgba(220,220,220,1))
 
  默认为从上到下渐变,to right(前缀写法中皆为left)
  可以设置从左到右渐变,to bottom right
  则对角线渐变(前缀写法中webkit为left top),
  180deg则可以设置按照角度渐变;
 
         linear-gradient(方向,开始的颜色,结束的颜色)
         -moz-linear-gradient(top,red,yellow);
         -webkit-linear-gradient(top,red,yellow);
         -ms-linear-gradient(top,red,yellow);
         linear-gradient(top,red,yellow)
         -ms-fliter:“progid:DXImageTransform.Microsoft.gradient(enabled='false',
            startColorstr=red, endColorstr=yellow)”;
 
20  尺寸:  
            1.百分比
            2.rem        html的font-size
            3.em         父元素的flow-size
            4.盒子                    
 
21  Z-index  
         1.Z顺序  值大的覆盖值小的
         2.auto
         3.<interger>整数值
         4.inherit    
     
22  resize(notIE)(CSS3)
   定义用户是否可调整当前元素的边框大小。
    resize: horizontal(水平)/vertical(垂直)/both/none/inherit;
 
23 分栏(column)(IE10+ notOperaMini)(CSS3)
    column-count: 3;  /* 设定需要分几栏 */
    column-gap: 20px;  /* 设定两栏间隔 */
 
24 滤镜(filter)(notIE,-webkit-)
 
25 自定义鼠标指针(cursor)
   cursor:pointer/help/wait/text/move/crosshair;
 
26 @keyframe-动画
   定义动画可以用from-to的两个定点形式,也可用百分比(0%、50%、100%)的多个定点形式
     animation: toRight 5s;
     transition: width 2s;  /* 只需添加这一条 */
a.transform    
    1)translate                   
       translate(x,y)   transformX(n) translateY(n)  translateZ(n) translate3d
    2)rotate                         
       rotateX()  rotateY()  rotateZ() rotatae3d()
    3)shew
    4)scale                         
        scaleX() scaleY() scaleZ() scale3d()
    5)matrix
    6)transform-style:preserve-3d  matrix3d(n,n,n,n,....,n)
b.transform-origin     
   (1)x-axis                       
       X的值  left  center  right   length   % 
   (2)y-axis                       
       Y的值  top   center  bottom  length   %
   (3)z-axis                       
       Z的值  length
3.background:         
    (1)liner-gradient                         
    (2)radical-gradient
4.transition           
    (1)transition-property:   none / all  / property(与动画里的名称可以取一样)
    (2)transition-duration:
    (3)transition-delay:
    (4)transition-timing-function    linear          匀速
                                                                                      ease            慢-快-慢(moren)
                                                                                      ease-in         慢开始
                                                                                      ease-out        慢结束
                                                                                      ease-in-out     慢速开始和结束
                                               
 
27 移动端

(1)视口(viewport)

   <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
     width=device-width  // 把页面宽设置成设备一样initial-scale=1.0  // 初始缩放为1.0
     user-scalable=no  // 不允许用户缩放(此处有坑,有时会无效)
(2)媒体查询(media query)
   媒体查询来根据不同宽度的设备显示不同的布局。
(3)相对字体大小(rem/em)
      rem是相对于根字体的大小,em是相对于父级的字体大小