CSS部分知识点整理在了解css之前，我们需要先了解浏览器浏览器组成部分 shell 内核拥有自己内核的浏览器：

在了解css之前，我们需要先了解浏览器

浏览器

组成部分

shell
内核

拥有自己内核的浏览器：

Chrome： webkit/blink
safari： webkit
firefox： gecko
IE：trident
opera：presto（目前属于 360 和昆仑万维）

其他浏览器仅仅只是在shell部分做开发

内核

渲染rendering引擎/JS引擎

CSS

cascading style sheet 层叠样式表

选择器

属性选择器

<style>
[href] {
  text-decoration: none;
}
</style>
<body>
<a href="http://www.baidu.com">百度一下，你就知道</a>
</body>

该选择器主要用于表单，例如：

<input type="text" />
<input type="password" />

可以使用该方式来区分开某一种input

[type="text"] {
  ...对应的样式
}
[type="password"] {
  ...对应的样式
}

优先级

!important > id > class | 属性 > 标签 > 通配符(*)

权重

0：通配符（*）
1：标签，伪元素
10：class，属性，伪类
100：id
1000：内联样式
正无穷：!important

属性

outline

去掉输入框聚焦后的轮廓

input,
textarea {
  outline: none;
}

font-size

px （pixel）

浏览器默认字体大小 16 像素，常用字号（12、14、16）
字体大小设置的是高度，宽度是自动缩放

font-weight

lighter 细体（不一定所有字体都有细体，所以有些情况会设置失败）
normal （默认）
bolder
100 - 900

font-style

italic （斜体）：使用该字体的斜体文字
oblique （倾斜）：强制文字倾斜

font-family

通用字体：Arial

// 可填复合值，当前面的字体不兼容则选择后面的字体
font-family:"Times New Roman",Georgia,serif;
// 中文字体标识需要加引号
// 中间有引号的字体标识需要加引号

比较好的字体方案

font-family: "Hiragino Sans GB", "Microsoft YaHei", Arial, \5b8b\4f53, "Helvetica Neue", Helvetica, STHeiTi, sans-serif;

// \5b8b\4f53 宋体
// 此处担心某些浏览器中文兼容性不好，改为Unicode更佳

color

项目开发中，尽量不使用 red yellow 等类似的英文颜色，主要存在以下问题：同一种色系有很多种不同的颜色差异，英文字母表达太过抽象

line-height

默认22px，mac=>21px（文字高度16px，上下间距3px）
设置行高 = 容器高度可以实现文字垂直居中

text-indent

文本缩进 text-indent: 2em;

文本截断省略号

单行

white-space: nowrap 不换行
overflow: hidden
text-overflow: ellipsis 隐藏部分省略号

多行：

css3 支持，但兼容性存在问题
参考百度写法，直接在内容上截断

nth-child()

odd 偶数
even 奇数
number 数字

table tr:nth-child(odd){}
table tr:nth-child(even){}
table tr:nth-child(6){}

vertical-align

仅仅只是用来解决行内块和行内元素文本对齐问题

块级元素使用该属性无效

box-sizing

默认值：content-box
border-box 把内边距与边框的绘制计算在盒子内部
兼容性解决

box-sizing: border-box;
/*firefox*/
-moz-box-sizing: border-box;
/*chrome、 低版本safari*/
-webkit-box-sizing: border-box;
/*IE8以下*/
-ms-box-sizing: border-box;
/*presto opera*/
-o-box-sizing: border-box;

float

块级元素无法识别浮动流元素的位置
内联、内联块、浮动、溢出隐藏、纯文本都能识别浮动元素的位置

浮动清除方法，参考下文 知识补充 --> 清除浮动

box-shadow

box-shadow: 水平位置(必) 垂直位置(必) 模糊距离阴影尺寸阴影颜色阴影种类
使用position:relative; z-index: 1;可以遮挡阴影
兼容性：

-webkit-box-shadow: 0 0 30px #000;
-moz-box-shadow: 0 0 30px #000;
-o-box-shadow: 0 0 30px #000;

border-radius

兼容性

-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;

background

background: background-color background-image background-repeat background-attachment background-position/background-size

尽量分开写，清晰明了

知识补充

font-size: 62.5%;

默认：1em = 16px 为了方便计算，设置font-size:62.5%，这样1em就等于10px

html{
  font-size: 62.5%;
}

inline-block 与 inline 文本对齐

默认对齐方式

<style>
  .my-image{
    width: 100px;
    border: 1px solid #000;
  }
</style>
<body>
<img class="my-image" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
<span>百度一下，你就懵逼</span>

很显然文字没有居中对齐，此时只需要设置图片的vertical-align: middle就可以实现居中对齐

<style>
  .my-image{
    width: 100px;
    border: 1px solid #000;
    vertical-align: middle;
  }
</style>
<body>
<img class="my-image" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
<span>百度一下，你就懵逼</span>

复选框样式重写方案

  <style>
    .checkbox {
      background-color: white;
      border: 2px solid black;
      display: inline-block;
      border-radius: 50%;
    }
    
    .checkbox input[type=checkbox] {
      display: none;
    }
    
    .checkbox label {
      display: block;
      width: 10px;
      height: 10px;
      margin: 2px;
      background-color: black;
      border-radius: 50%;
      opacity: 0;
    }
    
    .checkbox input[type=checkbox]:checked + label {
      opacity: 1;
    }
    
    .text .hint {
      visibility: hidden;
      display: block;
    }
    
    .text input[type=text]:focus + .hint {
      visibility: visible;
    }
  </style>
</head>
<body>
<section>
  <div class="checkbox">
    <input type="checkbox" id="my_checkbox">
    <label for="my_checkbox"></label>
  </div>
  
  <div class="text">
    <input type="text" id="my_text">
    <span class="hint">请输入6-13位数字</span>
  </div>
</section>
</body>

多行文本的垂直居中

将容器的display设置成table
将容器内的文本的容器的display设置成table-cell（表格单元格属性）
将容器内的文本的容器的vertical-align设置成middle

<style>
div{
  display: table;
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

div span{
  display: table-cell;
  vertical-align: middle;
}
</style>
<body>
  <div>
    <span>
      Web前端Web前端Web前端
    </span>
  </div>
</body>

img 并排出现边距

<style>
  .my-image {
    width: 100px;
    border: 1px solid black;
  }
</style>
<body>
  <img class="my-image" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
  <img class="my-image" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
  <img class="my-image" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
  <img class="my-image" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
</body>

出现该问题的原因是由于inline-block元素在代码中出现了空格或者回车，被视为分隔符
解决该问题只需要去掉img之间的换行符就可以

垂直水平居中

内边距居中

<style>
  .box{
    width: 100px;
    height: 100px;
    padding: 20px;
    border: 1px solid #000;
    box-sizing: border-box;
    /*firefox*/
    -moz-box-sizing: border-box;
    /*chrome、 低版本safari*/
    -webkit-box-sizing: border-box;
    /*IE8以下*/
    -ms-box-sizing: border-box;
    /*presto opera*/
    -o-box-sizing: border-box;
  }
  
  .box .child-box{
    width: 100%;
    height: 100%;
    background-color: orange;
  }
</style>
<body>
<div class="box">
  <div class="child-box"></div>
</div>

两栏布局

<style>
  html, 
  body {
    height: 100%;
    margin: 0;
    overflow-y: hidden;
  }
  
  .container {
    height: 100%;
  }
  
  .left {
    width: 200px;
    height: 100%;
    background-color: antiquewhite;
    position: absolute;
  }
  
  .right{
    margin-left: 200px;
    height: 100%;
    background-color: lightblue;
  }
</style>
<body>
<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>
</body>

清除浮动

<style>
  .container {
    width: 200px;
    border: 10px solid #000;
  }
  
  .container .inner-box {
    width: 100px;
    height: 100px;
    float: left;
  }
  
  .container .inner-box.box1 {
    background-color: orange;
  }
  
  .container .inner-box.box2{
    background-color: antiquewhite;
  }
  
  .text-box{
    width: 100px;
    border: 2px solid orchid;
  }
</style>
<body>
<div class="container">
  <div class="inner-box box1"></div>
  <div class="inner-box box2"></div>
</div>
<div class="text-box">测试内容</div>
</body>

解释上面所有现象

黑色盒子(.container)不撑开问题
1. container为块级元素，块级元素无法识别浮动元素，所以也无法知道两个浮动的子级高度为多少
2. 设置container display 为 inline-block 可以解决内容不撑开问题 2.text-box 紧挨着 container 也是因为 text-box为块级元素，所以无法识别两个浮动元素的宽度

清除浮动 （清除浮动的元素必须是块级）

<style>
.clearfix{
  clear: both;
}
</style>
<body>
<div class="container">
  <div class="inner-box box1"></div>
  <div class="inner-box box2"></div>
  <p class="clearfix"></p>
</div>
</body>

使用这种方式不太规范，因为新增了一个空节点<p>。

最佳方案

ul::after,
div:after {
  content: '';
  display: block;
  clear: both;
}

before after 的其他用法

文字用法

<style>
  p::before{
    content: attr(data-username);
  }
</style>
<body>
<p data-username="靓仔">，欢迎来到我的文章</p>
</body>

图标用法

<style>
  p::before{
    content: url(消息图标.png);
    vertical-align: middle;
  }
</style>
<body>
<p>这是一条消息</p>
</body>

淘宝登录页面的背景图缩放问题

如图，登录页面背景在后面，登录框在右边，如何做到背景图不被缩放效果

background-size: cover;
background-position: center center;

背景图滚动问题

html{
  background: url(背景图.jpg);
}

此时如果背景图会跟随滚动条滚动，添加属性可解决该问题

background-attachment: fixed;   // 默认值 scroll 滚动

关于logo

不用img开发

出错的情况会显示一个灰色的图标，比较难看
网速慢的情况，css加载不出来，图片就没有，没办法进行进一步的开发

知识扩展

浏览器默认边距

ie8：上下16px 左右8px
ie7：上下16px 左右11px

CSS 书写顺序

位置属性：position，top，z-index，display，float等。
大小：width，height，padding，margin。
文字系列：font，line-height，letter-space，color等。
背景与边框：background，border。
其他：animation，transition