CSS/CSS3

引入方式

行内式 内联样式表 少用

<标签 style="属性: 值; 属性: 值; ">
</标签>

内嵌式 内部样式表 置于head内 多用

  <style type="text/css ">
    选择器 {
      属性: 值;
  }
  </style>

外链式 外部样式表 新建css文件链接HTML文件放于head内 最多用

<link rel="stylesheet " type="text/css " href="css路径 ">

---

选择器

标签选择器： 选择器=标签 选出所有相同标签 常用
类选择器： 选择器=.+类名 选出一个及以上标签 最常用
ID选择器： 选择器=#+ID名 选择一个标签
通配符选择器： 选择器=* 能选择所有标签
后代选择器： 选择器=父级标签 子级标签 常用
子元素选择器： 选择器=父级标签>子及标签 少用
交集选择器： 选择器=标签选择器+类选择器 少用
并集选择器： 选择器=标签，标签 常用
链接伪类选择器： 选择器=a:link（未访问的链接）/a:visited（已访问的链接）/a:hover（鼠标移动到链接上）/a:active（选定的链接） 顺序不能颠倒 常用
属性选择器：
选择器=标签[属性]，
选择器=标签[属性=“值”]（选择具有属性且含有值的标签），
选择器=标签[属性^=“值”]（选择具有属性且以值开头的标签），
选择器=标签[属性$=“值”]（选择具有属性且以值结尾的标签）,
选择器=标签[属性*=“值”]（选择具有属性且含有值的标签）
结构伪类选择器：
选择器=标签:fist-child（选择父元素中第一个子元素），
选择器=标签:last-child（选择父元素中最后一个子元素），
选择器=标签:nth-child（n）（选择父元素中第n个子元素，n可为even（偶数）或odd（奇数）以及公式），
选择器=标签:nth-last-child（n）（选择父元素中倒数第n个子元素，n可为even（偶数）或odd（奇数）以及公式），
选择器=标签:fist-of-type（指定类型第一个），
选择器=标签:last-of-type（指定类型最后一个），
选择器=标签:nth-of-type（n）（指定类型第n个）
选择器=标签:focus（获取焦点，常用于表单）
伪元素选择器：
选择器=标签::before（在元素内部的前面插入内容），
选择器=标签::after（在元素内部的后面插入内容）（content：“内容”;） （该选择器会创建行内元素，在dom中看不到创建元素）

---

标签显示模式

块级元素：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li> 独占一行，宽高内外边距可自定义，宽度默认容器100%，可放行内或块级元素 文字类块级标签内不能包含块级标签
行内元素：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span> 一行多个，宽高设置无效，宽度为本身内容宽度，只能容纳文本或其他行内元素 链接里不能加链接
行内块元素：<img/>、<input/>、<td> 一行多个，相邻行内或行内块元素有空白缝隙，宽高内外边距可自定义，宽度为本身内容宽度
显示模式转换：块转行内：display:inline;行内转块：display:block;块、行内转行内块：display:inline-block;（float默认转换）（绝对定位及固定定位默认转换）

水平居中

文本，span标签，a标签，input标签，img标签水平居中：text-align：center;（给父元素添加）
div标签，p标签，h（大盒子）水平居中：margin：0 auto;（元素本身添加）

---

font字体

字体大小：font-size:数字+px;
字体类型：font-family:"字体名称"，"字体名称";
字体粗细：font-weight:normal（不加粗）/bold（粗体）/100-900（400=normal，700=bold）;
字体风格：font-style：normal/italic（倾斜）;
字体综合性写法：font：font-size font-family; size和family必写

---

外观属性

文本颜色：color：blue/#ffffff/rgb（255,255,255）;
字符间距：letter-spacing: 数字+px/em;
行间距：line-height：数字+px/em/%;
文本水平对齐方式：text-align:left/center/right;
首行文本缩进：text-indent：数字+em/px;
文本装饰：text-decoration：none（取消下划线）/underline（下划线）/overline（上划线）/line-through（删除线）;
文本阴影：text-shadow：h-shadow（必须，水平偏移量，可为负） v-shadow（必须，垂直偏移量，可为负） blur（可选，模糊度） color（可选，阴影颜色）;阴影可叠加，每组阴影用逗号隔开

---

css背景

背景颜色：background-color：颜色值;
背景渐变：background：-webkit-linear-gradient（起始方向（默认从上到下），颜色1，颜色2，...）;（起始方向：left/left top，必须加浏览器私有前缀）
背景渐变：background-image：linear-gradient（起始方向（默认从上到下），颜色1，颜色2，...）;（起始方向：left/left top，必须加浏览器私有前缀，透明：transparent）
背景图片：background-img：url（url地址）;
背景平铺：background-repeat：repeat（默认xy平铺）/no-repeat（不平铺）/repeat-x（横向平铺）repeat-y（纵向平铺）;
背景位置：background-position：x坐标 y坐标/top/bottom/left/right/center（上下左右居中）;
背景附着：background-attachment：scroll（背景随对象内容滚动）/fixed（背景固定）;
背景透明：background：rgba(0,0,0,0~1);
背景缩放：background-size：数字+px/数字+%（宽度） 数字+px/数字+%（高度）;（完全覆盖盒子：cover，宽高等比例拉伸宽或高适应盒子：contain）
背景综合性写法：background：color（颜色） img（图片） repeat（平铺） attachment（附着） position（位置）; -->

---

三大特性

层叠性： 样式冲突后面样式层叠掉前面样式 样式不冲突不会重叠
继承性： 子标签继承父标签样式 text-，font-，line-，color
优先级： 权重计算公式：继承或者*=0,0,0,0，元素，伪元素=0,0,0,1，类，伪类,结构伪类=0,0,1,0，id=0,1,0,0，行内样式=1,0,0,0，!important在值后面放置=∞ 权重叠加：0,0,0,1+0,0,0,1=0,0,0,2

---

标签显示模式

块级元素： 一行显示一个 宽高，内外边距可设置 默认宽度为容器100% 只能容行内或块级元素 div p h ol dl dt table
行内元素： 一行显示多个 宽高设置无效 默认大小是内容大小 水平方向margin和padding有效；垂直方向margin和padding无效
只能容文本或行内元素 span a u b i strong
行内块元素： 一行可放多个行内块元素 宽高，内外边距均可控 默认宽度是其本身内容宽度 img input td

---

行高

从上到下：顶线，中线，基线，底线 行高：两行文字基线之间的距离，上距离+内容高度+下距离

---

盒子模型

边框：border/内边距：padding/外边距：margin
边框宽度：border-top/bottom/left/right-width：数字+px;
边框样式：border-top/bottom/left/right-style：none（无边框）/solid（实线）/dashed（虚线）dotted（点线）;
边框颜色：border-top/bottom/left/right-color：颜色值;
边框综合性写法：border-top/bottom/left/right：width（宽度） style（样式） color（颜色）;
边框圆角：border-radius：百分比/数字+px（左上） 百分比/数字+px（右上） 百分比/数字+px（右下） 百分比/数字+px（左下）;
**边框左/右上/下圆角：**border-top/bottom-left/right-radius：百分比/数字+px;
边框重叠：border-collapse：collapse（合并）;
盒子阴影：box-shadow：h-shadow（水平阴影） v-shadow（垂直阴影） blur（模糊距离） spread（阴影尺寸） color（阴影颜色） inset（外部阴影（outset）改为内部阴影）;

---

塌陷

垂直外边距合并：相邻垂直盒子外边距塌陷而不会相加
嵌套块元素垂直外边距合并：嵌套块元素父级没有上外边距及边框则会与子元素上外边距塌陷
解决办法：可为父元素添加padding-top或border-top或overflow: hidden;或父元素转换成行内块或父元素添加浮动;

---

BFC盒子

BFC盒子特点：解决浮动和塌陷问题
html标签，浮动，行内块，overflow属性取值都是BFC盒子

---

盒子模型布局优先级

width>padding>margin

---

CSS布局三种机制

普通流：块级元素独占一行，从上向下排列 | 常用：div，hr，p，h1-h6，ul，ol，dl，form，table 行内元素按照从左到右排列，碰到父元素边缘自动换行 | 常用：span，a，i，em等
浮动：float：none（默认不浮动）/left（左浮动）/right（右浮动）;让盒子从普通流中浮起来使多个块级盒子一行显示 | 改变display属性变成类似行内块但浮动元素之间没有缝隙
清除浮动：clear：both（清除左右两侧浮动影响）/left（清除左侧浮动影响）/right（清除右侧浮动影响）;（父级有时不方便写高度但是可用清除浮动自动检测子级高度）
清除浮动-额外标签法：在浮动元素末尾添加一个空标签，<div style="clear：both "></div>（少用）
清除浮动-父级添加overflow方法：给父级选择器添加overflow：hidden/auto加滚动条/scroll加两个滚动条;（代码简洁但无法显示溢出）
**清除浮动-使用after伪元素：**使用时调用以下css选择器

    .clearfix:after {
    		content: '';
    		display: block;
    		height: 0;
    		visibility: hidden;
    		clear: both;
        }
    .clearfix{
    	*zoom: 1; （IE6，7清除浮动）
    }

清除浮动-使用双伪元素：使用时调用以下css选择器

    .clearfix:before,
    .clearfix:after {
    	content: '';
    	display: table;
    }
    .clearfix:after {
    	clear: both;
    }
    .clearfix {
    	*zoom: 1;（IE6，7清除浮动）
    }
     -->

---

定位

先设置定位模式后设置偏移值
定位模式：position：static（静态定位）/relative（相对定位，不脱标）/absolute（绝对定位，脱标）/fixed（固定定位，脱标）;
偏移值：top/bottom/left/right: 数字+px;
堆叠顺序：z-index：数字;（只能应用于相对定位，绝对定位，固定定位，数字越大越靠上）

---

元素显示

溢出滚动显示：overflow：scroll;（总是显示滚动条）（不用）
溢出滚动显示：overflow：auto;（不超出不显示滚动条）（不用）
溢出隐藏：overflow：hidden;（盒子超出部分隐藏）（重点）
显示：visibility：visible;（少用）
隐藏：visibility：hidden;（隐藏占位）（少用）
显示：display：block;（重点）
隐藏：display：none;（隐藏后不占位）（重点）

---

溢出文字隐藏

强制一行显示：white-space：normal（默认自动换行）/nowrap（强制一行内显示，除非br）;
超出部分省略号替代：text-overflow：clip（超出部分裁切）ellipsis（超出部分省略号替代）;

---

鼠标样式

默认：cursor：default;
小手：cursor：pointer;（重点）
移动：cursor：move;
文本：cursor：text;
禁止：cursor：not-allowed;

---

轮廓线

取消轮廓线：outline：0/none;

---

元素透明度

透明度：opacity：0-1;（1表示完全不透明，0表示完全透明，元素包含里面的内容）

---

文本域防止拖拽

resize：none;

---

垂直对齐

垂直对齐：vertical-align：baseline（默认基线）/top（顶线）/middle（中线）/bottom（底线）;（只针对行内或行内块，通常用来控制图片/表单与文字，文本框和表单按钮，input和img的对齐，div文本框贴顶，使用line-height让img标签垂直居中问题）图片底侧有空白缝隙，添加除基线之外的对齐可去除

---

LOGO优化

使用h1提权，h1里加文字，隐藏文字使用text-indent: -999px;然后overflow: hidden;溢出隐藏或者使用font-size: 0;隐藏文字，最后添加一个title

---

过渡

过渡：transition: 过渡属性 花费时间 ease（匀减速，默认）/linear（匀速）/ease-in（加速）/ease-out（减速）ease-in-out（先加速后减速）运动曲线 开始时间;（时间：数字+s，多组过渡属性用逗号隔开属性值，过渡属性可写all或transform，过渡写到本身上）

---

2D转换

移动：transform: translate(x, y)/translateX(n)/translateY(n);（不会影响其他元素，对行内标签没有效果，移动单位百分比参照自身）
旋转：transform: rotate(数字+deg);
转换中心点：transform-origin: x y;（可跟方位名词或者像素）
缩放：transform: scale(x,y);（xy写数字不写单位指倍数，单个数字指宽高倍数，缩放不会影响其他元素且可设置缩放中心点）
综合性写法：transform: translate（x,y） rotate（数字+deg） scale（x,y）;（有顺序问题，位移写在最前面）

---

3D转换

移动：translform: translateX(数字+px)/translateY(数字+px)translateZ(数字+px)/translate3d(数字+px,数字+px,数字+px);3d:（x，y，z）
透视：perspective: 数字+px;（取值在800-1200，透视越大物体越小，添加给父级）
旋转：transform: rotateX(数字+deg)/rotateY(数字+deg)/rotateZ(数字+deg);（旋转后会改变轴向）
缩放：transform: scaleX(倍数)/scaleY(倍数)/scaleZ(倍数)/scale3d(x, y, z);（xyz写数字不写单位指倍数，z轴缩放必须开启3D空间，单个数字指宽高倍数，缩放不会影响其他元素且可设置缩放中心点）
综合性写法：transform: rotate3d（x,y,z,数字+deg）;（xyz仅能为0（否）或1（是），数字+deg为确认的坐标旋转度数）
3D空间：transform-style: flat（子元素默认不开启空间）/preserve-3d（子元素开启空间）;（写给父盒子影响子盒子，必用）

---

动画

定义动画：

     @keyframes 动画名称{
         0%/from{
             属性：值;
         }
         100%/to{
             属性：值;
         }
     }

调用动画：
动画名称：animation-name: 动画名称;
动画时长：animation-duration: 数字+s;
速度曲线：animation-timing-function: ease（默认先慢中快后慢）/linear（匀速）/ease-in（低速开始）/ease-out（低速结束）/ease-in-out（低速开始和结束）/steps(数字)（逐帧动画）;
延迟时间：animation-delay: 数字+s;
重复次数：animation-iteration-count：数字/infinite（无限循环）;
动画执行方向：animation-direction: alternate（反方向）;
结束时状态：animation-fill-mode: forwards（结束状态）/backwards（起始状态）;
暂停动画：animation-play-state: running（默认）/paused（暂停）;（配合:hover使用）
综合性写法：animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画执行方向 结束时状态;
透明度：opacity: 数字;（最大为1）

---

浏览器私有前缀

firefox前缀：-moz-
IE前缀：-ms-
safari、chrome前缀：-webkit-
Opera前缀：-o-

---

特殊样式

css3盒子模型：box-sizing：border-box;（padding和border不会撑大盒子）
传统盒子模型：box-sizing：content-box;
清除点击高亮：tap-highlight-color：transparent;
去除iOS默认按钮和输入框自定义样式：appearance：none;
禁用长按页面弹出菜单：touch-callout：none;

---

流式布局（单独制作页面）

盒子宽度使用百分比
最大宽/高度： max-weight/height
最小宽/高度： min-weight/height

---

flex（弹性/伸缩）布局（单独制作页面）

主轴默认x轴，侧轴默认y轴
父级设置flex布局（前提）：display：flex;
设置主轴方向：flex-direction：row（从左到右）/row-reverse（从右到左）/column（从上到下）/column-reverse（从下到上）;
设置主轴上子元素排列方式：justify-content：flex-start（默认从头部开始）/flex-end（从尾部开始）/center（主轴居中对齐）/space-around（平分剩余空间）/space-between（先两边贴边再平分剩余空间，重要）;
设置子元素换行：flex-wrap：nowrap（默认不换行）/wrap（换行）;
设置侧轴子元素排列方式（多行，在父级上）：align-content：flex-start（默认在侧轴头部开始排列）/flex-end（在侧轴尾部开始排列）/center（侧轴中间显示）/space-around（子项在侧轴平分剩余空间）/space-between（子项先两边贴边再平分剩余空间）/stretch（子项元素高度平分父元素高度）;
设置侧轴子元素排列方式（单行，在父级上）：align-items：flex-start（默认从上到下）/flex-end（从下到上）/center（垂直居中）/stretch（拉伸，父级没有高度）;
复合属性：flex-flow：主轴方向 子元素换行;
父盒子设为flex布局，子元素float、clear和vertical-align属性失效
控制子项在侧轴上排列方式（在子级上）：align-self：auto（默认继承父元素（单行）排列方式）/stretch（没有父元素）/flex-start（默认从上到下）/flex-end（从下到上）/center（垂直居中）/stretch（拉伸，父级没有高度）;
子项分配剩余空间份数：flex：数字/百分比 ;
子元素排序：order：数字（默认为0）;（数值越小越靠前）

---

rem布局

em相对于父元素字体大小，rem相对于html元素字体大小，htnl标签字体大小根据视口宽度1/10
媒体查询：@media all（用于所有设备）/print（打印机和打印预览）/screen（屏幕）/speech（阅读器） and（且）/not（非，省略）/only（指定媒体类型，省略） （width/min-width/max-width：数字+px）{
标签{
属性：值;
}
}
行内式：-
**技术方案1：**less+媒体查询+rem
**技术方案2（推荐）：**flexible.js+rem（使用flexible.js导入html内代替媒体查询）

---

安装less布局

首先安装node.js 检测node.js是否安装成功
使用cmd命令（win+r打开运行输入cmd）输入“node -v”查看版本
基于node.js在线安装less，使用cmd命令“npm install -g less”即可
检测less是否安装成功，使用cmd命令“lessc -v”查看版本

---

使用less

新建less后缀文件
新建变量：@变量名：值;
使用变量：

    选择器{
        属性：@变量名;
    }

样式文件导入样式文件：@import ‘文件路径’;（less文件导入less文件可省略后缀名）
**嵌套：**子元素样式可以直接写到父元素里，遇见交集、伪类、伪元素选择器则内层选择器前加&赋予父选择器自身或伪类意义
**运算：**支持加减乘除（+ - * /）运算符左右两侧必须空格隔开，两个数值参与运算以第一个数值单位为准，除法添加小括号或除号前加点。
修改css导出文件位置：在less插件的settings.json中编辑添加

"less.compile": {
   "out": "../css/"
}

或在less文件内添加注释//out: 路径指定导出位置
在less文件内添加注释//out: false禁止导出

---

vw/vh开发（代替rem，可以省略媒体查询）

**vw：**1%视口宽度"
**vh：**1%视口高度"

---

Bootstrap（响应式）开发（预定义了大量类）

**响应式布局（指定宽度且居中）：**class=“container”
**流式布局（宽度为100%）：**class=“container-fluid”
栅格成12等份
超小屏幕（小于768px）类前缀：col-xs-份数（每行12份）
小屏设备（大于等于768px）类前缀：col-sm-份数（每行12份）
中等屏幕（大于等于992px）类前缀：col-md-份数（每行12份）
宽屏设备（大于等于1200px）类前缀：col-lg-份数（每行12份）
份数大于12另起一行，每列默认15像素内边距，.row和.col类定义栅格布局行和列，.row类自带间距-15px，container类自带间距15px
**列嵌套：**最好加一个行row可以取消父元素内边距，高度继承父元素
**列偏移：**class=“col-xx-offset-份数” （相当于增加左侧外边距）
**列排序：**class=“col-xx-push（推）-份数” class=“col-xx-pull（拉）-份数”
**响应式隐藏：**class=“hidden-xs”（超小屏下隐藏）class=“hidden-sm”（小屏下隐藏）class=“hidden-md”（中等屏下隐藏）class=“hidden-lg”（宽屏下隐藏）
**响应式显示：**class=“visible-xs”（超小屏下显示）class=“visible-sm”（小屏下显示）class=“visible-md”（中等屏下显示）class=“visible-lg”（宽屏下显示）
核心媒体查询：@media (媒体特性){
标签{
属性：值;
}
}
（媒体特性常用写法：min-width（因css层叠性从小到大写）/max-width（因css层叠性从大到小写））

---

行内式js

<属性 onclick="alert( '显示内容') ">

---

书写顺序

**1.布局属性：**display、position、float、clear、visibility、overflow
**2.盒子模型+背景：**width、height、margin、padding、border、background
**3.文本内容属性：**color、font、text-decoration、text-align、line-height
**4.点缀属性：**cursor、border-radius、text-shadow、box-shadow
开发中推荐多用类+后代，一个选择器中类选择器推荐不超过三个