DAY3 学习笔记CSS| 青训营

选择器的特异度计算

1. ID选择器的特异度最高，为0100。
2. 类选择器，属性选择器和伪类选择器的特异度为0010。
3. 类型选择器和伪元素选择器的特异度为0001。
4. 通配符选择器(*)的特异度为0。
5. 相同特异度的选择器，后面的会覆盖前面的。
6. 继承的样式不会增加特异度。

关于继承

在CSS中，有些样式属性是可以被子元素继承的。

常见的可继承的属性有:

字体系列、文本系列、元素可见性、表格布局、列表布局等。

不可继承的属性包括:

盒模型、背景、边框等。

CSS布局

网页布局：用CSS摆放盒子。

1. 多个块级元素纵向排找标准流
2. 多个块级元素横向排找浮动
3. 先设置盒子的大小, 之后设置盒子的位置.

常规流

块级元素占一行从上至下排列，行内元素从左到右， 碰到边缘自动换行。

浮动流

float将其移到一边，直到左/右边缘，包括块或另一个浮动框的边缘。

1. 会脱标，漂浮在标准流上面，不占位置；
2. 若多个盒子都设置浮动，则按属性值一行内显示，且顶端对齐排列
3. 浮动元素互相贴靠在一起（无缝隙），若父级宽度装不下，多出的盒子另起一行对齐；
4. 一个元素浮动，理论上其余兄弟元素也要浮动；

定位流

定位 = 定位模式 边偏移；

1. static静态定位
2. relative相对定位🔥：相对于它原位置来移动，原来在标准流的位置继续占有
3. absolute绝对定位🔥：1.相对于它祖先移动； 2.以最近一级的有定位祖先为准移动； 3.绝对定位不占有原位置。
4. fixed固定定位🔥：可在页面滚动时元素的位置不改变。1.以可视窗口为参照点移动； 2.跟父元素没有任何关系； 3.不占有原先的位置。
5. sticky粘性定位✅：是相对定位和固定定位混合。

学习 CSS 的几点建议

• 充分利用 MDN 和 W3C CSS 规范；
• 保持好奇心，善用览器的开发者工具；
• 持续学习，CSS 新特性还在不断出现。

这篇好文章是转载于：学新通技术网