前端与 css基础 | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天，今天主要回顾了技术栈-css的基础和深入， 从根本理解到了css到底是如何运作的：

随后复习了选择器相关知识： 选择器分为基础选择器和复合选择器 基础选择器是由单个选择器组成的 基础选择器又包括： 1.标签选择器： 可以选择所有标签 P {color: red;} 2.类选择器: 可以选择一个或者多个标签 .nav {color: red;} 3.ID选择器: 一次只能一个标签 #nav {color: red;} 4.通配符选择器: 所有的标签 * {color: red;}

复合选择器： 1.后代选择器 对象是子孙后代 用空格 .nav a 2.子代选择器 只选亲儿子 用大于号 .nav>a 3.并集选择器 用于集体声明 符号是逗号 .nav,a 4.链接伪类选择器 :focus 选择器

优先级也是非常重要的 优先级： 1.选择器相同则执行层叠性 2.选择器不同则根据选择器权重执行 3.权重： 继承或* 0,0,0,0 元素选择器 0,0,0,1 类选择器,伪类选择器 0,0,1,0 id选择器 0,1,0,0 行内样式style=“” 1,0,0,0

4.!important 重要的 无穷大 5.继承的权重是0，如果该元素没有直接选中，不管父亲权重多高，子元素得到的权重都是0。 6.权重叠加： 复合选择器会有权重叠加问题 ul li { color: green; } li { color: red; }

• 猪尾巴
• 大猪蹄子
• 大肘子

浮动： 为什么要浮动？ 由于父级很多情况下，不方便给高度，但是子盒子浮动又不占位置，最后父盒子高度为0时，会影响下面的标准流盒子 清除浮动 语法： 选择器 {clear:属性;} 属性值： left 清除左边的浮动 right 清除右边的浮动 both 清除两侧的浮动 平时只用clear:both; 策略是闭合浮动 清除浮动方法： 1.额外标签发 也叫隔墙法 2.父级添加overflow属性 3.父级添加after伪元素 4.父级添加双伪元素

很开心成功复习了这么多的知识，感谢青训营