发表于: 2018-09-10 23:59:49

1 873


今天完成的事情: 

9-10

Vertical-align

作用:简单翻译来说就是垂直方向上的对齐

取值有:vertical:top/text-top/middle/bottom/text-bottom/baseline/sub/super/长度/百分比;

Baseline:默认取值,如果行内包括文字和图片,那么图片和文字在垂直方向不是沿中线居中,而是沿文字的基线对齐,此时就是默认取值,vertical-alignbaseline

长度:或者说是数值如-2px,是元素相对于基线向下偏移2px,数值为正则向上;

百分比:移动原理同长度,但是百分比是相对于标签继承的lineheight的值决定的;

Top:把对齐的子元素的顶端与line box顶端对齐;

Text-top:把元素的顶端与父元素内容区域的顶端对齐;

Bottom:把对齐的子元素的底端与line box底端对齐;

text-bottom:把元素的底端与父元素内容区域的底端对齐;

其他属性用的更少

注意:vertical-align只对line元素和lineheight元素生效

Lineheight也是个重要的属性。

 

Css 伪元素

定义:用于向某些选择器设置特殊效果(官方)。css的伪元素,之所以被称为伪元素,是因为他们不是真正的页面元素,html没有对应的元素,但是其所有用法和表现行为与真正的页面元素一样,可以对其使用诸如页面元素一样的css样式,表面上看上去貌似是页面的某些元素来展现,实际上是css样式展现的行为,因此被称为伪元素。

语法:有很多取值,:before(在元素前调整):after(在元素后调整):first-line(元素第一行属性调整):first-letter(元素首字母调整属性)

一般多用:before:after在元素前后做调整,甚至可以用来清除浮动

 

Css 层叠性 权重

什么是优先级的权重?

作用: 当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高

权重的计算规则

首先先计算选择器中有多少个id, id多的选择器优先级最高

如果id的个数一样, 那么再看类名的个数, 类名个数多的优先级最高

如果类名的个数一样, 那么再看标签名称的个数, 标签名称个数多的优先级最高

  如果id个数一样, 类名个数也一样, 标签名称个数也一样, 那么就不会继续往下计算了, 那么此时谁写在后面听谁的

 

visibilitydisplay

Visibility定义:visibility 属性规定元素是否可见。即使不可见的元素也会占据页面上的空间。

取值:visibility:hidden(不可见)/visible(可见)

visibility:collapse(用于表格上,清空一行/列表格)/inherit(继承);

displaynone时,元素不可见,且不占据空间。

 

 

雪碧图制作:大小相近的图标放在一张雪碧图上,一些简单的小图标例如三角/圆形等可以用css写。

 

Css写三角形:设置盒子内容宽高为0,边框给够宽度,其他三条边框透明即可。

 

下拉列表:需要用到hover选择器,下拉菜单默认隐藏,鼠标移到列表表头上时,下拉菜单显示

 

代码书写顺序

同一 rule set 下的属性在书写时,应按功能进行分组,并以 Formatting Model(布局方式、位置) > Box Model(尺寸) > Typographic(文本相关) > Visual(视觉效果) 的顺序书写,以提高代码的可读性。

解释:

Formatting Model 相关属性包括:position / top / right / bottom / left / float / display / overflow 

Box Model 相关属性包括:border / margin / padding / width / height 

Typographic 相关属性包括:font / line-height / text-align / word-wrap 

Visual 相关属性包括:background / color / transition / list-style 

另外,如果包含 content 属性,应放在最前面。


 今天做的任务六,注意了一下,没怎么用浮动,flex-box用的比较多


明天计划的事情:


做任务,了解boorstrp


遇到的问题:


收获:


返回列表 返回列表
评论

    分享到