发表于: 2019-09-03 19:32:59

1 909


今天完成的事情:


今天主要复习了之前的html和css的基础知识,将之前的任务中的深度思考重新翻了翻并且引申深入的了解一些没遇到过的问题,发现了有很多地方以前没有注意到的,看了张鑫旭的一些博客对margin、padding、border、z-idex、position有了深入的了解,然后看了下JS的基础


明天计划的事情:


明天接着复习基础知识,看烦了就看看js基础,然后多做一些demo加深理解


遇到的问题:


今天主要在补充基础知识,暂时没有困难。看了一些大佬对基础知识的深入了解,虽然有所发现,但是就目前的任务而言运用的地方不是很多,容易遗忘。


收获:

今天收获还是蛮多的

1、

   meta标签的作用有: 

搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向新的页面,实现网页转换时的动态效果,控制页面缓冲,网页定级评价,控制网页显示的窗口等

2、

   严格模式与混杂模式的来源

简单来说严格模式就是网页设计css严格遵循W3C的标准而混杂模式就是为之前没有遵循W3C标准的旧网站提供正确布局的一种模式(比如盒子模型的计算就不同)

3、 

   IE盒子模型(怪异盒子)和W3C(标准)盒子模型

两个模型的区别是计算width和height时,IE盒子模型包含padding和border, W3C盒子模型则不包括。

box-sizing: content-box;设置为标准盒子

box-sizing: border-box;设置为怪异盒子

4、

插入img下面会有空白(由于基线的原因,图片下方到bottom会有一小段空白区域。主要作用是留给g j字母等下面超出行的距离)

解决

1、给图片img标签display:block

2、定义图片img标签vertical-align:bottom,vertical-align:middle,vertical-align:top。

3、定义容器里的字体大小font-size为0。

类似于img、button等标签的是一种关联元素

5、

margin:auto的作用相当于填充剩余空间的作用

一个固定宽高div使用margin:0 auto可以水平居中因为平均分配了两端的空间达到居中。

一个居左侧的div设置margin-right看似没有意义

但是如果给box2加上margin-left:auto后就会出现效果,这时左边的空间被自动填充,margin:auto使用的前提是必须有剩余空间。块元素独占一行没充满时候会有剩余空间,而像行内元素则用不了。

而不能竖直方向用margin:auto是因为流的方向默认水平从左往右,div水平占一行,如实改变流的方向,则可以做到竖直方向使用margin:auto。


还有一种是绝对定位和margin居中

父元素有高度且设置相对定位后子元素设置left bottom right top为0则子元素被拉伸充满父元素,

这个时候再设置子元素的固定宽高之后,元素遵从固定宽高,这时候设置margin:auto的话左右上下都平均分配空间处于上下左右都居中状态。

6、

border-color和color的颜色是默认是一致的,所以有时候color和border-color颜色一样时候只需写color就不需要写border-color了,在有hover效果的时候也可以不用再对border单独设置了,可以减少代码量

利用boder-color:transparent(透明)可以设置单方向的颜色其他三方向boder透明做一个三角形


返回列表 返回列表
评论

    分享到