css初级

Posted on Apr 14, 2019 By yuanfang

css基础

  1. text-align 文本对齐方式

  2. vertical-align – 只会对行内元素生效

  3. 垂直居中：
    单行文字： 父类设置 height:100px; text-align: center;line-height: 100px; 多行文字：利用 子类设置 display:table-cell;vertical-align: middle; 父类设置：text-align: center;display:table;

  4. 行高 line-height：行高 可以继承， 会与 父级字体大小有关，可以利用 em 或者 % 作为行高单位

  5. text-decoration: none; text-decoration: line-through;

  6. word-spacing (单词为标准，以空格区分) letter-spacing（以字母为标准） text-transform(大小写转变 )

  7. 背景 background :
    background-color (包括边框和内边距)
    background-image:url || none ;
    background-repeat:no-repeat;
    background-attachment:scroll || fixed;
    background-position: 长度 || 百分比 || center || left || top || botom

  8. 列表样式： list-style：list-style-type list-style-image list-style-position

  9. 盒子模型：
    • width max-width min-width height max-height max-height 对内容（ie不一样，ie是包括padding）的宽高设置，最大和最小宽高设置有兼容问题ie不支持 （doctype声明则会进行标准盒子模型解析） 哪些元素可以设置宽高：块级元素 和 可替换元素( 根据属性显示具体内容 如 img input textarea )
    • border-width border-style border-color border border-top
    • padding margin（margin值可为负值或者auto，padding不行）（开发之前一般会设置将默认的margin 设置为0， margin值设置为auto 则会水平居中， 垂直方向相邻两个外边剧都设置，会进行合并）
    • display ：inline block inline-block(呈现为行内元素，但是具有块级元素的属性值) none ； 内联元素之前有缝隙，是因为中间有换行，1种方式是去掉换行，2种方式设置外层div的font-size为0，内层自己在重新设置font-size 对于内联元素或者使用display设置成内联属性的： width和height不生效，padding和margin 左右生效，上下不生效

  10. float：left right none inherit ; 带有浮动的元素会变成块状元素
    浮动会脱离正常的标准流，但是会占据文档位置
    浮动副作用：1.父元素塌陷 2.临近元素出现异位 — 解决办法：1手动给父元素加高度 2.clear清除内部和外部浮动 3父元素加overflow 并结合 zoom:1使用 4.给父元素添加浮动

  11. position：static relative(可设置left、top等,注意设置right和bottom时候，坐标轴会发送相应变化) absolute(可设置left、top等) fixed(不受制于父元素，相对于窗口) inherit

  12. z-index

  13. 布局：行布局 width height margin:0 auto； line-height

css3基础

  1. 选择器：
    a > b 匹配元素（a）的第一层子元素（b）
    a + b 匹配某个元素后（a）的紧邻的元素（b）
    a ~ b 匹配某个元素（a）以后的兄弟元素（b）
    ::first-letter 首字母； ::first-line 首行； ::selection 用户选中样式； :target 目标（与a标签一起使用 <a href="#h1">）
    属性选择器（支持多重条件） div[class=”abc”] div[class^=”abc”] 以什么开头；
    div[class$=”abc”] 以什么结尾； div[class*=”abc”]包含什么的
    伪类选择器：
    1） :first-child :last-child :nth-child(n) —-n默认从1开始，可以是表达式 :nth-last-child(n)
    2） :first-of-type :last-of-type :nth-of-type(n) :nth-last-of-type(n)
    3） :only-child :only-of-type :empty contenteditable=”true” :not(选择器)
    4) :enabled :disabled :checked （lable标签的for属性）

  2. 样式
    box-shadow: inset x y size(不允许使用负值) 增强(可选) color , x y size color (可叠加，先写到在上面) ;
    text-shadow: x y size color ;
    border-radius: 左上 右上 右下 左下 ;
    background-size: x y (只设置一个值，另一个值默认auto) || contain（等比例缩小 来适应元素； cover（等比例放大，填满元素） ; 缩写 需要写在 background-position之后 加 / ，一般不缩写，因为兼容性不好，兼容性查找 http://caniuse.com/ background-origin: content-box padding-box border-box; （背景图像绘制区域）
    background-clip: content-box padding-box border-box; （背景绘制区域）

  3. 渐变 – 通过background-image来添加
    1) background-image: linear-gradient(to right, red, yellow, blue);
    方向： to right(90deg) , to left(270deg) , to bottom(180deg), to top(0deg) ，还可以是 角度 ，如 30deg ,支持负值
    2) background-image: repeating-linear-gradient(to right, red 0, yellow 10px);
    百叶窗：background-image: repeating-linear-gradient(30reg, red 0, red 10px , yellow 10px, yellow 20px); 3) background-image:radial-gradient(left center, red, yellow );
    background-image:radial-gradient(circle, red 50%, yellow 50%);

  4. 伪元素 ： after 和 before
    .box::after{ content:’猪 ‘; color:red; }

  5. box-sizing : content-box 或者 border-box; (默认是 content-box, border-box 会包括border和padding，但是不包括margin )

  6. 弹性布局 display: -webkit-box (旧版的，兼容性相对好点 ) -webkit-flex flex （新版的，兼容性相对差点），两者会有些区别：

    6.1：-webkit-box：

     1）父元素： 

     display:  -webkit-box ，设置后表示是一个弹性盒子，是针对里面元素来说；  
     -webkit-box-pack: start（左对齐） ||  center（居中对齐） ||  end（右对齐） ||  justify（分散对齐）  ;  弹性布局主轴（默认水平方向）对齐方式  
     -webkit-box-align: start（上对齐） ||  center（居中对齐） ||  end（下对齐） ||  baseline（基线对齐）|| stretch （默认值）  ;  弹性布局辅轴（默认垂直方向）对齐方式  
     -webkit-box-direction: normal    ||  reverse（反转）;  是否反转  
     -webkit-box-orient: horizontal（水平）  || vertical（纵）;  排列方式，注意这个是会影响主轴方向，而住轴方向的更改会改变对齐方式  

 2）子元素：  

     -webkit-box-size:1 ;  均分剩余宽度，记住是需要减去内容的剩余宽度（这个方向与上面的是指webkit-box-orient 有关）

    6.2： -webkit-flex flex：

     1）父元素：  

     display: flex ，设置后表示是一个弹性盒子，是针对里面元素来说；  
     -webkit-flex-direction: row(默认)  ||  row-reverse（水平方向，起点在右端）|| column （垂直方向，起点在上沿）|| column （垂直方向，起点在下沿）;  决定主轴方向  

     flex-shrink: 1(默认);  缩小比例，表示剩余空间是不足时都将等比例缩小，0 表示不参加收缩比例， 若没写该属性，则为1；  

     flex-grow: 0(默认) ; 扩展比率，剩余空间是正值的时，伸缩项目相对于伸缩容器里其他伸缩项目能分配到空间比例，若没写该属性，则为0，0代表不参与扩展  

     flex-wrap: nowrap | wrap（换行） | wrap-reverse （换行并反转）;---- 换行  

     justify-content: flex-start（左对齐） | flex-end（右对齐） | center（居中对齐） | space-between（两端对齐(之间的间隔相等)） | space-around（每个项目两侧的间隔相等）; ----主轴对齐方式  

     align-items: flex-start（起点对齐） | flex-end（终点对齐） | center（居中对齐） | baseline（基线对齐） | stretch（默认值(未设置高度或设为auto，将占满整个容器的高度)）; ----辅轴对齐方式  

     align-content （多行对齐方式）;  

 2）子元素： 
    
     flex:1 ;  均分宽度，记住是均分宽度（与内容无关，内容太多会折行）  

     flex-shrink: 1(默认);  缩小比例，表示剩余空间是不足时都将等比例缩小，0 表示不参加收缩比例， 若没写该属性，则为1；  

     flex-grow: 0(默认) ; 扩展比率，剩余空间是正值的时，伸缩项目相对于伸缩容器里其他伸缩项目能分配到空间比例，若没写该属性，则为0，0代表不参与扩展  

     align-self : auto | flex-start | flex-end | center | baseline | stretch;     -----允许单个项目有与其他项目不一样的对齐方式，该属性可能取6个值，除了auto，其他都与align-items属性完全一致。 可覆盖align-items属性， 默认值auto，表示继承父级元素的  

     order，定义项目的排列顺序。数值越小，排列越靠前，默认为0;  

     flex-basis: 100px;   ---再分配空间前，已经分得到的空间（最小宽度）  

 3）兼容性  

 解决UC、微信兼容性问题： 安卓平台的uc和微信，要加-webkit-  
 display: flex; display: -webkit-box;  
 flex: 1; -webkit-box-flex: 1; -moz-box-flex: 1;box-flex: 1;  
 其他也同理  align-items: center;-webkit-box-align: center; flex-direction: column; box-orient: vertical;   都要处理webkit、moz、原生

  7. -webkit-user-modify:
    read-only | read-write | read-write-plaintext-only 只读 | 内容可读写 | 内容可读写，但富粘贴的文本格式会丢失

  8. 变换 transform：
    transform: translate(x, y); 平移 translateX(200px) translateY(200px) translateZ(需要开启3d才能看到)
    transform:scale(2，0.2); 缩放，没有写方向，默认是 x和y ，注意是相对原始（给的宽高）大小
    transform:rotate(36deg); 旋转，没有写方向，默认是绕z轴
    transform:skew(36deg, 32deg); 斜切，没有写则默认x， skewX \ Y
    transform-origin: left top; (默认是center center); transform-origin: 20px 50px;
    transform-style: flat || preserve-3d; 开启3d效果，需要配合 景深一起使用才有效果，景深(值越小，代表离物体越近，则效果越大，一般用500-800之间)： perspective: 600px; (加到父类上) （永远先做translate，后做其他的如rotate）

  9. 过渡 transition： 
     transition: width 5s 2s ease-in-out, height 4s linear;   (可多个)  
 /*transition: 哪个属性动 运动在多长时间内完成 延迟时间 运动的类型;*/

    逐帧动画： transition: step(7) 5s;

  10. 动画animation：（transition一次动画，需要手动触发，animation多次动画，可以自己执行） 
     /* @keyframes duration | timing-function | delay |
   iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused mov;  
@keyframes mov{ 0%{}   50%{}   100%{}  }
  11. 移动端布局：
    1）移动端布局：
    1 纯粹的 移动端 不需要考虑任何的pc上的展示效果
    a 百分比 （不推荐使用）
    b rem (荐)
    c viewpoint (荐)
    d 无宽布局 （不是说永远都不给宽度）
    2 响应式（一套网站，兼容N多设备）
    2）viewpoint： 
    <meta name="viewport" id="viewport" content="width=device-width,initial-scale=1,user-scalable=1">

    3）ios专用：

    <meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes"> <!--是否进入webapp全屏模式-->
<meta name="format-detection" content="telephone=no" > <!--禁止iPhone把数字识别为电话-->
a {-webkit-tap-highlight-color:transparent;    }   <!--去掉a点击的黑色背景-->
html {-webkit-text-size-adjust: none;}   <!--禁用ihone中的safari中的字号自动调整-->

    4）新的单位：
    rem：the font size of the root element
    vw 、vh：view width 、view height 100为止

    5）iconfont： http://iconfont.cn/

    6）媒体查询：

    @media (min-width:800px)  and  (max-width:1028px) and (orientation : landscape)  { .box{width:300px; } }      //(orientation : portrait)
<link rel="stylesheet" href="style/pad.css" type="text/css" media="(min-width:768px)">

  12. sass:

    1）后缀名 scss （虽然有sass，但是一般用scss）
    2）sass common.scss a.css
    3) sass –watch common.scss(或者源文件夹):a.css(或者目标文件夹)
    4）注释 //不会被编译的注释 /* 会被编译的注释 */
    5）变量 $color_red: #e93b3d; 作用域类似于js， 变量计算时候，运算符前后必须有空格
    6）嵌套 标签嵌套直接写， 属性嵌套需要加冒号: ， @at-root{} 跳出到根 , &_ (替换父级符号)
    7）混合：声明 @mixin funname($opa:50){ } @mixin shadow($shadow…){ } //不确定传参 @include funname(10); 是调用 @mixin 所声明的东西
    8）继承： @extend .box;
    占位选择器： %: @extend %clearfix;
    %clearfix{ *zoom:1; &:after, &:before{ content: ‘’; display: table; } &:after{ clear: both; } }
    .abc{ width: 300px; @extend %clearfix; }
    9）字符串插值： #{变量名} 如： background: url(#{$sina}/a.jpg) left top no-repeat; 10）条件

    @for $i from $min through $max{
    .item_#{$i}{
    background-position: -($i - 1) * 20px 0;
    }
}
@mixin sj($fx:top,$size:10px,$color:red){
    @if ($fx == top) {
        border-color: transparent transparent $color transparent;
        border-style: dashed dashed solid dashed;
    }
    @else if($fx == right){
        border-color: transparent transparent transparent $color;
        border-style: dashed dashed dashed solid;
    }
    @else if($fx == bottom){
        border-color: $color transparent transparent transparent ;
        border-style: solid dashed dashed dashed ;
    }
    @else if($fx == left){
        border-color: transparent $color transparent transparent ;
        border-style: dashed solid dashed dashed ;
    }
    width: 0;
    height: 0;
    overflow: hidden;
    border-width: $size;
}
$icon_name:user,pass,checked,select;
@each $i in $icon_name{
.icon_#{$i}{
    width: 10px;
}