CSS样式汇总

1.HTML标签

1.1.常用标签

• 标题标签：h1-h6
• 段落标签：p
• 换行标签：br
• 没有语义标签：div span
• 链接标签：a（后面target = _blank为打开新页面，href = # 为空链接，#id为锚点链接）
• 空格标签：&nbsp
• 小于标签：&lt
• 大于标签：&gt
• 表格标签：table（border=1为边框为1，cellspacing=0为相邻距离为0），tr为表格的行，th为单元格表格的头，td为表格的单元格内容，thead为表格的头部，tbody为表格的主体，rowspan为跨行合并单元格，clospan为跨列合并单元格
• 列表标签：ul li（list-stype:none为去掉小圆点）
• 有序列表：ol li
• 自定义列表：dl dt dd
• 表格标签：form（action=url,method为传输方式）
• 输入表单元素：input（id="“来作为标识）
• 文本标签：label（配合input使用，for="input的id"）
• 下拉表格：select（option为内容）
• 文本域标签：textarea

1.2.查阅css文档

www.w3school.com.cn/

2.CSS样式

2.1.字体属性

• 字体样式：font-amily
• 字体大小：font-size
• 字体粗细：font-weight（加粗：bold，也可以是700）
• 字体类型：font-style（斜体：italic）

2.2.文本属性

• 字体颜色：color
• 对齐方式：text-align（水平居中对齐：center）
• 装饰文本：text-decoration（去除效果：none，下划线：underline，划线：line-through）
• 文本缩进：text-indent（文本段落缩进，2个字体就是2em）
• 行间距：line-height（设置和高度一样高，就可以垂直居中）

2.3.伪类选择器

• 鼠标移动到链接上：a:hover
• 鼠标未选择过：a:link
• 鼠标点击过链接：a:visited
• 鼠标正在按下链接：a:active
• 获得光标的输入表单：input:focus

2.4.元素显示模式

1. 块级元素：宽度默认100%，独占一行，如div
2. 行内元素：一行可显示多个，高宽设置无效，设置内边距无效，默认宽度为本身内容宽度，如span
3. 行内块元素：可以设置宽高，内边距，一行可显示多个，如img,input

• 其它元素转换为块级元素：display:block（元素就可以设置宽高）
• 其它元素转换为行内元素：display:inline（元素可以一行展示，少用）
• 其它元素转换为行内块元素：display:inline-block（元素就可以拥有设置宽高，一行可显示多个）

2.5.CSS背景

• 背景颜色：background-color

• 背景图片：background-image: url('')

• 背景平铺：background-repeat（不重复：no-repeat）

• 背景图片位置：background-positon（可以用center top方位，也可以用数字）

• 背景随着滚动设置：background-attachement（滚动：scroll，不动：fixed）

• 半透明背景颜色：background: rgba(0, 0, 0, 0.3) （透明度为0.3）

• 综合写法：background: url(' ') no-repeate fixed center top （没有规定位置顺序）

• 背景图片大小：background-size（cover:全部覆盖，图片可能有裁剪，50%: 一半，contain：图片扩展到最大尺寸，还是等比例，不过可能有空白区域）

• 背景线性渐变：background：liner-gradient(left，red， blue)起始方向 颜色1，颜色2

• 一般用法：作为背景图，小图片和文字一起

  width: rpx; height: rpx; background: url('') no-repeat; background-size: 100%;

2.6.盒子模型

• 边框宽度：border-width
• 边框颜色：border-color
• 边框样式：border-style（实线：solid，虚线：dashed，点线：dotted）
• 边框方位：border-bottom，border-top，border-left，border-right
• 边框圆角：border-radius（设置50%为本身宽度一半，来达到圆形效果）
• 边框方位圆角：borer-top-left-radius
• 综合写法：border: 1px solid #eee 
• 内边框：padding（上右下左原则，顺时针，盒子有宽度和高度时，指定内边距，会撑大盒子，消除需要使用box-sizing）
• 外边距：margin（上右下左原则，顺时针）
• 盒子阴影：box-shadow（x, y, blur, spread, color, inset，x:水平阴影，y:垂直阴影, blur：模糊距离，spread:扩展距离，color:阴影颜色，inset为内阴影，例子：box-shadow: 4px 4px 115px #eee）
• 文字阴影：text-shadow（例子：5px 5px 6px raba(0, 0, 0, 0.3)）

2.7.css浮动

1. 说明：浮动最经典就是让多个块级元素一行内排列显示。
2. 左浮动：float: left ，右浮动：float: right.
3. 特性：浮动会脱离标准流，浮动的盒子不再保留原来的位置，浮动会具有行内块元素属性，大小根据内容决定。
4. 文字环绕效果：浮动不会压住文字，文字会围绕浮动元素，如设图片文字环绕。

清除浮动方式：

方式1：clear:both。

方式2：父元素overflow:hidden。

方式3（推荐）：

clearfix:after {content:"";display:block;height:0;clear:both;visbility:hidden}

2.8.css定位

• 相对定位：position:relative (移动位置靠自己的位置而定，原来的位置还继续保留，典型的作用是给绝对定位当爹)
• 绝对定位：position:absolute（元素移动位置是相对于有定位的祖先元素的，经典的是子绝父相）
• 固定定位：position:fixed（以浏览器为可视窗口为参照移动元素，可以在浏览器滚动的时候保留位置不变，不会随着滚动而滚动）
• 粘性定位：postion:sticky（必须加上方位如top才生效，以浏览器为可视窗口为参照移动元素，跟页面滚动搭配使用，IE不支持）
• 叠放次序：z-index（数值越大，盒子越靠上，默认为0）

2.9.元素的显示和隐藏

• display：none，隐藏对象，隐藏元素后不再占有原来的位置。
• display：block，除了转为块级元素，还有显示意思。
• visibility：hidden，隐藏对象，继续占有原来的位置。
• visibility：visible，元素可见。
• overflow：hidden，溢出部分隐藏。
• overflow：scroll，溢出部分显示滚动条，不溢出也显示滚动条
• overflow：auto，再需要的时候显示滚动条

2.10.界面样式

• 鼠标样式：cursor (小手样式：pointer，禁止样式：not-allowed，文本样式：text)

• 轮郭线：outline: none（取消）

• 文本域禁止拖动：resize: none

• 垂直居中：vertical-align（一般图片文字一行的时候用到）

• 单行文字省略号：

  white-space:nowrap,overflow:hidden,text-overflow:ellipsis
  

• 多行文字省略号：

  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  

3.CSS属性

3.1.css特性

• 层叠性：就近原则
• 继承性：子承父业，子类可以继承父类的属性
• 优先级：继承或* < 元素 < class < id < style < !important

3.2.css属性顺序

1. 布局定位属性：display, position, float, overflow
2. 自身属性：width, height, margin, padding, border, background
3. 文本属性：color, font, text-decoration, text-align, vertical-align, white-space, berak-word
4. 其它属性：content, cursor, border-radius, box-shadow, text-shadow

3.3.小图标

• 精灵图：移动背景图片位置，background-position来显示位置，下左为负数。
• 字体图标：本质是字体，展示的是图标，可以改变颜色大小，参考阿里的iconfont字库，样式简单既可以使用。
• 三角形：width,height:0,border:10px solid transparent,border-top-color:pick,盒子宽高为0，设置一个边框，3个方向透明，1个方向有颜色，就可以显示三角形。

3.4. 2倍精灵图

移动端，在firework里面把精灵图等比例缩放到原来的一半之后根据大小测量坐标。

注意：代码里面的background-size也要写，大小为精灵图原来宽度的一半。

4.CSS3新样式

4.1.新样式

• input[value] {}，必须是input,且具有value

• input[type=text]{}，必须是input,且type为text

• ul li: first-child，第一个子元素

• ul li: last-child，最后一个字元素

• ul li: nth-child(2)，第2个子元素

• ul li: nth-child(n), n可以是数字，公式。从0到n

• ul li: nth-child(even)，偶数

• ul li: nth-child(odd)，奇数

• ul li: nth-child(2n)，偶数，也可以说是2的倍数

• ul li: nth-child(2n+1)，奇数，也可以说是2的倍数+1

• ul li: nth-child(n + 2)，第2个开始

• ul li: nth-child(-n + 2)，前2个，包含2

• nth-of-type(n),同上效果，并且对于相同子类可以排序。

• ::before，在元素内部的前面插入内容，一般为伪元素使用，必须设置content,需要设置display:block才可以设置宽高。一般使用绝对定位来调整位置。

• ::after，在元素内部的后面插入内容。

• box-sizing: content-box（盒子大小为padding + width + border）

• box-sizing: border-box（盒子大小为width,padding和border不会撑开盒子大小）

• filter:blur(5px),滤镜，模糊大小，数值越大越模糊

• calc执行计算：width:calc(100% - 80px)

4.2.过渡动画

• transition：要过渡的属性 花费时间 运动曲线 何时开始（后面2个可选），坚持一个原则：谁做过渡给谁加。例子：transition: width .5s, height .5s。常用：taransition: all 0.5s。一般配合 :hover 使用，如：div:hover{width:500px}表示鼠标移动过去宽度动画变成500px。
• translate：转移移动，例如：transform: translate(x, y)。也可以直接用translateX(x),translateY(y)。这个不会影响其它位置，可以移动相对于自身的50%。如translateX(50%)。
• rote：转换旋转，例子：transform:rotate(45deg)，表示顺时针旋转45度。默认中心点是50% 50%，即center center(方位名词)。可以通过transform-orgin: x y转换中心点。
• sacle：转换缩放，例子：transform:scale(x, y),里面写的数字就是倍数，(2, 2)就是2倍的意思，直接简写（2）也行。不会影响其它盒子，默认为中心点缩放。如果变大，可以通过overflow:hidden来隐藏放大的区域，达到动画的效果，如：div img: hover{transform: sacle(1.1)}，表示鼠标移动到图片，图片放大1.1倍。
• 综合写法：div: hover{transform: translate(150px 150px) rotate(180deg) scale(2)}。顺序会影响转换效果，当我们有位移属性，需先把位移属性放在最前面。

4.3.动画

先定义动画序列，再使用动画。例子：

@keyframes move {
    0% {
        transform: translate(0px)
    } 
    100%{
        transform: translate(100px)
    }
}
div {
    animation-name: move;
    animation-duration: 2s;
}

0%表示动画开始，100%动画完成，中间想要50%等也可以，可以用form to来代替0%和100%也行，里面的百分比就是总时间的划分。div表示使用动画名称move，时间为2s，达到效果是移动x轴100px。

• animation-name：动画名称
• animation-duration：动画时间
• animation-delay：何时开始
• animation-timing-function：运动曲线（ease:低速开始加速，慢速结束。linear:匀速）
• animation-itearation-count：重复次数（infinite：无限）
• animation-direction：重复执行时是否反方向播放（alternate：反方向）
• animation-fill-mode：动画结束状态（backwards：返回起点，forwards：停留原地）
• animation-play-state：动画状态（pause：暂停）
• 常用综合写法：animation: name duration timeing-function delay 

4.4. 3D转换

• tarnslate3d，translate3dX(x),x轴转换。translate3dY(y),y轴转换。translate3dX(z),z轴转换。正面是z轴，上下是x轴，左右是y轴。可以用左手原则来判断方向是哪面正。
• perspective：透视。不透视的话看不到z轴效果。
• transform-style:3D呈现（preserve-ed开启立体空间）

4.5.最大最小宽度

• max-width：最大宽度

• min-width：最小宽度

  body { width: 100%; max-width: 640px; min-width: 320px; margin: 0 auto; background: #fff; font-size: 14px; color: #666; line-height: 1.5; }

5.布局

5.1.flex布局

原理：弹性布局，任何一个容器都可以指定定位flex布局，通过父盒子添加flex属性，来控制子盒子的位置和排序方式。通过flex布局，子元素的float,clear,vertical-align属性失效。

父元素属性：

• flex-direction：设置主轴方向（row左到右，column上到下）
• justify-content：设置主轴上子元素的排列方式（center:子元素居中对齐，space-around:平分剩余空间，space-between:先到两边贴边，再分配剩余空间，space-evenly:空间均匀）
• flex-warp：设置子元素是否换行（warp：换行）
• align-items：单行排序时设置侧轴上的子元素排列方式（center：垂直居中）
• align-content：多行排序时设置侧轴上的子元素排列方式（flex-start:顺序排序，center:垂直中间排序，space-between：两边排序空出中间，space-around：平分空间排序）
• flex-flow：column wrap。简写。

子元素属性：

• flex：定义子项目剩余分配空间，表示占多少份，默认为0，可以用flex:1表示平分剩余空间，数字越大分配越多。多行的时候，例如4个一行，可以用相对于父级百分比25%来写。

• align-self：控制子元素自己在侧轴上的排列方式。

• order：属性定义项目的排列方式，默认为0，-1可以排在前面，越小越靠前。

• flex-shrink：默认为1，空间不足的时候，该item缩小，为0则不缩小。

• flex: 0 表现为最小内容宽度, 场景不多

• flex: none  表现为最大内容宽度，如按钮内容文字固定不换行，宽度为内容宽度就适用该属性，适用于不换行的内容固定或者较少的小控件元素上。

• flex: 1 平分比例, 充分分配容器的尺寸,适合等分布局。

• flex: auto 元素充分利用剩余空间，但是各自的尺寸按照各自内容进行分配,适合基于内容动态适配的布局。

5.2.REM布局

原理：rem是相对于html元素字体大小来说。如html{font-size：12px}

媒体查询：可以根据不同的屏幕尺寸改变不同的样式，样式有层叠性，最好从小到大来写。

• @media mediatype and not noly
• @media screen and(max-width: 800px) {body{样式}}

适配方案：

• less + 媒体查询 + rem：设计稿尺寸宽度基本以750为准，页面的rem值=元素大小750/划分的等分。例如750/15等分，则html{font-size: 50px}。
• flexible.js + rem,分成10等分，再设置rem（已不用）

推荐链接：

自适应布局方案

移动端适配及PC端适配心得总结体会

6.CSS功能问题

6.1.水平居中方式

块级盒子有默认宽度，可以使用margin: 0 auto来让块级盒子水平居中，行内元素或者行内块元素就用text-align:center来居中。

6.2.绝对定位居中方法

left: 50%, margin 自己盒子一半。或者left:50%,tarnsform: translateX(50%)

6.3.相邻元素外边框

相邻的边框会合并最大的，建议设置一个就好。border-collapse: collapse可以让相邻的边框合并在一起，表格的可以用到。

6.4.嵌套块元素都设置外边距问题

都设置会塌陷最大的值，解决方案可以设置父元素内边距来代替子元素外边距，或者设置边框，或者overflow:hidden也可以解决。

6.5.清除内外边距

*{margin: 0, padding: 0}

6.6.鼠标移动显示遮罩层

class mask{display:none} class:hover mask{display:block}

6.7.图片底部空白

verical-align：middle,top,bottom都可以解决。

6.8.flex=1和text换行冲突问题

方案1：flex=1的视图，使用overflow:hidden,或者min-width=0

方案2：冲突的视图，添加flex-shrink防止被压缩**。**