一、CSS的继承性和层叠性
二、盒模型
三、padding属性
四、border属性
五、margin属性
六、标准文档流
七、行内元素和块状元素转换
1️⃣ CSS的继承性和层叠性
1、继承：给父级设置一些属性，子级继承了父级的该属性，这就是css中的继承。
有一些属性是可以继承下来的：如color、font-*、text-*、line-*文本元素，而像一些盒子元素，定位的元素（浮动、绝对定位、固定定位）不能继承。
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css继承性</title> <style type="text/css"> .father{ color: #6f42c1; font-size: 18px; background-color: #5bc0de; } .son{ color: #1c7430; font-size: 30px; } </style> </head> <body> <div class="father" id="cc"> <div class="son"> <p>你好，明天！</p> </div> <p>我是一个孤独的段落</p> </div> </body> </html>
2、层叠性
我们现在已经学过了很多的选择器，也就是说我们有很多种方法从HTML中找到某个元素，那么就会有一个问题：如果
我通过不用的选择器找到了相同的一个元素，并且设置了不同的样式，那么浏览器究竟应该按照哪一个样式渲染呢？
也就是不同的选择器它们的优先级是怎样的呢？
是先来后到呢还是后来居上呢？统统不是，它是按照下面的选择器的权重规则来决定的。
敲黑板，划重点了！！！
CSS选择器优先级
内联样式的权重为 1000
id选择器的权重为 100
类选择器的权重为 10
元素选择器的权重为 1
权重计算永不进位
简而言之就是：内联样式的优先级最高，其次是id选择器，接着是类选择器，最后是标签选择器。
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css继承性</title> <style type="text/css">
/* 第一种情况 --- 非继承（直接选中） */ /*** 1.1 直接选中时（非继承）时比较方法，分权重不同时和相同时***/ /*选择器 数目 选择器 数目 选择器 数目 权重合计*/ /* ID 2 类 0 标签 1 权重201*/ #box1 #box2 p{ color:green; font-size: 10px; } /*ID 1 类 1 标签 0 权重110*/ #box2 .wrap3{ color:royalblue; font-size: 15px; } /*ID 1 类 0 标签 3 权重103*/ div div #box3 p{ color:pink; font-size: 20px; } /*ID 0 类 3 标签 4 权重034*/ div .wrap1 div .wrap2 div .wrap3 { color:blueviolet; font-size: 30px; } /* 1.2 当两者的权重相同时，后者覆盖前者，只显示后者的样式*/ /*ID 1 类 1 标签 1 权重111*/ #box1 .wrap2 p{ color:red; } /*ID 1 类 1 标签 1 权重111*/ #box2 .wrap3 p{ color:gold; }
/* 第二种情况----继承 */ /***当两个均为继承时的比较方法，权重直接为0，此时遵循“就近原则”（谁描述得更接近属性，就显示谁的属性）***/ /*以下两个实际权重均为0，所以遵循“就近原则”，#box1 .wrap2 .wrap3更接近被描述的元素，所以发挥作用*/ #box1 #box2 { color:blue; } /*ID 1 类 2 标签 0 此时为继承，所示实际权重为0 */ #box1 .wrap2 .wrap3 { color:palegreen; } .spe1{ color:royalblue; } .spe2{ color:lightpink !important; } ul{ font-size: 30px !important; } li{ font-size: 10px; color:burlywood; } </style> </head> <body> <div id="box1" class="wrap1"> <div id="box2" class="wrap2"> <div id="box3" class="wrap3"> <p>我是一只小小鸟</p> </div> </div> <div> <!--以下两句效果完全相同，说明类名顺序无关--> <p class="spe1 spe2">我是小小段落1</p> <p class="spe2 spe1">我是小小段落2</p> </div> <div class="list"> <!--!import 对继承无效--> <ul> <li>我是无序的list</li> </ul> </div> </div> </body> </html>
总结：
① 当添加css样式的元素，是被直接选中（紧贴添加css样式的那个元素）时，就数数（依次统计id选择器，
class选择器和标签选择器的数目），其中id选择器的权重最大（100/个），其次是class选择器（10/个），最后是
标签选择器（1/个），谁的权重大就显示谁的属性；权重一样大时，后来者居上。
② 当添加css样式的元素，是被继承（非直接选中）时，此时权重不起作用，均为0，此时，按照“就近原则”，
遵循谁描述得接近元素，就显示谁的属性；当都描述的一样近时，又开始计算权重（计算方法同①），谁大就显示谁。
注意：
还有一种不讲道理的!import方式来强制让样式生效,但不影响继承来的权重，而只对直接选中的情况有影响，
但是不推荐使用。因为大量使用!import的代码是无法维护的。
2️⃣ 盒模型
1、何谓盒模型？
在网页中基本上都会显示一些方方正正的盒子，这种盒子就被我们称为盒模型。
2、盒模型重要的属性
重要的属性：width,height,padding,border,margin
width:指的是内容的宽度，而不是整个盒子真实的宽度
height：指的是内容的高度，而不是整个盒子的真实的高度。
3、盒模型的计算方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒模型</title> <style type="text/css">
/* 影响盒模型的几个元素：width、height、padding、border,由此盒模型的计算有以下几种方式：*/
/*比如做一个402px*402px的盒子*/ /*盒模型计算方式一*/ /*div{*/ /*width:400px;*/ /*height:400px;*/ /*padding: 0px;*/ /*border: 1px solid yellow;*/ /*}*/ /*盒模型计算方式二*/ /*div{*/ /*width: 200px;*/ /*height: 200px;*/ /*padding: 100px;*/ /*border: 1px solid blue;*/ /*}*/ /*盒模型计算方式三*/ div{ width: 0px; height: 0px; padding: 200px; border: 1px solid gold; } /*要保证盒子的真实宽度，加width时就应该减padding，减width时就应该加padding，
注意，padding指的是上右下左四个方向上的内间距，因此padding数值的改变会同时影响width和height的数值。*/ </style> </head> <body> <div> 这是一个盒模型 </div> </body> </html>
3️⃣ padding属性
1、何谓padding属性？
就是内边距，padding的区域是有背景颜色的，并且背景颜色和内容区颜色一样，
也就是说background-color这个属性将填充所有的border以内的区域。
就是边框到内容之间的距离。
padding有四个方向，所以我们能描述4个方向的padding。
方法有两种：1、写小属性 2、写综合属性，用空格隔开
2、如何设置padding的属性？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒模型</title> <style type="text/css"> div{ width: 200px; height: 200px;
/* ---- 第一种最简单的设置方法：上右下左的内边距设置为相同的数值------------- */
/* padding: 20px; */ background-color: #5bc0de; border: 5px solid yellowgreen;
/*-------- 第二种设置方法：单独设置 上下左右每一个内边距的属性的值 ------------- */ /*padding小属性设置方法*/ /*padding-top: 20px;*/ /*padding-right: 20px;*/ /*padding-bottom: 20px;*/ /*padding-left: 20px;*/
/*---------第三种设置方法：综合设置，按照上右下左的设置顺序，依次设置相关值（推荐）-------------*/ /*padding综合属性设置方法*/ /*设置四个值时：上 右 下 左（顺时针方向）*/ /*padding: 20px 30px 10px 30px;*/ /*设置三个值时：上 左右 下 */ /*padding: 20px 40px 10px;*/ /*设置两个值时：上下 左右 */ /*padding: 20px 50px;*/ /*设置一个值时*/ /*padding: 20px; 等同于padding: 20px 20px 20px 20px;*/ } /*做站的时候，要清除默认的样式（padding,margin等）*/ /*通用选择器效率较低，建议使用并集选择器将页面应用的标签全部初始化*/ *｛ margin:0; padding:0; ｝ </style> </head> <body> <div> padding属性 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </body> </html>
4️⃣ border属性
1、何谓border属性？
即边框，边框三要素：粗细（粗细不写不显示），线性（只写线性样式时，默认有上下左右3px的宽度，solid默认是黑色），颜色（如果颜色不写，默认是黑色的）
对于边框属性的描述，可按照粗细、线性和颜色三要素来写，也可按照上右下左。
2、border属性的设置方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小练习</title> <style type="text/css"> div{ /*width: 300px;*/ /*height: 300px;*/ /*border: 5px solid blue; <!--边框三要素：粗细（粗细不写不显示）、线性（只写线性样式，默认有上下左右3px的宽度，
solid默认是黑色）、颜色（如果颜色不写，默认是黑色的）-->*/
/*------------ 方式1：按照三要素来写：-------------------*/ /*border-width: 5px;*/ /*<!--依次对应“上右下左”四个方向（按顺时针顺序）-->*/ /*border-style: solid dashed double dotted;*/ /*也可用三个表示，即“上 左右 下”*/ /*border-style: dotted solid double;*/ /*也可用两个表示，即“上下 左右 ”*/ /*border-style: dotted solid;*/ /*<!--依次对应“上右下左”四个方向（按顺时针顺序）-->*/ /*border-color:red green blue yellowgreen;*/ /*也可用三个表示，即“上 左右 下”*/ /*border-color: olive red blueviolet;*/ /*也可用两个表示，即“上下 左右 ”*/ /*border-color: blueviolet yellowgreen;*/ /*------------- 方式2：按照方向来写 ---------------------------*/ /*以左右边距为例演示，其余设置类似*/ /*border-top-width: 10px;*/ /*border-right-width: 3px;*/ /*border-bottom-width: 20px;*/ /*border-left-width: 5px;*/ /*取消设置的属性*/ /*border:none;*/ border-top:none; </style> </head> <body> <div> <!--<p>我是一个大大边框</p>--> </div> </body> </html>
3、小练习
（1）利用width、height和boder属性画一个正三角形出来。
（2） 利用width、height和boder属性画一个方向向右的正三角形出来。
练习1参考答案：
<style>
width:0;
height: 0;
border-right: 30px solid transparent;
border-bottom: 30px solid rebeccapurple;
border-left: 30px solid transparent;
</style>
练习2参考答案：
<style> width:0; height: 0; border-top:50px solid transparent; border-bottom:50px solid transparent; border-left: 50px solid dodgerblue; </style> /*总结：方向向朝哪边，哪边就缺省，相对方向取任一颜色，其余方向选择transparent（透明）*/
5️⃣ margin属性
1、何谓margin属性？
指的是外边距，即距离，是盒子边框外边缘与浏览器页面边缘的距离。
注意：margin属性未设置时，默认网页与浏览器页面边缘有8px的间距，当设置margin属性的值后，除了上边缘原来的8px会塌入到设置的值中外,右下左方向都会会加上默认的8px,也就是说，如果不初始化网页页面，页面另外三边的外边距会比上方多8px。（这是个坑，一定要注意）
2、margin属性的设置方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin属性</title> <style type="text/css"> /*使用“*通用选择器”对页面内边距和外边距进行初始化*/ *{ padding:0; margin: 0; } div{ width:300px; height: 300px; background-color:blueviolet; border: 5px solid #b1dfbb; /*------- 方法1：上右下左的外边距设置为相同的数值 -------*/ /*margin: 30px;*/ /*------- 方法2：上右下左的外边距单独设置为不同的数值 -------*/ margin-top:30px; margin-left: 30px; margin-bottom:200px; } p{ border: 2px solid greenyellow; } </style> </head> <body> <div> 测试margin属性 </div> <p>盒子之外</p> </body> </html>
6️⃣