css的一些小问题

这是今天整理的笔记
一、属性书写顺序: 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 属性,应放在最前面。
示例:
.sidebar {
/* formatting model: positioning schemes / offsets / z-indexes / display / ... */
position: absolute;
top: 50px;
left: 0;
overflow-x: hidden;

/* box model: sizes / margins / paddings / borders / ... */
width: 200px;
padding: 5px;
border: 1px solid #ddd;

/* typographic: font / aligns / text styles / ... */
font-size: 14px;
line-height: 20px;

/* visual: colors / shadows / gradients / ... */
background: #f5f5f5;
color: #333;
-webkit-transition: color 1s;
-moz-transition: color 1s;
transition: color 1s;
}
有顺序之后,能让自己理清思路,不会漏掉一些属性。

二、font-weight 属性必须使用数值方式描述。

解释:

CSS 的字重分 100 – 900 共九档,但目前受字体本身质量和浏览器的限制,实际上支持 400 和 700 两档,分别等价于关键词 normal 和 bold。

浏览器本身使用一系列启发式规则来进行匹配,在 <700 时一般匹配字体的 Regular 字重,>=700 时匹配 Bold 字重。

但已有浏览器开始支持 =600 时匹配 Semibold 字重 (见此表),故使用数值描述增加了灵活性,也更简短。

使用 transition 时应指定 transition-property。
示例:

/* good */
.box {
transition: color 1s, border-color 1s;
}

/* bad */
.box {
transition: all 1s;
}


三、尽可能在浏览器能高效实现的属性上添加过渡和动画。

解释:

见本文,在可能的情况下应选择这样四种变换:

transform: translate(npx, npx);
transform: scale(n);
transform: rotate(ndeg);
opacity: 0..1;
典型的,可以使用 translate 来代替 left 作为动画属性。

示例:

/* good */
.box {
transition: transform 1s;
}
.box:hover {
transform: translate(20px); /* move right for 20px */
}

/* bad */
.box {
left: 0;
transition: left 1s;
}
.box:hover {
left: 20px; /* move right for 20px */
}

遇到的问题:
1.为什么div的height为70px时,line-height为50px。文本才看起来垂直居中。
找到line-height属性定义
对于块级元素,CSS属性line-height指定了元素内部line-boxes的最小高度。
对于非替代行内元素,line-height用于计算line box的高度。
对于替代行内元素,如button/input等元素,line-height并没有影响。


2.为了用:after伪类在strong标签后面添加换行,找遍了好多地方。

最后找到了方法:

p > strong:after {
content: "a";
white-space: pre;
}

3.h2元素的font-size设置为10px和p元素的12px差不多

猜你喜欢

转载自www.cnblogs.com/yuyezhizhi/p/10923493.html
0条评论
添加一条新回复