CSS知识点总结
1.选择器
参考链接:十分钟搞定CSS选择器-Samaritans CSS选择器笔记-阮一峰 CSS选择器-w3school MDN
参考书籍:《CSS高效开发指南》
2.布局
2.1 盒模型
颜色:内边距总是跟元素的背景色一样,所以当你设置背景色时,你会发现背景色在元素本身和内边距上都生效了。外边距总是透明的。
作用:内边距和边框主要的作用是装饰;外边距主要用于布局,目的是控制元素之间的距离。
box-sizing: content-box|border-box|inherit;
盒模型中,默认box-sizing:content-box; 元素的边框和内边距会撑开元素。
box-sizing: border-box:用来改变默认的CSS盒模型对元素宽高的计算方式,使得元素的内边距和边框不再会增加它的宽度。
2.3 浮动
清理浮动两种方式:
1. 利用 clear 属性,清除浮动;
2. 使父容器形成 BFC(Block Formatting Context)
清除浮动可以理解为打破横向排列。其语法:clear : none | left | right | both
取值:
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
参考链接:经验分享:CSS浮动(float,clear)通俗讲解 CSS清浮动处理(Clear与BFC)
前端精选文摘:BFC 神奇背后的原理 CSS深入理解流体特性和BFC特性下多栏自适应布局
2.4 定位
默认值(positin:static):在CSS中为元素定义 top、left、right、bottom、z-index 都不会生效
- 块级元素的宽度在未定义时不再为100%,而是根据内容自动调整
- 在不定义 z-index 的情况下,absolute 元素会覆盖在其他元素之上
- 它会脱离正常的文档流,不再占据空间,类似于浮动后的效果