[上海|荣耀师兄]JS-卢关清|2019年02月19日的日报-技能树.IT修真院

发表于： 2019-02-19 22:07:29

1 807

今天完成的事情：

height=2*padding+2*border+内容的高度=0+0+40（不包含margin）

因为height是元素的高度（注意如果元素内含有文字 也不是文字的高度）

比如该元素为div 则该高度就是div的高度

在CSS中，line-height 属性设置两段段文本之间的距离，也就是行高，如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中了，想要文本水平居中设置text-align：center即可。

block，inline和inlinke-block细节对比

display:block

block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
block元素可以设置margin和padding属性。

display:inline

inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

display:inline-block

简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

      inline-block 元素特点：*（即同时具备了二者的属性）

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

CSS书写顺序

1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)

明天计划的事情：

继续css任务五

收获：

1了解了行高是什么，设置行高为父级容器的高度就可以实现垂直居中

2display:inline-block 是行内块同时具备行内元素与块元素的属性、

3css的书写顺序以及类选择器的命名规范