系列文章目录
三篇文章入门CSS（一）
三篇文章入门CSS（二）
三篇文章入门CSS（三）
内容预警
一.css的继承
1.样式的继承
在上一篇文章中我们已经学习css，知道了css实际上就是用于找到对应标签，给标签标记的内容加以修饰的工具。
标签我们已经学习过了，怎么样一步步找到想要修饰的标签在上一篇文章的选择器方面已经学过。
当我们对一个个标签进行修饰的时候就会发现，很多时候我们对于某一个标签（蛋糕某一层）的修饰，在它的子级标签（上方的一层）修饰工作是一样的。如果一直重复去做这些工作，会显的很呆。因此秉持着 懒人改变世界 的理念，我们就能理解css中的继承是用来干嘛的。
用来省事的
像儿子可以继承父亲的遗产一样，在CSS中，祖先元素上的样式，也会被他的后代元素所继承,
利用继承，可以将一些基本的样式设置给祖先元素，这样所有的后代元素将会自动继承这些样式，我们也就不用重复动手设置了。
实例:
下面我们只对div修饰了背景颜色，没有对p标签操作，在效果中，div内部的p标签也有黄色的背景
<div style="background-color: yellow;">
<p>
我是p标签中的文字
<span>我是span中的文字</span>
</p>
</div>
<span>我是p元素外的span</span>
但是并不是所有的样式都会被子元素所继承，比如：背景相关的样式 边框相关的样式 定位相关的都不会被继承
官方解释，继承是一种规则，它允许样式不仅应用于特定的html标签元素，而且应用于其后代元素。
2.选择器的权重
在前面的学习中可以注意到，一个标签可以通过很多方式来选中，而当使用不同的选择器，选中同一个元素并且设置相同的样式时，就会产生冲突，而最终到底采用哪个选择器定义的样式，由选择器的 优先级（权重） 决定，优先级高的优先显示。
优先级的规则：
| 选择器 | 优先级 |
|---|---|
| 内联样式 | 1000 |
| id选择器 | 100 |
| 类和伪类 | 10 |
| 元素选择器 | 1 |
| 通配* | 0 |
| 继承的样式 | 没有优先级 |
值得注意的是，当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后在比较，
但是选择器优先级计算不会超过他的最大的数量级，如果选择器的优先级一样，则使用靠后的样式。
也就是说，即便通过11个id选择器选中一个标签，也修改不了内联给标签的修饰
并集选择器的优先级是单独计算
div , p , #p1 , .hello{}
可以在样式的最后，添加一个!important，则此时该样式将会获得一个最高的优先级，
将会优先于所有的样式显示甚至超过内联样式，但是在开发中尽量避免使用!important
3.RGB颜色与像素
我们看到的网页色彩是五彩缤纷的，在现实中画家可以通过不同颜色混合调出想要的颜色，而在css中，我们则可以通过RGB函数来对我们想染色的标签进行调色（RBG是一种颜色系统）。
rgb()函数：语法：RGB(red,green,blue)
在rgb函数中，我们需要传入三个0-255之间的参数，它们代表着红，绿，蓝三种光的亮度，通过这三种光不同亮度的混合，我们就可以得到需要的如何一种色彩
| 参数 | 描述 |
|---|---|
| red | 三原色中的红色，必需，介于0 - 255之间（且包括）的数字 |
| green | 三原色中的绿色，必需，介于0-255之间（且包括）的数字 |
| blue | 三原色中的蓝色，必需，介于0-255之间（且包括）的数字 |
实例：
background-color: rgb(161,0,0);
background-color: rgb(100%,50%,50%);
background-color: #084098;
在实例中可以看到，除了直接写数字，rgb函数也支持传入百分比。
而第三种则是另一种css表示颜色的方法：十六进制颜色
通过6位16进制赋值：每一位都是0-f之间的值。（十六进制：0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f 其中 a ~ f 表示 10 ~ 15 这些称作十六进制数字
color : #ff0000; //红
color : #00ff00; //绿
color : #0000ff; //蓝
color : #ffff00; //黄
color : #000000; //黑
color : #ffffff; //白
除此之外还可以通过颜色名称赋值：red、blue、yellow
color : red; //红
此外css还有很多种调整颜色的方法，但目前我们掌握rgb函数就足够使用了
像素
像素是一个补充的知识点，可以直接跳过
物理像素：
我们在选购电脑时，会看到电脑支持1920*1080的分辨率，这里的分辨率就是物理像素的概念。不管是手机,电视
屏幕还是电脑的屏幕，屏幕上都有一个个很小的发光器件。如果你的电脑屏幕是1920*1080的分辨率，那么就是在
水平方向上有1920个发光器件，垂直方向上有1080个发光器件，凭你的肉眼是看不见的。
如果你把水滴滴在了屏幕就会发现水滴里的颜色就是红绿蓝的条纹(见下图),当在屏幕上展示一副图片时，此时每一
个发光器件都会发光(这是一句废话)，通过不同位置的发光器件的颜色混合，一张彩色图片就显示出来了。所以我们
在谈论手机、智能电视机的分辨率时，都是在谈论它们的屏幕而已。
逻辑像素：
我们也经常会说“这张图片的分辨率是1920*1080的”这样的话，那么图片的分辨率又是个什么意思呢？
假设你有一个相机，有天要给你老婆的脸部来个特写。你的相机内部拍照装置在水平方向上安装有1920个感光器件，
在垂直方向上安装有1080个感光器件，那么一共就有1920乘以1080等于2073600个感光器件。给你老婆脸部特写时，
每一个感光器件都拍下了脸部的一个点，那么就有2073600的点被拍下了，也就是你老婆脸部的照片就由这2073600
个点组成。这200多万个点以0和1的二进制数据流的形式存储在相机里，并且有一段二进制数据流记录下了这张图片的
像素信息，翻译成大白话就是“这张美照的分辨率是1920*1080，像素有2073600个”，这里记录下的像素信息就是逻
辑像素。所以我们在谈论逻辑像素的时候，都是在谈论一张图片、一部视频里面包含的逻辑像素信息。
二.网页的布局
1.文档流
normal flow 文档流
在样式的继承部分我们提到过，标签展示的效果可以看成是一个蛋糕，效果是一层一层叠加出来的。我们通过css可以为每一层设置样式，而用户，只会看到展示效果的最上一层。
这些层中，最底下的一层就叫做文档流（你可以将之比做蛋糕的托盘）
文档流是网页的基础，我们创建的元素都是默认在文档流中进行排列的
对于我们来说，元素也就是标签主要有两个状态：
- 在文档流中
- 不在文档流中(脱离文档流)
元素在文档流中的特点
块元素
1.块元素在文档流中会独占一行，块元素会自上向下排列。
2.块元素在文档流中默认宽度是父元素的100%
3.块元素在文档流中的高度默认被内容撑开
内联元素
1.内联元素在文档流中只占自身的大小，会默认从左向右排列，
如果一行中不足以容纳所有的内联元素，则换到下一行，
继续自左向右。
2.在文档流中，内联元素的宽度和高度默认都被内容撑开
注意：body也是一层元素，未被指定时，eg：div的默认宽度与body相同
实例：
<body>
<div style="background-color: #bfa;">
我是一个div
<div style="height: 50px;">我是一个div里的div</div>
</div>
<div style="width: 100px; height: 100px; background-color: #ff0;">我是另一个div</div>
<span style="background-color: yellowgreen;">我是一个span</span>
<span style="background-color: yellowgreen;">我是一个span</span>
<span style="background-color: yellowgreen;">我是一个span</span>
<span style="background-color: yellowgreen;">我是一个span</span>
<span style="background-color: yellowgreen;">我是一个span</span>
<span style="background-color: yellowgreen;">我是一个span</span>
</body>
2.盒子模型
在初步的理解了文档流的概念后，我们就会发现，仅仅靠标签的堆叠很难做到像京东，淘宝网站那样布局精美的页面，而接下来的概念就是实现精美页面的关键，也是css布局的的基石 ---- “盒子模型”
css为了将模块放到指定的位置，将页面中的所有元素都设置为了一个矩形盒子，顾名思义，它就像现实世界中的一个完整的盒子，包含四个部分：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）
如上方的图片中所示，平面的盒子模型其实更像是现实中的一个相框，每个相框与周边相框的距离为外边距
其中内容区就是标签元素所在地，元素中的所有子元素和文本内容都在内容区中排列
内容区的大小由width和height两个属性来设置
- width设置内容区宽度
- height设置内容区高度
.box{
width: 300px;
height: 300px;
}
要注意的是：width和height只是设置的盒子内容区的大小，而不是盒子的整个大小，盒子可见框的大小由内容区，内边距和边框共同决定
3.盒子边框
边框(border)属性,边框属于盒子的边缘，边框里的部分属于盒子内部，而出了边框的部分都是盒子外部(包括外边距)
边框的大小会影响到整个盒子的大小
要为一个元素设置边框必须指定三个样式
border-width:边框的宽度
border-color:边框颜色
border-style:边框的样式
border-width 设置边框宽度：
使用border-width可以分别指定四个边框的宽度
如果在border-width指定了四个值，
则四个值会分别设置给 上 右 下 左，按照顺时针的方向设置的
如果指定三个值，则三个值会分别设置给 上 左右 下
如果指定两个值，则两个值会分别设置给 上下 左右
如果指定一个值，则四边全都是该值
border-width:10px 20px 30px 40px ;
border-width:10px 20px 30px ;
border-width: 10px 20px ;
除了border-width，CSS中还提供了四个border-xxx-width
xxx的值可能是top right bottom left
专门用来设置指定边的宽度
border-left-width:100px ;
border-color设置边框的颜色
和宽度一样，color也提供四个方向的样式，可以分别指定颜色
border-xxx-color
border-color: red;
border-color: red yellow orange blue;
border-color: red yellow orange;*/
border-color: red yellow;
border-style设置边框样式
可选值：
- none，默认值，没有边框
- solid 实线
- dotted 点状边框
- dashed 虚线
- double 双线
style也可以分别指定四个边的边框样式,规则和width一致,
同时它也提供border-xxx-style四个样式,来分别设置四个边
border-style: double;
border-style: solid dotted dashed double;
4.简写属性
可以看到，一个盒子的边框就有三种属性需要修改，这在开发中如果一条一条写实很浪费时间的，所以css还提供了边框的简写属性：border 简写属性在一个声明设置所有的边框属性。
可以按顺序设置如下属性：
- border-width
- border-style
- border-color
也就是说使用一个border就可以设置一个盒子的三种边框属性：
border:5px solid red;//宽度5px的红色实线边框，属性间空格隔开
如果仅对盒子某个边框进行设置，border属性可以通过（border-边框）实现
- border-top
- border-right
- border-bottom
- border-left
border-top：10px solid orange；
5.内外边距
内边距(padding)
内容区和边框之间的距离是内边距，与边框一样，内边距也是有四个方向
padding-top
padding-right
padding-bottom
padding-left
内边距会影响盒子的可见框的大小，内容元素的背景会延伸到内边距上,
一个盒子的大小由内容区、内边距和边框共同决定，使用在计算盒子大小的时候，需要将这三个区域一起计算
盒子可见框的宽度 = border-left-width + padding-left + width +padding-right + border-right-width
可见宽的高度 = border-top-width +padding-top + height + padding-bottom + border-bottom-width
/*设置上内边距*/
padding-top: 100px;
/*设置右内边距*/
padding-right: 100px;
padding同样具有简写属性，可以同时指定四个方向的内边距，规则与border-width 一样
padding: 100px;
padding: 100px 200px;
padding: 100px 200px 300px;
padding: 100px 200px 300px 400px;
外边距(margin)
- 外边距不会影响盒子大小，但是会影响盒子的位置
- 外边距还可以设置为负值，对应的元素就会进行反方向移动
- 外边距同样可以使用简写属性 margin，可以同时设置四个方向的外边距,规则和padding一样
- 外边距同样有四个方向：
margin-top 上外边距，设置一个正值，元素本身会向下移动
margin-right 右外边距，默认情况下设置不会产生任何效果
margin-bottom 下外边距，设置一个正值，元素本身下方的元素会向下移动
margin-left 左外边距，设置一个正值，元素会向右移动
由于页面中的元素都是靠左靠上摆放的，所以注意当我们设置上和左外边距时，会导致盒子自身的位置发生改变，
而如果是设置右和下外边距会改变其他盒子的位置
就像下图的例子，为box1设置了上边距box1本身会向下移动，而块元素独占一行box2也会跟着移动：
而当我们去设置下外边框，box1本身不会向下移动而是box2向下移动：
auto：自动填充
margin还可以设置为auto，auto一般只设置给水平方向的margin，如果只指定，左外边距或右外边距的margin为auto则会将外边距设置为最大值，垂直方向外边距如果设置为auto，则外边距默认就是0
如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值，就可以使元素自动在父元素中居中，所以我们经常将左右外边距设置为auto，以使子元素在父元素中水平居中
6.水平布局，垂直布局
学习盒子的所有属性后，我们就可以知道一个元素标签的位置有哪几部分组成;
水平布局
水平方向上有下面七个属性：
- margin-left
- border-left
- padding-left
- width
- padding-right
- border-right
- margin-right
那么一个元素在其父元素中，水平布局要满足以下等式
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=父元素内容区宽度
以上等式对于任意的元素都是必须满足的，如果不满足的话等式不成立，则称为过渡约束，浏览器会自动调整
七个值中有三个可以设置为auto
width（默认就是auto），margin-left，margin-right
- 如果七个值中没有auto时，浏览器会自动调整margin-right的值以使等式满足
- 如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，试着为auto的外边距会自动为0
- 如果三个值都是auto，则外边距为0
- 如果是两个外边为auto，宽度固定，则会将外边距设置为相同的值
- 溢出情况margin为负值
垂直布局
垂直方向也有很多属性，但与水平方向有所不同，
在网页中相邻的垂直方向的外边距会发生外边距的重叠，所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和，如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素，重点在与相邻
默认情况下，父元素的高度被内容（包括子元素在内的内容区元素）撑开
子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出，使用overflow属性可以来设置父元素如何处理溢出的子元素
可选值：
visible默认值子元素会从父元素中溢出，在父元素外部的位置显示
hidden溢出内容将会被裁剪不会显示
scroll生成两个滚动条，通过滚动条来查看完整的内容
auto根据需要生成滚动条
.box3{
width: 200px;
height: 100px;
background-color: yellow;
overflow-y: scroll;//设置溢出处理方式
padding-top: 100px;
}
.box4{
width: 100px;
height: 300px;
background-color: yellowgreen;
}
<body>
<div class="box3">
<div class="box4"></div>
</div>
</body>
效果如下：
overflow-x与overflow-y是对水平与垂直方向做处理与overflow使用方法相同。
除此之外我们还可以使用box-sizing来设置盒子尺寸的计算方式（设置width和hight的作用）
box-sizing可选值：
content-box 默认值，宽高用来设置内容区大小
border-box 宽高用来设置整个盒子的可见框大小，也就是设置后的width和hight指的是内容区+内边距+边框的总大小
box-sizing:border-box;
7.行内元素的盒子模型，边距折叠
行内元素的盒模型
- 行内元素不支持设置宽度和高度
- 行内元素可以设置padding，但是垂直方向padding不会影响页面的布局
- 行内元素可以设置border，垂直方向的border不会影响页面的布局
- 行内元素可以设置margin，垂直方向的margin不会影响布局
行内元素设置padding水平方向并不会折叠， 水平方向的相邻外边距不会重叠，而是求和
行内元素对比块元素少了很多可以设置的地方，有时候我们会存在对行内元素设置格式的需求，这个时候就可以使用display与visibility达到我们想要的效果
display用来设置元素显示的类型
可选值:
inline将元素设置为行内元素block将元素设置为块元素
inline-block将元素设置为行内块元素
行内块，既可以设置宽度和高度又不会独占一行
table将元素设置为一个表格
none元素不在页面中显示
visibility用来设置元素的显示状态
可选值:
visible默认值，元素在页面中正常显示
hidden元素在页面中隐藏不显示,但是依然占据页面的位置
inline-block如果不理解，就把行内块元素当成一个字就行了
使用样例：
a{
background-color: #bfa;
display: none;
width: 500px;
height: 500px;
}
.box{
width: 100px;
height: 100px;
background-color: orange;
visibility:hidden ;
}
<body>
<div class="box"></div>
<a href="#">我是一个大大的超链接</a>
<span>hello</span>
</body>
8.样式去除，文字居中
浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的元素都设置了一些默认的margin和padding，而它的这些默认样式，正常情况下我们是不需要使用的。所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉。
*{
margin: 0;
padding: 0;
}
文字居中
要让一个文字在父元素中垂直居中，只需要将父元素的line-hight设置为一个和父元素height一样的值即可
9.阴影，轮廓，圆角
阴影，轮廓都不会影响页面布局，而是会出现在超出部分原有元素上下
box-shadow用来设置元素的阴影效果，阴影不会影响页面布局
- 第一个值水平偏移量设置阴影的水平位置正值向右移动负值向左
- 第二个值垂直偏移量设置阴影的水平位置正值向下移动负值向上
- 第三个值阴影的模糊半径
- 第四个值阴影的颜色
outline用来设置元素的轮廓线，用法和border一模一样，轮廓与边框的不同点在与轮廓不会影响可见框的大小
实例：
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: #bfa;
box-shadow: 0px 0px 50px rgba(0, 0, 0, .3);//rgba前面我们学到过，第四个参数代表透明度
}
</style>
</head>
<body>
<div class="box"></div>
</body>
border-radius圆角 圆角设置圆的半径大小，border-radius可以分别指定四个角的圆角
- 四个值左上，右上，右下，左下
- 三个值左上，右上/左下，右下
- 两个个值左上/右下 ，右上/左下
还可以指定需要设置的圆角
- border-top-left-radius:
- border-top-right-radius:
- border-bottom-left-radius :
- border-bottom-right-radius :
设置时也可以设置圆角为椭圆，用 / 将X/Y半径隔开
border-radius：20px /40px;
三.定位
1.浮动
在上面圆角的示例图中我们可以看到，明明三个div所占宽度不能占满一排，但他们还是垂直排列，这是因为之前我们提到的块元素独占一行的特性，那如果我们有将他们排列在一行的需求时，就需要用到了浮动
使用float来使元素浮动，从而脱离文档流
float可选值：
none，默认值，元素默认在文档流中排列
left，元素会立即脱离文档流，向页面的左侧浮动
right，元素会立即脱离文档流，向页面的右侧浮动
注意,元素设置浮动以后,水平布局的等式便不需要强制成立
元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，
所以元素下边的还在文档流中的元素会自动向上移动
浮动的特点:
- 浮动元素会完全脱离文档流，不再占据文档流中的位置
- 设置浮动以后元素会向父元素的左侧或右侧移动，
- 浮动元素默认不会从父元素中移出
- 浮动元素向左或向右移动时，不会超过它前边的其他浮动元素
- 如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移6、浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高
简单总结:
浮动目前来讲它的主要作用就是让页面中的元素可以水平排列，元素浮动之前，也就是在文档流中，是竖向排列的，而浮动之后可以理解为横向排列。通过浮动可以制作一些水平方向的布局
举个例子：
下面是没有设置浮动时
给box3设置一个右浮动后，它会脱离文档流，由于box2是一个未浮动的块元素，所以它会来到页面右边，在box2之下
而当我们给box2也加上浮动，让它左浮动后，box3就会上去
呐，如果只设置box2的话，box3就会按文档流排序在box1下面，box2脱离了文档流左浮动，显示在box3上方
上图还有一个问题不知道你有没有发现：box3文字没有上去
这是因为浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，浮动设计的初衷就是用来环绕图片的，浮动可以用来将文字设置在图片间环绕
2.高度塌陷
前面我们学到过，在css中，父元素如果没有设置宽高，那么它的宽高是由子元素撑开的，下图中box1由box2和文字撑开
那么当我们让box2浮动后，其会完全脱离文档流，子元素从文档流中脱离，将会无法撑起父元素的高度，导致父元素的高度丢失
父元素高度丢失以后，其下的元素会自动上移，所以box3上升，导致一部分被box2遮住，页面的布局混乱，这就是高度塌陷，高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理!
3.bfc
BFC(Block Formatting Context) 块级格式化环境
BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC
开启BFC该元素 会变成一个独立的布局区域
元素开启BFC后的特点:
- 开启BFC的元素不会被浮动元素所覆盖
- 开启BFC的元素子元素和父元素外边距不会重叠
- 开启BFC的元素可以包含浮动的子元素
可以通过一些特殊方式来开启元素的BFC:
- 设置元素的浮动(不推荐)
- 将元素设置为行内块元素(不推荐)
- 将元素的overf low设置为一个非visible的值，常用的方式为元素设置。overflow:hidden开启其BFC以使其可以包含浮动元素开启BFC的元素可以包含浮动的子元素
4.clear
5.高度塌陷的最终方案
1.高度塌陷的原因是 父元素被子元素撑开高度，当子元素浮动时，父元素将不再被撑开，
解决方法为：在子元素的后面插入一个clear清除了影响的空白元素，来代替子元素撑开父元素，同时因为这是装饰性问题，我们选择用伪类解决，伪类是一个行内元素，要加上display将之变为块元素
代码如下，注意content要有，作为空白内容，否则无法解决
同时这个方式也可以用来解决外边距重叠
因此当遇到这两个问题时可以直接使用这个固定写法来解决
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
