业余CSS遇到的一些坑
at 2022-11-27 16:29:45, by 鹏城奋青
1、margin,这个声明的本质动机是:从某个边界出发,边界与其他元素至少保持指定的距离。于是在垂直方向上会存在两种合并的情况:
- 一个连边框都没有的空元素,它的上下边距将合并,取其最大者。
- 上下相邻的两个元素,它们的上下边距合并,取其最大者。
2、box-sizing,元素宽度width默认指的是其内容宽度,而非本身总宽度。
div {
width: 10px;
padding: 10px;
}
这时候元素的宽度为10px+10px*2。很多数在布局的时候我们并不希望这样,因此需要指定一个属性来让width表示总宽度而压缩内容宽度。如:
div {
width: 10px;
padding: 2px;
box-sizing: border-box;
}
3、width、height指定的是元素内的宽高,不包含外边距、边框厚度、内边距,元素总宽高需要加上这三样。
4、后代选择器和子代选择器相较而言更加强大,从字面上就比较容易理解但也容易忽视:后代选择器可以选择遥远的孙代!
5、伪类:指的是元素的状态类别,比如 a:link a:hover。
selector:pseudo-class {
property: value;
}
6、选择器的解读顺序:从右到左。
/*作为其它元素的第一个孩子的P元素*/
p:first-child {
}
7、:target伪类有点意思,选择url中锚部分所指的目标,如:
http://pcfq.net/a.html#abc
它选择文档中#abc这个目标。
8、伪元素::first_line选择器只能用于块元素。在CSS1和CSS2中,伪元素是单冒号写法,在CSS3中为了区分,引入了双冒号表示法以示与伪类区分。
9、属性选择器中,注意词和串值的区分,如~=和*=,前者包含词,后者包含串。