前言
学习本节首先需要了解，HTML，CSS的基础部分
HTML基础知识
CSS基础知识
什么是标准流
普通流（标准流):
所谓的标准流，就是标签按照规定好默认方式排列
–1.块级元素会独占一行，从上到下顺序排列
–常用元素:div hr p h1-h6 ul ol dl form table
–2.行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行
–常用元素：span a i em
以上都是标准流布局，我们本节学习的就是标准流，标准流是最基本的布局方式
上图就是一个基本的标准流网页布局。
为什么要学习标准流
做网页的我们首先需要布局，然后再去填写相关样式。所以我们需要了解如何对网页进行布局。
而网页布局最基础的则是标准流，如果想要学习更多的东西比如浮动，定位，都需要标准流作为基础。
本节将带领读者了解与标准流相关联的知识，也为后续的学习打下基础。博客将持续更新，也期待大家的关注。
一，CSS的三个重要性质
CSS的三个性质分别是：层叠性，继承性以及优先级
实则可以概括为我们在用选择器时需要注意的事项以及选择器的具体用法
1.1 层叠性
首先我们来看一段代码（本文为方便阅读减少篇幅只保留了style和body）
<style>
div {
color: red;
}
div {
color: pink;
}
</style>
<body>
<div>长江前浪推后浪，前浪死在沙滩上/div>
</body>
请读者思考，div中的文字内容会是什么颜色？
答案是粉色。
当我们给相同的选择器赋予相同的样式，其中一个样式会覆盖另一个样式（冲突），而层叠性就用来解决这种问题
解决方法：样式冲突，就近原则，哪个样式离结构近，就执行哪个样式
样式不冲突则不会层叠
1.2 继承性
1.2.1 java中的继承性*
在java语言中，继承的关键词是extends，继承即子类继承父类。
在调用时，子类的对象可以调用父类的方法，而父类的对象不可调用子类的方法。
而如果在子类中如果有方法的方法名与父类方法名相同，则子类中的方法将覆盖父类的方法。
public class Father(){
int a=0;
}
public class Son extends Father(){
int b=1;
}
则我们可以定义一个父类对象f，一个子类对象s
Father f=new Father();
Son s=new Son();
下面是调用
System.out.print(f.a);//正确，a是父类的对象，父类有成员a
System.out.print(f.b);//错误，父类中没有b
System.out.print(s.a);//正确，s是子类的对象，子类中虽然没有a但是继承父类，所以可以用
System.out.print(s.b);//正确，子类中有成员b
1.2.2 CSS中的继承
与java类似，子类可以继承父类的样式
<style>
div {
color: pink;
font-size: 14px;
}
</style>
<div>
<p>龙生龙，凤生凤，老鼠生的孩子会打洞</p>
</div>
虽然p没有指定样式，但是可以继承父亲的样式，所以得到的文字是粉色的
请读者思考，如果div的样式与p的样式矛盾该如何处理？
在这里我给p选择器指定了文字的颜色
<style>
div {
color: pink;
font-size: 14px;
}
p {
color: red;
}
</style>
<div>
<p>龙生龙，凤生凤，老鼠生的孩子会打洞</p>
</div>
所以与java类似，当我们重新给子元素指定了样式，则会遵循新指定的样式，而不是采用父类中的样式
1.2.3 行高的复习
首先，什么是行高？
行高=文字高度+上行高+下行高
在CSS中，line-height属性用于设置行间的距离（行高）可以控制文字行与行之间的距离
其次，行高怎么用？
一般情况下我们给文字设定行高可以控制它在那一行的y轴位置
<style>
div {
background-color: pink;
height: 50px;
}
</style>
<body>
<div>
<p>复习行高</p>
</div>
</body>
这里我设置了一个高度为50px的盒子并在里面放了一个没有单独定一样是的p标签
效果图：
如何让文字在这一行的正中间，只需要文字大小等于行高即可
p {
line-height: 50px;
}
因为行高等于文字高度加文字上高度加文字下高度，使得文字行高与其相同就代表文字所占行高与盒子行高相同，而上行高与下行高数值相等，所以得到的结果就是文字处于正中间。
1.2.4 行高的继承
这里首先要跟大家说一种方便的写法，我们在写文档时候要设置文字的大小与行高，而这两个可以写在一起
font: 12px/1.5
左边为文字大小，右边意为：现在高度为原行高的几倍
<style>
body {
color: pink;
font: 12px/1.5 '微软雅黑';
}
div{
font-size: 14px;
/* 子元素继承了父元素的行高1.5，文字大小当前的1.5倍，当前div的行高就是14*1.5=21px */
}
p {
font-size: 20px;
}
</style>
<body>
<div>粉红色的回忆</div>
<p>粉红色的回忆</p>
<!--也可以继承行高，行高24px
行高可以跟单位也可以不跟单位
body行高1.5这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高-->
<ul>
<li>我没有指定文字大小，但是我ul的，ul没有我就继承body的，所以我的文字行高是1.5px</li>
</ul>
</body>
div本为14px，p本为20px，由于继承了body的样式，所以div显示则为141.5,201.5
1.3 优先级
当一个元素有多个选择器，就会有优先级的概念，如果选择器相同，则执行相同的样式，如果不同，则需要看每个选择器的权重。
通俗来讲，就是看选择器的地位，选择器的地位越高，则优先执行该选择器所对应的样式。
以下为选择器的样式
仔细观察下表会发现，控制范围越小，选择器权重越大
| 选择器 | 权重 | |
|---|---|---|
| 继承或者* | 0,0,0,0 | |
| 元素选择器 | 0,0,0,1 | |
| 类选择器 | 0,0,1,0 | |
| id选择器 | 0,1,0,0 | |
| 行内样式 | 1,0,0,0 | |
| ! important | 无穷大 |
<style>
#father {
color: red;
}
/* 父亲的权重是100，但是p的继承权重是0，所以我自己写的样式权重会更高 */
/* 所以以后我们看标签到底要执行哪个样式，就先看这个标签有没有直接选出来 */
p {
color: pink;
}
</style>
</head>
<body>
1.权重是有4组数字组成但是不会有进位
2.可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，范围越小，权重越高
最后的答案是粉色。继承的权重是0，如果该元素没有选中，不管父元素权重多高，子元素得到的权重都是0
<div id="#father">
<p>你还是很好看</p>
</div>
<a href="#">我是单独的样式</a>
<!-- a链接浏览器默认指定了一个样式，蓝色的，有下划线，单独写出来了，有自己的样式不会继承 -->
</body>
1.4 权重的叠加
权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重
计算权重即将权重相加，然后比较权重之和，谁的权重大用谁。
<style>
li {
color: red; 元素选择器，0001
}
ul li {
color: green; 元素选择器*2 0002
}
.nav li {
color: pink; 类选择器+元素选择器0011
}
</style>
</head>
<body>
权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重
<ul class="nav">
<li>大猪蹄子</li>
<li>大肘子</li>
<li>猪尾巴</li>
</body>
最后结果为粉色
二，块元素，行内元素，行内块元素
2.1 块元素
块元素：h,p,div,ul,ol,li,dldt,其中div是最典型的块元素
这里要重点强调div
div 1.比较霸道自己独占一行
2.高度，宽度，外边距以及内边距都可以控制
3.宽度默认是容器（父级宽度）的100%
4.是一个容器及盒子，里面可以放行内或者块级元素
注意： 注意：文字类的元素不能使用块级元素，p标签主要用于存放文字，因此p里面不能放块级元素，特别是不能放div ，同理，h1-6等都是文字块级标签，里面也不能放其他块级元素
2.2 行内元素
1.相邻行内元素在一行上，一行可以显示多个
2.高，宽直接设置是无效的
3.默认宽度就是它本身的宽度
4.行内元素只能容纳文奔或其他行内元素
常见的行内元素有a,strong,b,em,i,del,s,ins,u,span
行内元素不允许放入块级元素
这里需要注意一个问题：链接里面不能放链接！！！
a中还可以放块级元素，比如点击图片。
2.3 行内块元素
一般由转换得到
有以下几点特点：
特点一：中间会有空隙，一行可以显示多个
特点二：默认宽度就是它本身内容的宽度(行内元素特点)
特点三：高度，，行高，外边距及内边距可以控制
概括：具有行内特点，一行可以显示多个，又具有块级元素的特点，可以调整大小
2.4 转换
特殊情况下我们需要元素模式的转换，简单理解：一个模式的元素需要另外一种元素的特性，比如想要增加链接a的触发范围
就比如，a本身是行内元素，我们需要给a触发特性，则需要把a转化成块级元素
display：block转化成块级元素
display: inline-block 转化成行内块元素
<style>
a {
width: 150px;
height: 50px;
background-color: pink;
/* 把行内元素a转化成块级元素,每一个块级元素独占一行，而且可以调整高度宽度*/
display: block;
}
div {
width: 300px;
height: 100px;
/* background-color: purple;此时宽度高度无效 inline */
}
span {
width: 100px;
height: 30px;
background-color: salmon;
display: inline-block;转化成了行内块元素
}
</style>
</head>
<body>
<a href="#">我是行内元素</a>
<div>我是块级元素</div>
<span>行内元素转化为行内块元素</span>
三，盒子模型
3.1 你需要了解盒子模型的知识点
能够准确阐述盒子模型的四个组成部分
能够利用边框复合写法给元素加边框
能够计算盒子的实际大小
能够利用盒子模仿布局模块案例
3.2 网页布局过程
网页布局：
1.先准备好相关的网页元素，网页元素基本都是盒子BOX
2.利用CSS设置好盒子样式，然后放到相应位置
3.往盒子里装内容
本质：站在底层，把网页看成盒子div，span，p等等，把图片装进盒子中
3.3 盒子模型的组成
所谓盒子模型：就是把html页面中的布局元素看做是一个矩形的盒子，也就是一个盛装内容的容器
CSS盒子模型本质上是一个盒子，封装周围的html元素，它包括：边框，外边距，内边距和实际内容
border： 盒子的边框
content： 盒子里的内容
padding： 内边距
margin： 外边距
3.4 边框
border可以设置元素的边框，边框三部分组成：宽度（粗细）（边框样式）（边框颜色）
border-width,border-style,border-color
<style>
div {
width: 300px;
height: 200px;
/* border-width: 5px; */
/* 粗细 */
/* border-style: solid;实线 */
/* border-style: dashed;虚线*/
/* border-style: dotted; */
/* 点线 */
/* border-color: pink; */
/* 符合性写法 border: 1px solid red;没有先后顺序 */
border: 5px solid pink;
}
</style>
</head>
<body>
<div></div>
</body>
如果想要加上单边边框也很容易
border-top:属性
border-bottom
border-left
border-right
例如
<style>
div {
width: 300px;
height: 200px;
border-top: 10px solid pink;/* 只设定上边框 */
border-bottom: 10px dashed purple; /*下边框*/
}
</style>
<body>
<div></div>
</body>
具体样式大家可以翻阅文档查询
3.4.1 边框影响盒子的大小
本来盒子是200200，加了边框，如果边框为1px，整个盒子看上去为201201，测量盒子
如何解决：
1.测量盒子大小不需要测量边框，直接测量内容
2.如果测量的时候包含了边框，则需要width、height减去边框宽度
我们只需要测量粉色部分即可，即为实际盒子大小
3.5 内边距
padding属性用于设置内边距，即边框与内容之间的距离
padding: 10px;
边框与内容之间内边距为10px（上下左右）
当然，上下左右边距也可以单独设置
padding-left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom 下内边距
请看效果
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
padding-left: 20px;
padding-top: 30px;
}
</style>
</head>
<body>
<div>
盒子内容是content盒子内容是content盒子内容是content盒子内容是content
</div>
左边离盒子大概是30px,而上边离盒子大概是20px
我们可以把上下左右四个方向放在一起写，也可以组合着写
padding: 5px; 1个值，代表上下左右都有5像素内边距
padding: 5px 10px; 2个值，代表上下边距是5像素，左右内边距是10像素
padding: 5px 10px 20px; 3个值，代表上内边距5像素，左右边距10像素，下边距20像素
padding: 5px 10px 20px 30px; 4个值，代表上边距5像素，右边距10像素，下边距20像素，
左边距30像素，顺时针
3.5.1 内边距撑开盒子
如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子
未设置内边距大小
设置内边距大小
采取策略:如果保证盒子跟效果图大小保持一致，则让width/height减去多出来的边距大小即可
而，如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小
3.6 外边距
margin用来设置外边距，即控制盒子和盒子之前的距离
margin-left 左外边距
margin-right 右外边距
margin-top 上外边距
margin-bottom 下外边距
简写形式与padding完全一样
3.6.1 外边距的典型作用——让盒子水平居中
外边距可以让块级盒子水平居中，但是必须满足两个条件
1.盒子必须指定了宽度否则和父亲浏览器一样宽就没办法改变盒子了
2.盒子左右外边距都设置为auto
<style>
.header {
width: 900px;
height: 200px;
/* margin: 0 auto; */
background-color: pink;
/* 意思是上下没有外边距，左右居中 */
margin: 100px auto;
/* 上下外边距为100px,左右为居中 */
}
</style>
</head>
<body>
<div class="header"></div>
</body>
没有外边距，左右居中
上下外边距为100px，左右居中
3.6.2 行内元素与行内块元素水平居中
以下三种操作都可以
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;
注意，以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其–父元素–添加text-align:center即可
3.6.3 外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并
什么是外边距的合并？
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距而下面的元素有上外边距，则他们之间的垂直间距不是margin-bottom与margin-top之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并
解决方案：尽量只给一个盒子添加margin的值
3.6.4 嵌套块元素的垂直外边距塌陷
请看下列代码
<style>
.father {
width: 400px;
height: 400px;
background-color: rgb(63, 54, 63);
margin-top: 50px；
}
.son {
width: 200px;
height: 200px;
background-color: pink;
margin-top:100px;
}
</style>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
这里，给父元素设置了上外边距50px，给子元素设置了上午外编剧100px。
需要注意，如果都没有设置外边距的情况是：
而设置了外边距之后
在这里，子元素非但没有与父元素产生外边距，反而被拉下来了，遇到这种情况，是因为父元素的外边距更大，所以把子元素拉下去
解决方法：
解决方案：可以为父元素定义上边框(透明transparent)
可以为父元素定义上内边距
可以为父元素添加overflow：hidden
一般采取第三种
最后能得到我们需要的效果
3.6.3 清除内外边距
为什么需要清除？
网页元素很多都带有默认内外边距，而且不同的浏览器默认的也不一致，因此我们在布局前，首先要清除下网页元素的内外边距
解决方法：
在css中写上这样一串代码即可
* {
/* 通配符选择器，意思是把所有的标签都选出来 */
/* 清除内边距 */
padding: 0;
margin: 0;
/* 清除外边距 */
}
四，标准流布局练习
我们要做的就是本节开头的布局页面
分析思路：
一共有四个盒子->四个盒子由上到下开始排列（标准流）->通过选择器设置每一个盒子的大小->分别写出他们的边距即可
注意：盒子如果没有设置宽度则默认其宽度为浏览器宽度
参考代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box .last {
margin-right: 0;
}
.top {
/* 因为宽度就是浏览器宽度所以不用设置 */
height: 50px;
background-color: gray;
}
.banner {
height: 150px;
width: 980px;
margin-top: 10px;
margin: 10px auto;
background-color:gray;
}
.box {
width: 980px;
height: 300px;
background-color:gray;
margin: 0 auto;
}
.footer {
height: 200px;
background-color: gray;
margin-top: 10px;
}
</style>
</head>
<body>
<!-- 1,2 标准流做上下，浮动做左右 -->
<div class="top">top</div>
<div class="banner">banner</div>
<div class="box"></div>
<div class="footer">footer</div>
<!-- 只要是通栏的盒子都和浏览器一样宽，不需要指定宽度 -->
<!--先画盒子再填样式-->
</body>
</html>
1523
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
