2021-01-19

第37集
https://flukeout.github.io/
第38集
p里面不能放块元素，但是能放行内元素。

<p>
我要吃大鹅
<span>你不能吃大鹅</span>
</p>

如果给p元素设置样式那么span元素也会被改变，这就是继承。继承是为了方便开发的。一般是对我们开发有利，但是写一次就能所有的开发。背景布局方面不会被继承
background-color：
查表看会不会继承。
第39集
选择器的权重。

我是一个div

再style标签中如果选中的话 div{color:yello} .red{color:red} 这种就是样式冲突，不同选择器，选择了相同的样式，此时发生了样式冲突。 应用那个样式由样式的权重优先级决定。 优先级 内联样式 1，0，0，0 id选择器 0，1，0，0 类和伪类选择器 0，0，1，0 元素选择器 0，0，0，1 通配选择器 继承选择器 比较时候需要将所有选择器相加，那么如果值越大就先优先。 比如div.#box1 和box1那么上面的优先表示。 如国优先级计算想相同，那么先计算后面的。 通配选择器优先级是比较低的 但是基础选择器更低比通配更低。但是 如果在某一个样式加上！important就可以得到最重要的样式，得到最高级的优先级，最好别用 例子：

background color：purple ！important；

第40集
不同手机分辨率不一样。像素越小，屏幕越清晰。
像素可以通过
width：200px
height:200px
也可以设置百分比，相对于父元素的百分比
width：50%
em标签相当于字体大小
1em=1font-size
em随着font-size变化而变化。
rem相当于根元素就是html的大小。来计算。
第42集
颜色名来定义颜色，还可以使用orange，red，
非常不方便，颜色名的话
rgb值通过三种颜色不同来调节不同的颜色。
语法RGB（红色，绿色，蓝色）这是一种光学颜色。都是0是黑色。都是255是白色。对于计算机来说很好描述
rgba（红色，绿色，蓝色，透明）在rgb基础上增加透明的效果
1表示完全不透明，0表示完全透明。
16进制，就是使用16进制表示颜色#ff0000表示红色。可以简写表示#f00z
第43集
HSL值，在ps和工业中。
h表示色相（0-360）
s饱和度(0%-100)
l表示亮度(0-100)
必须写百分号
第44集
布局，文档流
文档流就是normal
网页是一个多层的结构。一层压着一层。用户只能看到最上面的一层。*我们给最底部起个名字，叫做文档流。*我们创建的元素默认在最底层。
元素主要有两个状态，一个在文档流一个状态，另外一个不在文档流中。
元素在文档流中有什么特点
块元素跟默认宽度父元素多宽他多款
默认高度被内容撑开。
在页面中独占一行不论宽度多少
行内元素
span不会独占一行，只占自身的大小，自左向右水平排列。如果一行中站不下所有行内元素。将会自左往右书写。
行内元素的默认宽度和高度总是被内容撑开。
第45集
盒模型
css将页面中的所有模型都设置为了一个矩形的盒子。有再多元素都是一个个的矩形，将我们指定的盒子放在指定的模型，
每一个盒子都由以下几个部分组成
内容区（content）
内边距（padding）
边框区（border）
外边距（margin）两个盒子直接距离
内容区（content）元素中所有的子元素和文本内容都在内容区找到
内容区是由width和height决定的
边框border边框里面是盒子内部，边框外部就不是盒子内容。边框宽度border-width，边框的颜色border-color，边框的样式border-style。边框的大小会影响整个盒子的大小。
第46集
边框（border-width可以不写，可能默认三个）
可以指定四个方向的指定宽度，
border-width可以指定四个值，这四个值分别是上右下左。
三个值 上 ，左右，下
两个值上下，左右。
一个值 上下左右。
border-top-width：10px；
top可以是right botton left
border-color也可以指定四个颜色。如果省略的话，那么默认color颜色。
border-style指定类型
solid实线
dotted点状虚线
dashed虚线
double双线
border的简写属性。（常用）
border:solid 10px orange;
border-top
border-rigtht
border-bottom
border-left