CSS盒模型

盒模型可以分为IE盒模型（border-box)和标准盒模型(content-box);
盒模型的组成部分：内容（content）、填充（padding)、边框（border)和边距（margin);
标准盒模型：属性width和height只包含内容（content），不包含padding和border；
IE和模型：属性width和height包含内容（content）、填充（padding)和边框（border)

伪类link、hover、active、visited、focus

  1. link表示链接在正常情况下（即页面刚加载完成时）显示的颜色。
  2. visited表示链接被点击后显示的颜色。
  3. hover表示鼠标悬停时显示的颜色。
  4. focus表示元素获得光标焦点时使用的颜色，主要用于文本框输入文字时使用（鼠标松开时显示的颜色）。
  5. active表示当所指元素处于激活状态（鼠标在元素上按下还没有松开）时所显示的颜色。
    注：伪类的顺序应为link--visited--hover--focus--active。

    css处理文本过长显示

    1
    2
    3
    4
    5
    6
    7
    .ellipsis{
    	display: block;//块状显示
    	overflow: hidden;//隐藏文字
    	text-overflow: ellipsis;//显示...
    	white-space: nowrap; //不换行
    	width:100px;//超过100px就截取
    }

    水平居中

  6. 行内元素text-align:center;
  7. 定宽块元素margin:auto;
  8. 使用CSS3中新增的transform属性
    1
    2
    3
    4
    5
    6
    7
    8
    .parent{
      position:relative;
    }
    .son{
      position:absolute;
      left:50%;
      transform:translate(-50%,0);
    }
  9. 使用绝对定位方式, 以及负值的margin-left,margin-left是width的一半;
    1
    2
    3
    4
    5
    6
    7
    8
    9
    .parent{
      position:relative;
    }
    .son{
      position:absolute;
      width:100px;
      left:50%;
      margin-left:-50px;
    }
  10. 使用flex 布局
    1
    2
    3
    4
    .box{
        display: flex;
        justify-content: center;
    }

垂直居中

  1. 设置 line-height 等于父元素高度: .box{ height:20px;line-height :20px}

  2. 使用flex 布局

    1
    2
    3
    4
    .parent {
      display: flex;
      align-items: center;
    }

  3. 可用 transform

    1
    2
    3
    4
    5
    6
    7
    .parent{
    	position:relative;
    .son{
        position:absolute;
        top:50%;
        transform: translate(0,-50%);
    }

  4. 使用绝对定位方式, 以及负值的margin-top,margin-top是width的一半;

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .parent{
      position:relative;
    }
    .son{
      position:absolute;
      height:100px;
      width:100px;
      top:50%;
      margin-left:-50px;
    }

  5. 若元素是行内块级元素, 基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央.

    1
    2
    3
    4
    5
    6
    7
    8
    .parent::after, .son{
        display:inline-block;
        vertical-align:middle;
    }
    .parent::after{
        content:'';
        height:100%;
    }

    https工作原理

    1. 客户端发起https连接请求
    2. 服务端收到请求后，返回公钥
    3. 客户端收到服务端发过来的公钥后，使用公钥加密随机(对称)密钥。客户端随机生成的随机(对称)密钥。
    4. 客户端向服务端发送加密过后的随机(对称)密钥，服务端收到后使用私钥解密得到随机(对称)密钥。
    5. 双方都知道随机(对称)密钥后，就可以通过对称密钥加密的密文通信。

white-space

  1. white-space：用来控制空白字符的显示的，同时还能控制是否自动换行；

    normal 正常显示
    nowrap 永不换行
    pre preserve的缩写，空格和换行符全都被保留了下来！不过自动换行还是没了。
    pre-wrap就是preserve+wrap，保留空格和换行符，且可以自动换行。
    pre-line 空格被合并了，但是换行符可以发挥作用

  2. word-break ：控制单词如何被拆分换行的

    normal 正常显示
    keep-all 所有“单词”一律不拆分换行,这里的“单词”包括连续的中文字符（还有日文、韩文等），或者可以理解为只有空格可以触发自动换行
    break-all 所有单词碰到边界一律拆分换行

  3. word-wrap 控制单词如何被拆分换行的

    normal 正常显示
    break-word 只有当一个单词一整行都显示不下时，才会拆分换行该单词