CSS 知识总结（一）

一、CSS 层叠样式表

1. 样式层叠

可以多次对同一选择器进行样式层叠

p {
    color: pink;
  }
p {
    font-size: 40px;
  }

2. 选择器层叠

可以用不同选择器对同一元素进行样式说明

 //html
 <p>你好</p>
 <p class="g">世界</p>

//css
p {
   color: pink;
   }
.g {
    font-size: 40px;
    }

3.文件层叠

可以使用多个CSS文件

这些特性使得CSS极度灵活

二、CSS版本

1. CSS2.1

使用最广泛的版本

2. CSS3

现代版本，分模块

三、CSS语法

1. 样式语法

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

注意

1. 所有符号都是英文符号
2. 区分大小写
3. 没有//注释

2. at语法

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

注意

1. @charset必须在第一行
2. 前两个@必须以分号结尾
3. charset是字符集意思，但UTF-8是字符编码

四、CSS中的基本概念

1. 文档流Normal Flow

1> 流动方向

① inline元素从左到右，到达最右才会换行，例如span

② block元素从上到下，每一个都是另起一行

③ inline-block也是从左到右，到达最右不会另起一行

2> 宽度

① inline宽度为内部inline元素的和，不能用width指定

② block默认自动计算宽度，可用width指定

③ inline-block结合前两者特点，可用width

3> 高度

① inline高度由行高inline-height间接决定，与height无关

② block高度由内部文档流决定，可以设height

③ inline-block和block类似，可以设置height

注意

如果div里面什么都没有，div高度为0；span里什么都没有，高度仍由line-height决定

溢出 overflow

<div class="div1">
   eadhefhjefbejfhrhbctirjtnehcgeurbnegfwxfyueriocfbygo........(很多内容)
</div>

.div1 {
   border: 2px solid #ccc;
   height: 200px;     /*空间有限，内容会溢出盒子*/
   }

解决方法

.div1 {
    border: 2px solid #ccc;
    height: 200px; 
    overflow: visible;   /*默认显示*/
    overflow: hidden;    /*超出部分隐藏*/
    overflow: scroll;    /*具有滚动条*/
    overflow: auto;      /*超出内容时才显示滚动条*/

注意

1. 如果有滚动条（auto），内容默认只在第一屏中显示
2. overflow分为overflow-x和overflow-y

2. 脱离分档流

<div class="div1">
   <div class="div2">
       <span>你好</span>
   </div>
</div>

.div1 {
   border: 1px solid red;   /*高度由div2决定*/
}
.div2 {
   border: 1px solid green;    /*高度由span决定*/
}
span {
   position: absolute;
   //flaot: left;          /*脱离文档流，内容将不再算进高度*/
}

可以脱离文档流的元素

float、position:absolute/fixed

3.盒模型

1> 两种盒模型

1. content-box内容盒：内容就是盒子的边界
2. border-box边框盒: 边框才是盒子的边界

2>公式

1. content-box： width=内容宽度
2. border-box：width=内容宽度+padding+border

3> 选择方式

box-sizing: content-box;
box-sizing: border-box;

4.margin合并

1>两种情况

<div class="parent">
    <div class="child1">第一个孩子</div>
    <div class="child2">第二个孩子</div>
</div>
 
.parent {
    border: 1px solid red;
     /*margin-bottom: 30px;*/
    }
.child1 {
    border: 2px solid blue;
    /*margin-bottom: 30px;*/
    }  
.child2 {
    border: 2px solid green;
    /*margin-top: 10px;*/
    }

结果显示

1. 父子合并

高度会变短。父亲和第一个孩子发生合并，且上下重叠，左右不重叠

解决方法

在父元素中

1.加padding/border挡住

2. 用overflow： hidden

3. 用display: flex

2. 兄弟合并

注意

margin显示数值大的那个

解决方法

① display: inline-block; 用这个方法元素会挤在一行，可以写width：100%；