CSS笔记

子曰:三人行,必有我师。

又是一年教师节,祝福天下老师身体健康,桃李满天下。

虽说入行前端已经一年多,但是现在翻看自己“武器库”,发现前端三板斧样样都是半吊子,不能说不会,也不能说精通,总之就是基础知识欠佳。所以,我意识到这一点之后,决定近三期博文内容会专供基础知识,做到书读千遍,其义自见。

本着英语+编程的原则,我主要选择英文原版进行学习,一是锻炼英语能力,二是本来编程类英语就不难,有时候甚至比看翻译后的文章还要清晰和准确,直接看英文版何乐而不为呢?更何况最近看Google Analytics访问本站的人竟然大多数来自非汉语国家😂😂,这种情况甚至激起了我用英文直接写的冲动,我会认真考虑以后如果有机会直接用英文写点干(fei)货(hua)。

此篇文章主要参考:

  • W3Schools,学习主要条目、规则、语法、用法、注意事项,需要翻墙。
  • MDN,主要是延展阅读。

CSS(Cascading Style Sheets),最新版为CSS3。近年来,随着移动互联网的蓬勃发展,CSS的内容也越来越多,标准的支持度也越来越高。所以记录一点tips和高级部分供自己日后复习巩固。

Notes

  • id和class命名不能以数字开头

  • 上下部分的margin会发生坍塌,上下元素之间的margin会取两者之间的最大值,左右元素不会发生坍塌

  • margin允许负值,padding不允许

  • box-sizing决定总宽度是border(border-box)还是content(content-box)

  • 推荐使用emrem作为字体单位, 1rem = 16px,如果IE浏览器em单独使用有问题,可以配合百分比使用来达到兼容所有浏览器。

1
2
3
body {
font-size: 100%
}
  • 当创建<table>时,配合<thead><tbody>比单纯的使用<tr>更好:1.语义;2.更容易CSS定制

  • display属性:1.所有元素都有默认值;2.可以修改使block元素“看起来像”inline元素,但是不会改变行为,例如

1
2
3
span {
display: block;
}

但是这个span依然不能包含其他block元素。

  • 隐藏元素有两种方式display: nonevisibility: hidden:前者元素不会占据空间,后者会占据空间。

  • position: 默认是staticrelative是相对默认位置偏移,不脱离文档流;fixed是相对窗口位置,脱离文档流;absolute是相对于最近的设置过position属性(不包括默认tatic)的祖先元素进行偏移,如果没有设置过position的祖先,默认相对body;sticky会根据滚动位置从relativefixed来回切换。

  • 居中问题:1.div 可以margin:auto水平居中( div需要设置width);2.text外面的容器设置text-align:center可以使文本水平居中;3.通过在容器设置padding达到垂直居中(子元素可以是block,也可以是inline);4.容器设置line-heightheight相等,子元素设置line-heightvertical-align: middle也可以垂直居中;5.利用transform同样可以达到垂直居中。

  • css combinators:

  1. +:相邻兄弟选择器
1
2
3
div + p {
background-color: yellow;
}

应用到紧跟着 div后面的p元素

2.~:一般兄弟选择器,和相邻兄弟选择器唯一不同是不限于‘紧跟’。

3.(空格):后代选择器

1
2
3
div p {
background-color: yellow;
}

应用到所有 div里包含的 p元素,无论‘藏得多深’

4.>:子选择器:和后代选择器唯一不同的是只会应用到直接子元素。

  • Pseudo-classes: 定义元素的特定状态

  • Pseudo-elements: 定义部分元素样式

  • 媒体查询:一般属性写在全局,当符合条件时应用特定属性,若同时符合多种情况,按照CSS先后顺序,后面覆盖前面。

  • CSS属性选择器

1
2
3
[class|="value"] {
background: yellow;
}
1
2
3
[class^="value"] {
background: yellow;
}

|=是等号后面的value必须是一个单独的词,可以是value✅,或者是用连字符连接value-example✅,valueable则不可以❌

^=是以value开头即可✅

&="value"是以value结尾✅

*="value"是包含value这段字符串即可✅

~="value"是包含这个词,必须是单独的一个词,也不允许连字符✅

  • transitionanimation:都能完成动画效果,但是animation可以完成更复杂的效果。

More

  • 单行文本溢出显示省略号
1
2
3
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;