基础概述

CSS牛X之处在哪？

层叠样式表，包括如下：

样式层叠可以多次对同一选择器进行样式声明
选择器层叠可以用不同选择器对一同元素进行样式声明
文件层叠可以用多个文件进行层叠

CSS常见版本

CSS2.1 使用最广泛的版本
CSS3 现代版本，分模块

如何查询CSS支持哪些特性？

在caniuse.com 输入样式直接查询

其他

学习CSS会出现入门简单，越到后期越难以琢磨的情况，CSS是艺术，

语法

语法一：样式语法

选择器 {
    属性名：属性值；
    /*注释*/
}

注意：

所有符号都是英文符号
区分大小写
没有//注释
任何地方写错，都不会报错，浏览器会直接忽略

语法二：at语法

只有下面三个语句常用

@charset "UTF-8";
@import url(2.css);
@media (min-width:100px)and(max-width 200px){
    语法一
}

注意：

@charset 必须放在第一行
前两个at语法必须以分号结尾

Border调试法

给怀疑有问题的元素加上border
border没出现
- 在选择器第一行，则说明选择器错了
- 将border一行一行往下移，若效果没出现则说明border的上一行代码有误
border出现，查看边界是否符合预期

基本单位和颜色

长度单位

px 像素
em 相对于自身font-size的倍数

颜色

十六进制 #FF6600或#F60
RGBA颜色 rgb(0,0,0)或者rgba(0,0,0,1)最后一位取0到1，表透明度
hsl颜色 hsl(360,100%,100%)第一位表色相，第二位表饱和度，第三位表亮度

文档流

文档中元素流动方向注：HTML5元素不分内联元素和块级元素，可以通过给定样式互相转换
display:inline 转换成内联元素 display:block 转换成块级元素以下只是方便称呼

流动方向

inline元素从左到右，到达最右边才会换行
block元素从上到下，每一个都另起一行（div再窄也占一行）
inline-block也是从左到右，但不会垮两行

文档流.png

宽度

inline宽度为内部inline元素的和，不能用width指定
block默认自动计算宽度，可用width指定（block默认宽度是auto,不是100%，绝大多数情况下也别指定宽度为100%）
inline-block宽度为内部inline元素的和，可用width指定

高度

inline高度由line-height(字体不同可能会对line-height产生一些影响)间接确定，跟height无关（padding也会改变可视高度，不会改变实际高度）
block高度由内部文档流元素决定，可以设height
inline-block跟block类似，可以设置height

注：

div里面为空则其高度是0
span里面为空高度不是0，因为其高度由line-height决定

溢出

当内容的宽度或高度大于容器的，会溢出

overflow:hidden 直接隐藏溢出部分
overflow:scroll 显示出滚动条（就算没有超出，也会一直显示滚动条）
overflow:auto 根据内容是否溢出，灵活确定是否显示滚动条
overflow:visible 直接显示溢出部分

脱离文档流

block高度是有文档流元素决定的，也就说明有些元素可以不在文档流之内即脱离文档流，脱离文档流，block就不会计算它的高度。

脱离文档流的方式：

float: left
position:absolute或position:fixed

盒模型

盒模型.png

content-box 内容盒，内容即盒子的边界
- content-box width = 内容宽度
border-box 边框盒,边框才是盒子的边界
- border-box width = 内容宽度 + padding + border

我们给两个盒模型同样设置宽度width:100px，效果如下： content-box：边框盒.png

border-box：

内容盒.png

一般来说，border-box好用

margin合并

父子合并

parent的上边距会与第一个孩子的上边距合并，下边距会与最后一个孩子的下边距合并, 且谁的值高就会margin就会取谁的值。

这种合并只存在于上下边距，不会存在与左右边距。

父子合并.png

兄弟合并

parent包含的子元素中，第一个div的Margin-bottom（下外边距）会与第二个div的margin-top（上外边距）合并。

兄弟合并.png

如何阻止合并

父子合并
- 给parent元素，加上padding/border（用padding或border将父子隔开，即可消除合并）
- 给parent元素，加上overflow:hidden
兄弟合并
- 用lnline-block 消除，效果如图

兄弟合并解决.png

盒模型简单应用

画出一个彩虹

<body>
<div class="rainbow">
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>

* {
  box-sizing: border-box;
  padding: 0;
  margin:0;
}
body {
  background: white;

}
.rainbow {
  height: 200px;
   overflow: hidden;
}

.rainbow div {
  overflow: hidden;
}

.rainbow > div {
  height:400px;
  width:400px;
  background:red;
  border-radius: 50%;
}

.rainbow > div >div{
  height:380px;
  width:380px;
   margin: 10px;
  background:#FF6600;
  border-radius: 50%;
}
.rainbow > div >div>div{
  height:360px;
  width:360px;
   margin: 10px;
  background:yellow;
  border-radius: 50%;
}

.rainbow > div >div>div>div{
  height:340px;
  width:340px;
   margin: 10px;
  background:rgb(9,241,117);
  border-radius: 50%;
}

.rainbow > div >div>div>div>div{
  height:320px;
  width:320px;
   margin: 10px;
  background:rgb(97,205,231);
  border-radius: 50%;
}
.rainbow > div >div>div>div>div>div{
  height:300px;
  width:300px;
   margin: 10px;
  background:blue;
  border-radius: 50%;
}
.rainbow > div >div>div>div>div>div>div{
  height:280px;
  width:280px;
   margin: 10px;
  background:rgb(139,14,180);
  border-radius: 50%;
}
.rainbow > div> div > div > div >div > div > div > div {
  background: hsl(330, 80%, 100%);
  height: 260px;
  margin: 10px;
  border-radius: 50%;
}

效果如图：

注意：

parent div 表示parent下的所有div
parent>div 表示parent里的第一个div

简单总结CSS基础概念