179：HTML基础部分（元素分类、特性、特殊元素等） — 补充

1、盒子模型

定义：一个元素在页面中所占的位置大小，叫盒子模型。
包含的样式：即影响元素大小的样式：
width、height、margin、padding、border、content（内容）
在这里插入图片描述
div1没素质宽高，不显示，但其子级div2有宽高，div2撑起了div1的大小；
所以元素内容也会影响元素的大小。

180：CSS基础部分（盒模型定义、CSS引入方式、经典样式复习等）

1、复习

1、CSS的引用方式：

1、外链式
2、内嵌式
3、行内式 ---- 最高级（离元素最近）
4、import
优先级判定：就近原则，谁离元素越近，优先级越高。即，代码一行一行执行，后面的同元素的style会覆盖前面的style
在这里插入图片描述

2、选择器：

1、id选择器
2、class选择器
3、标签选择器
4、通配符选择器

等级：id > class > 标签 > 通配符

3、样式：

（1）margin – 外边距

margin: apx bpx cpx dpx;  上 右 下 左（顺时针）
margin: apx bpx cpx; 	  上  左右  下
margin: apx bpx;  		  上下  左右
margin: apx;  			  上右下左

（2）margin – 内边距

padding: apx bpx cpx dpx;  上 右 下 左（顺时针）
padding: apx bpx cpx; 	  上  左右  下
padding: apx bpx;  		  上下  左右
padding: apx;  			  上右下左

（3）word-wrap: break-word; = 文字折行/自动换行

在这里插入图片描述

（4）text-align-last

对文本最后一行的位置进行设置，left、center、right等
在这里插入图片描述

（5）position – 定位-- 1 – 分类

1、static – 默认定位
即没有定位在这里插入图片描述

2、relative – 相对定位
不脱离标准流，改变的只是内容显示出来的位置，框架还是在原来的位置，还是在标准流中占了位置的
在这里插入图片描述

3、absolute – 绝对定位
脱离标准流，直接把框架提出来进行定位，框架原位置会出现空缺，被下一个元素顶替
在这里插入图片描述

4、fixed – 窗口定位
ie6不兼容
直接根据窗口进行定位，即根据页面可视部分来等位，脱离标准流，固定在窗口的某个位置上，不会随着页面滑动改变（类似于页面上的广告）

5、inherit – 继承父级的定位
工具父级改变，父级是什么定位，该元素就是什么定位

（6）position – 定位-- 2 – 特殊用法

1、元素全屏
在这里插入图片描述

2、页面居中
随着页面缩放而改变，一直居中
在这里插入图片描述

3、百分比定位
%：计算单位，根据父级进行计算
在这里插入图片描述
margin-left 和 left的百分比是通过父级的width进行计算。

4、特性：
只会根据有定位的父级进行定位。

<div class="div1"><div class="div2"><div class="div3"></div></div>
</div>

比如：
div3有定位absolute，但是其父级div2没有position定位，那么div3会往上找父级的父级，查看有没有定位；
如果div1有定位，那么div3就会根据div1来进行定位；
如果div1没有定位，就会继续找父级的父级的父级，直到找到最外层（最大的父级），如果都没有，就根据window（html）来进行定位。