我的CSS API

CSS字体api

  1. @font-face{}:包括font-family: name src: url(path) format(),url(path) format()...;

    1
    2
    3
    4
    5
    @font-face {
      font-family: 'MyWebFont';
      src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
           url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
    }

CSS选择器

基本选择器

  1. 通配符选择器

  2. 元素选择器

  3. 类选择器

  4. id选择器

  5. 后代选择器

  6. 子元素选择器：father > children，只能选择某元素的子元素。

  7. 相邻兄弟元素选择器：element + sibling，选择紧接在另一元素后的元素，他们具有相同的父元素。选中的只有一个元素

  8. 通用兄弟选择器：element ~ sibling，选择某元素后面的所有兄弟元素，他们具有相同的父元素。

属性选择器

三种情况：
以什么开头^=，包含什么*，以什么结尾$

  • 对带有指定属性的HTML元素设置样式

  1. 为带有attribute属性的element元素设置样式：Element[attribute]

  2. 为attribute=value属性的element元素设置样式: Elment[attribute="value"]

  3. 选择attribute属性中包含“value”的元素设置样式: Element[attribute ~= "value"],是*=的子集。

  4. 选择attribute属性以“value”开头的元素设置样式：Elment[attribute ^= "value"]

  5. 选择attribute属性以“value”结尾的元素设置样式：Element[atttribute $="value"]

  6. 选择属性值包含“value”的元素设置样式：Element[attribute *= "value"]，跟~去在于，可以是在一个字符串中包含。

  7. 等于“value”或“value-”开头的元素：Element[attribute |= "value"]，,是^=的子集。

###伪类选择器

  • CSS伪类\伪元素用于向某些选择器添加特殊的效果。

  1. 动态伪类：:link :visited :hover :active :focus[遵守love hate 原则]

  2. UI元素状态伪类：:enabled :disabled :checked

  3. 结构类：first-child last-child :nth-child() :nth-last-child() :only-child :only-of-type :empty【可以选择那些内容是空的元素，空格不能算是空】 :nth-of-type() :nth-last-of-type() :first-of-type :last-of-type :only-of-type :only-child

  4. first/last-child, nth-child, nth-last-child
    first/last-of-type, nth-of-type, nth-last-of-type
    找的是当前元素的兄弟元素。

  5. nth-of-type和nth-child的区别：**nth-child选择的是同级DOM中的子元素，与元素类型无关。而nth-of-type则要继续区分元素类型。

  6. N是一个简单表达式，取值从0开始。但是CSS元素排列是从1开始,N一定要在表达式的前面

  7. :empty匹配没有子元素（包括文本节点）的每个元素。

  8. 否定选择器::not,选择器匹配非指定元素的每个元素。

  9. 伪元素：::first-line ::first-letter ::before ::after ::selection，伪元素有两个冒号，伪类只有一个，before、after配合content使用，selection在FF中添加-moz，IE9+.

  10. CSS权重，权重决定哪种规定生效。简单理解权重计算：行内=1000 > ID=100 > 类，属性选择器，伪类选择器=10 > 元素和伪元素=1 > 0。

css图像api

  1. 背景图像：background-image：url(src) [src：文件路径，可以是绝对URL,比如一个图片的url；也可以是相对文档，相对根目录]

  2. 背景平铺：background-repeat: repeat no-repeat repeat-x repeat-y;

  3. 背景位置：background-position: horizontal vertical [水平位置：left center right；垂直位置：top center bottom;另外可以使用px，em，百分比作为单位，如果没有指定方向则默认值从左上偏移]

  4. 背景固定：background-attatchment: scroll fixed[scroll随着其他内容一起滚动，fixed固定在某个位置不受其他内容影响]

  5. 背景的起点：background-origin: border-box padding-box: content-box[这个属性在background-attachment：fixed的时候无效]

  6. 限制背景出现的位置：background-clip: border-box padding-box content-box[这个属性跟background-origin有点类似，不同的是这个属性会对背景进行剪裁，而前者不会,这两个属性可以配合使用。]

  7. 设置图片大小：background-size: width height contain cover[宽高可以是px，也可以百分比，contain和cover的区别只在于：contain会显示完整的图片，而cover则会让图片宽度先铺满容器再保留纵横比]

  8. 背景混合模式：background-blend-mode：，还没理解。

  9. 多背景：background: url(),url(),url()...;[用逗号分隔，每一个都可以作为一个简写的background,顺序很重要，先出现的显示优先级最高，依次递减]。

  10. 线性渐变：background-image: linear-gradient(to direction, color1 pistion[, color2 postion[,...)[direction:方向，可以是关键字top，bottom，left，right，也可以是角度0-360deg;postion是颜色从哪个位置开始显示]。

  11. 平铺线性渐变：background-image: reapeating-linear-gradient(to direction, color1 position[, color2 position[,...)[平铺线性渐变，会以一段渐变为单位去平铺，position一般会用px，一般使用平铺径向渐变都会让起始颜色和结束颜色相同，达到比较衔接的效果]。

  12. 径向渐变：background-image: radial-gradient(size[ circle[ at[ postion], color1 position[, color2 position[)[ 默认显示一个圆形，渐变中心在元素的中心点上。circle创建一个圆形的渐变【也可以是ellipse椭圆形】，at关键字可以设置渐变中心的中心，size则是渐变的尺寸，有四个关键字：closest-side，closest-corner，farthest-side，farthest-corner 可以是用单位决定渐变的尺寸，比如px]。

  13. 平铺径向渐变：background-image: repeating-gradient(size circle[ at[ position],color1 postion, color2 position)[position用px，一般使用平铺径向渐变都会让起始颜色和结束颜色相同，达到比较衔接的效果]

链接API

  1. 链接状态伪类：:link :visited :hover :active :focus [未访问 已访问 鼠标悬浮 单击链接 Tab键进入表单字段或链接,排列顺序为爱恨原则LoVe/HAte]

CSS变形、过渡、动画

变形

  1. 旋转: transform: rotate(deg)[deg为提供的角度]

  2. 缩放：transform: scale(x，y), transform: scaleX(n), transform: scaleY(n) [x,y分别为纵横放大的倍数,如果只提供一个值则宽高放大同样的倍数，元素和里面的全部内容会一起缩放。scaleX和scaleY分别为宽高各自放大的倍数。scale(x,y) 可以理解为x是元素左右边线到元素中心点的距离，y是元素上下边线到元素中心点的距离。x值越大元素的左边线越靠左，右边线越靠右x值为0时，左边线和右边线会重合。x值为负数时，元素的左边线会移到元素中心点的右侧，右边线会移到元素中心点的左侧。这样就水平反转了。]

  3. 平移：transfrom: translate(x, y)，transform: translateX(x),transform: translateY(y)

  4. 倾斜：transform: skew(xdeg, ydeg),transform:skewX,transform:skewY[倾斜中的X，Y跟我们以往的坐标系刚好相反，就好理解了]

  5. 多重变形：transform: rotate scale translate skew[各个变形函数的书写顺序就是浏览器应用效果的顺序]

  6. 变形原点：transform-origin: x y [单位可以是像素，关键字，em，百分比]

  7. 3D变形，有待学习，非常重要。

过渡

  1. 过渡属性：transition-property: key-word [all或者其他css属性，多个属性用逗号相隔]

  2. 持续时间: transition-duration: time

  3. 时序函数: transition-timing-function: key-word [ease, ease-in, ease-out,ease-in-out,linear,cubic-bezier]

  4. 延迟: transition-delay: time

  5. 按照顺序简写：transition:

    动画

  6. 名字：animation-name: name

  7. 持续时间：animation-duration: time

  8. 时序函数：animation-timing-function: key-word

  9. 次数：animation-iteration-count: number

  10. 方向：animation-direction: alternate

  11. 延迟：animation-delay: time

  12. 填充模式：animation-fill-mode: forwards

  13. 关键帧：@keyframe name {from{...} percentage{} to{...}}

  14. 按照顺序简写：animation:

表格API

  1. 添加内边距 padding

  2. 纵向对齐：vertical-align:top baseline middle bottom[不可继承]

  3. 横向对齐：text-algin: left right center justify[可继承]

  4. 单元格间隙：border-spacing:[问题：造成边框宽度重叠两倍]

  5. 去双重边框：border-collapse: collapse[设置了border-collapse，则border-spacing无效]

  6. 圆角：border-radius: number[同上]

  7. 隐藏空单元格：empty-cells: hide;[同上]

  8. 隔行条纹：tr:nth-of-type(odd) tr:nth-of-type(even)

  9. 表单伪类：:focus :checked :disabled :enabled

布局api

  1. 固定宽度布局：不管浏览器窗口有多宽，页面的宽度始终一致。常见的是居中显示，最常用的宽度是960px。因为移动设备的普及，这种方式已经不流行了。

  2. 流式布局：流式布局能自动调节，匹配浏览器的宽度，其宽度使用百分比设定的。优点是可以利用浏览器窗口的可用空间，但不能保证在所有的窗口中都好看，比如，屏幕太大的时候，文本行太长。

  3. 响应式web设计：支持不同宽度的浏览器，响应式web设计不为所有设备提供一样的布局，而是提供不同的布局。

  4. 浮动：float: left right none

  5. 定位：position: absolute relative fixed static

  6. 绝对定位：相对于最近的祖辈定位元素（fixed，relative，absolute）的边界而定，否则相对于浏览器窗口而定。【脱离文档流】

  7. 隐藏页面部分内容：visibility:visible hidden。hidden和display:none的作用一样，但none会让元素彻底消失，而hidden只会不显示元素，但是元素原来的位置还是会留空。

  8. 通过定位的right，left属性可以自动设置元素长度。

  9. 相对定位：相对于元素在HTML流中的当前位置而定。它的主要用途不是移动元素，而是为其中需要绝对定位的元素设置参考点。

  10. 固定定位：固定的元素钉在屏幕的某个位置。

responsive web design 响应式设计

  1. @import url(src) (key: value)命令必须放在样式表的开头，不能放在任何样式的后面,否则无效。

  2. @media (key: value){style}媒体查询，相当于一个容器，把满足查询条件的样式围住。

  3. 弹性栅格与流式布局类似，网页的整体宽度都会随着屏幕的宽度而变化调节。

  4. width=auto的作用与设置100%差不多，作用是让元素和容器一样宽。

  5. PPI(pixel per inch)每英寸所包含像素点数目，标准屏幕PPI是160,苹果6是326属于超高密度ppi。

  6. DPR= 设备像素 / 设备独立像素，设备像素比，代表设备独立像素到设备像素的转换关系。可以通过window.devicePixelRatio获取。

  7. 设备像素：指的是设备像素，设备能控制显示的最小单位
    2018-08-22-16-29-22

  8. CSS像素：指我们在代码中设置的逻辑像素值，是一个抽象概念，实际不存在。

  9. DPI每英寸包含点的数量

  10. DPPX每像素包含点的数量 96dpi = 1dppx

  11. 设备独立像素：与设备无关的逻辑像素，指通过程序控制的虚拟像素，包含了CSS像素。

  1. 图片缩放大小 = 图片CSS大小 * DPR

  2. 行内元素会忽略宽高以及上下内外边距

  3. 设置断点，通常的做法是设置三个，小于480，480~768，大于768.判断的标准其实是：从某一点开始，网站的外观可能会变差。

  4. 设置width: auto与设置为100%作用是相同的。

CSS栅格系统

  1. 栅格：一种把内容组织到行和列中的方式，而且各列的宽度是一致的。

  2. 容器：容器用于设置整个栅格系统的宽度，通常使用max-width属性。

  3. 行：放在容器中，一行可以由多个div标签，标记各列。

  4. 列：一列就是一行里的div标签，一行可以由一列或多列。

  5. 定义容器，行，列，只需要为div设置相应的类名，不同的栅格系统有不一样的命名。

弹性盒

  1. 弹性容器：display: flex;

  2. 弹性项目：直接嵌套在弹性容器里的标签叫弹性项目。

  3. 项目宽度相等并且填满整个容器：flex: 1;。

弹性容器的属性

  1. 弹性项目的排列方向以及是否换行：flex-flow: direction[row row-reverse column column-reverse] newline[nowrap wrap wrap-reverse]

  2. 设置弹性项目显示在一行的位置【需要符合flex属性】：justify-content: flex-start【靠左对齐】 flex-end【靠右对齐】 center space-between【均匀分布各个弹性项目，最左边的靠左边，最右边的靠右边，左右边不留空白】 space-around【把容器剩余的空间平均分给各个项目，包括最左边和最右边，左右边会留空白】

  3. 设置弹性项目在弹性容器里的纵向对齐方式：align-items:flex-start flex-end center baseline stretch[默认]

  4. 如何放置显示为多行的弹性项目，设置的是所有的多行弹性项目。【1.必须允许换行；2.弹性容器的高度必须大于多行显示的弹性项目】align-content: flex-start flex-end center space-between space-around stretch【默认】

弹性项目的属性

  1. 控制项目的显示顺序：order：num，指定每一个项目的数字后，页面会从小到大排序。

  2. 控制单个项目的纵向对齐方式：align-self [align-items属性值]，可以覆盖掉align-items

  3. 弹性项目的外边距不折叠,可以把外边距的值设为auto，让浏览器根据可用空间调整外边距的值

  4. 控制弹性项目的宽度：flex:flex-grow：num[相对宽度，表示弹性项目如何变宽，只要大于0整个宽度就会被占满。等于0则由自身的宽度决定。]flex-shrink：[当项目的宽度之和大于容器的宽度，弹性项目收窄多少，跟flex-grow一样是相对宽度。flex-flow为nowrap才起作用，可以始终1。为0就是不收缩]flex-basis：px、em、%[设置弹性项目的基准宽度，当flex-grow为0时，宽度等于设置的值，否则有可能大于设置的值也有可能小于。允许换行时才真正起作用。为了跟flex-grow一致。应该按照grow的比例设置值。用于确定何时换行。根据这个基准来计算宽度。]

网站图标

//

阴影

  1. 文本阴影:text-shadow: x y blur-radius(模糊程度) color

  2. 盒子阴影:box-shadow: inset x y blur-radius(模糊程度) spread-radius【阴影延伸长度】 color

多栏文本

  1. column-count
  2. column-width

清除浮动5个方法

2018-10-25-23-16-35

  1. 在浮动元素后面使用一个带clear属性的空元素
  2. 给浮动元素的容器添加css，overflow:hidden+zoom:1
  3. 给浮动元素的容器也添加浮动，但整体都会浮动，影响布局。
  4. 使用邻接元素处理，给浮动元素后面的元素添加clear属性
  5. 使用CSS的::after伪元素