css优先级

• 总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签选择器 > 通配符选择器 > 浏览器默认属性或继承

• 1.属性后面加!import 会覆盖页面内任何位置定义的元素样式

  2.作为style属性写在元素内的样式

  3.id选择器

  4.类选择器

  5.标签选择器

  6.通配符选择器（*）

  7.浏览器自定义或继承

行内元素/块级元素，非替换元素/替换元素

• 替换元素：浏览器根据标签的元素与属性来判断显示的内容。Input、img、textarea、select、object都是替换元素，这些元素没有实际内容。
• 非替换元素：大部分html元素都是非替换元素，浏览器直接显示内容。
• 块级元素：块级元素会独占一行，自动填满其父级元素的内容区域，旁边不允许有其他元素。p、div、table
• 行内元素：行内元素旁边可以有其他元素。span、a、strong

img标签的title和alt属性

• alt属性：如果图像下载或者加载失败，会用文字代替图像显示。这一作用给加载不出图片的用户提供信息，也方便程序员维护网页。
• title属性：当网页上的图片加载完成后，鼠标移到图片上面，会显示这个图片指定的属性文字，以对图片进行补充性说明。

meta标签

• meta标签的作用，标签内的内容不会显示在页面中，定义meta标签因为它对机器是可读的。
• 常见的标签 name：用来描述网页；charset定义编码格式；http-equiv设置网页过期时间，自动刷新时间

position属性 absolute和fixed

• 共同点： 改变行内元素的呈现方式，display被置为block 让元素脱离普通流，不占据空间默认会覆盖到非定位元素上
• 不同点： absolute的”根元素“是可以设置的 fixed的”根元素“固定为浏览器窗口。当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。

Flex

• 使用了 display: flex 的元素称为容器(flex container)。flex 容器中存在两条轴，水平方向的主轴和垂直方向的交叉轴。容器中的每个单元称为flex item（项目）。在 flex 中有两种类型的属性：容器属性和项目属性。顾名思义，容器属性是在容器上配置的，项目属性则是针对项目的。

• 在容器上可以设置6个属性：

  • flex-direction（设置主轴方向）
  • flex-wrap（主轴换行方式）
  • flex-flow（flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为row nowrap）
  • justify-content（项目在主轴上的对齐方式）
  • align-items（项目在交叉轴上的对齐方式）
  • align-content（多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用）

Flex 项目属性

• 有六种属性可运用在 item 项目上:
  • order（项目的排列顺序。数值越小，排列越靠前，默认为0）
  • flex-grow（项目的放大比例，默认为0，即如果存在剩余空间，也不放大）
  • flex-shrink（项目的缩小比例，默认为1，即如果空间不足，该项目将缩小）
  • flex-basis（定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。）
  • flex（flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。）
  • align-self（align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。）

css3新特性

• 新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）
  圆角 （border-radius:8px）
  多列布局 （multi-column layout）
  阴影和反射 （Shadow\Reflect）
  文字特效 （text-shadow、）
  文字渲染 （Text-decoration）
  线性渐变 （gradient）
  旋转 （transform）
  增加了旋转,缩放,定位,倾斜,动画，多背景
  transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:

css实现水平居中

• 行内元素：text-align： center;
• flex布局：display:flex; justify-content:center;
• 已设置width值：margin-left：auto；margin-right：auto；margin：0 auto；

css实现垂直居中

.box {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
}

• flex布局：display:flex; justify-content:center; align-item:center;

css实现水平垂直居中

.box {
   background-color: #FF8C00;
   width: 300px;
   height: 300px;
   position: relative;
}
.content {
   background-color: #F00;
   width: 100px;
   height: 100px;
   position: absolute;
   left: 50%;
   top: 50%;
   margin: -50px 0 0 -50px;
}

• flex布局：display:flex; justify-content:center; align-item:center;

清除浮动的办法

• 什么是浮动 float

  浮动是css的定位属性，会使元素从正常的文档流中脱离出来。浮动的框可以向左或向右移动，直到它的外边缘碰到另一个浮动的框为止。

• 清除浮动的办法

  设置 clear：both说明两边都不是浮动元素，clear属性也可以设置left、right

盒模型

• 标准盒子模型：内容content+内边距padding+边框border+外边距margin

• 低版本IE盒子模型：ie模型的content包含padding和border

• CSS 盒模型负责计算：

  • 块级元素占用多少空间。

  • 边框是否重叠，边距是否合并。

  • 盒子的尺寸。

    盒模型有以下规则：

  • 块级元素的大小由width、height、padding、border和margin决定。

  • 如果没有指定height，则块级元素的高度等于其包含子元素的内容高度加上padding（除非有浮动元素，请参阅下文）。

  • 如果没有指定width，则非浮动块级元素的宽度等于其父元素的宽度减去父元素的padding。

  • 元素的height是由内容的height来计算的。

  • 元素的width是由内容的width来计算的。

  • 默认情况下，padding和border不是元素width和height的组成部分。

适配设备

• media queries

  @media only screen and (max-width: 374px) {
    /* iphone5 或者更小的尺寸，以 iphone5 的宽度（320px）比例设置样式*/
  }
  @media only screen and (min-width: 375px) and (max-width: 413px) {
    /* iphone6/7/8 和 iphone x */
  }
  @media only screen and (min-width: 414px) {
    /* iphone6p 或者更大的尺寸，以 iphone6p 的宽度（414px）比例设置样式 */
  }
  

• flex 布局

  高度定死，宽度自适应。随着屏幕宽度的变化，页面也会跟着变化，在宽度调整的时候使用响应式布局。

BFC （Blocking Formatting Context）

• 一个页面由很多box组成，元素的类型和display属性，决定了这个box的类型。不同类型的box会参与不同的formatting context，box内的元素会以不同的方式渲染，也就是说BFC内部的元素和外部的元素不互相影响。

  触发条件 HTML 盒（Box）满足以下任意一条，会创建块格式化上下文：

  • float的值不是none
  • position的值不是relative或static
  • display取值为inline-block;table-cell;table-caption;flex;inline-flex之一的元素
  • overflow不是visible的元素

使元素消失的办法

• visibality:hidde, 把元素隐藏起来，不会改变页面的布局，仍占据原有的空间，但绑定的事件不会触发
• Index-z=-1, 将元素隐藏到其他页面后面
• Display:none, 把元素隐藏起来，会改变页面的布局，可以理解为把元素删掉
• Opacity:0 将元素变得透明，点击元素区域时事件仍会被触发

px rem em

雪碧图

• 现方法：

  1. 使用生成器将多张图片打包成一张雪碧图，并为其生成合适的 CSS。
  2. 每张图片都有相应的 CSS 类，该类定义了background-image、background-position和background-size属性。
  3. 使用图片时，将相应的类添加到你的元素中。

• 好处

  减少加载多张图片的 HTTP 请求数（一张雪碧图只需要一个请求）。但是对于 HTTP2 而言，加载多张图片不再是问题。

  提前加载资源，防止在需要时才在开始下引发的问题，比如只出现在:hover伪类中的图片，不会出现闪烁。

画css三角形

<head>
    <style type="text/css">
        /* css3绘制三角形 */
        .triangle {
            width: 0px;
            height: 0px;
            border: 100px solid transparent;
            border-bottom: 300px solid #ffff11;
        }
    </style>
</head>

双栏布局/三栏布局