[北京|结业弟子]JS-朱春雨|2019年11月06日的日报-技能树.IT修真院

发表于： 2019-11-06 22:58:41

1 934

今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）

今天发现任务五最难的不是固定定位，难在最后一步，如下图

不缩放到这个层度是居中，再缩放就这样了，真的想不明白，师兄帮忙指出问题和提出建议

有些头绪了，但是还不是特别深，动手把，发现小竖线有固定大小，查找代码发现因为设置了整体行高，删掉就好了

用绝对定位和相对定位实现，

给盒子设置相对定位，子绝父相

绝对定位top：50%； top：-高度一半；

width: calc( 100% - 100px);

这个理解为给他设置宽度，减去前面元素的距离，让文字在剩下的宽度中展示

说实话，这个理解还不是很深，感觉自己代码有挺多没用的需要删掉，明天还需要请教师兄

————————————————————————————

去看了下盒模型

总结的一些资料

盒模型分为W3C标准模型和怪异盒模型（IE浏览器）

为了能够兼容多个浏览器，使用标准盒子模型只需加上DOCTYPE声明即可。

当不对Doctype进行定义时，会触发怪异模式。

正常盒模型主要用于PC端，怪异盒模型主要用于手机端。

正常盒模型的大小是由内到外的，由内部决定外部的大小；而怪异盒模型是由外而内的。

box-sizing 属性可以指定盒子模型种类：它有三种属性值  content-box || border-box || inherit;

A：content-box W3C标准模式

B：border-box  怪异模式

C：inherit 继承父元素的盒子模型

一般用到通过CSS属性来设置盒子模型的时候，前两种用的比较多

标准盒模型，一个块的总宽度 = width（content的宽度） + margin（左右）+ padding（左右）+ border（左右）

怪异盒模型，一个块的总宽度 = width（content + border + padding）+ margin(左右)

两种盒子模型都包括content、padding、border、margin这四种属性，IE盒子模型的content部分包括padding、border。

标准盒模型:这种盒模型设置width的时候的值是内容区的宽度,如果再设置padding和margin,border的话盒子的实际宽度会增大

怪异盒模型:这种盒子的width设置的值为盒子实际的宽度,border和padding的设置不会影响盒子的实际宽度和高度

id选择器

类选择器，属性选择器，伪类选择器

标签选择器，伪元素选择器

因为对于相同方式的样式表，其选择器排序的优先级为：ID选择器>类选择器>标签选择器。

权重相同，就近原则。

明天计划的事情：（一定要写非常细致的内容）

任务五总结总结遇到的问题，看看会没会，如果掌握的还可以就看深度思考，好好理解

遇到的问题：（遇到什么困难，怎么解决的）

无法2个元素居中，师兄帮忙解决了

收获：（通过今天的学习，学到了什么知识）

相对定位和固定定位运用居中，标准盒模型和怪异盒模型的了解，标签优化

返回列表