今天说了css的入门基础知识，如下1.1 基础选择器（标签选择器）
/* 标签选择器 */div{font-size:50px;color: green;background-color: yellow;width:300px;height:200px; }p{color: pink;font-size:60px; }
1.2 类选择器(自定义类名)
.box{/* ... */}.miss{/* ... */}
特点：谁调用，谁生效。
一个标签可以调用多个类选择器。
多个标签可以调用同一个类选择器。
类选择器命名规则：
a. 不能用纯数字或者数字开头定义类名
b. 不能使用特殊符号或者特殊符号开头，“_”可以
c. 不建议使用汉字来定义类名
d. 不推荐使用属性或者属性的值来定义类名
1.3 ID选择器（自定义名称）
#box{/* ... */}
特点：一个ID选择器在一个页面只能调用一次，如果使用2次或者2次以上，不符合w3c规范，Js调用会出问题。
a. 一个标签只能调用一个ID选择器
b. 一个标签可以同时调用一个类选择器和ID选择器
1.4 通配符选择器
* {/* ... */}
特点：给所有label都使用相同的样式。
1.5 交集选择器
.box{/* ... */}div.box{/* ... */}
特点：既要满足使用了某个label，也要满足使用了类（ID）选择器。
1.6 后代选择器
.box{/* ... */}.boxspan{/* ... */}
特点：无限制隔代，只要能代表label，label、类选择器、ID选择器自由组合
1.7 子代选择器
div>span{/* ... */}p>span{/* ... */}
1.8 并集选择器
div,p,span,h1{/* ... */}
1.9 相邻选择器（下一个兄弟选择器）
选择器 + 选择器
1.10 下一群兄弟选择器
选择器 ～ 选择器 / *
2 样式表书写位置
2.1 内嵌式写法
样式只作用于当前文件，没有真正实现结构表现分离
/* ... */
2.2 外链式写法
作用范围是当前站点，范围广，真正实现结构表现分离
2.3 行内样式表
作用范围仅限于当前标签，范围小，结构表现混在一起（不推荐使用）
<h1 style="font-size:30px;color:red;>风衣<h1>
3. css三大特性
3.1 层叠性
当多个样式作用于同一个（同一类）标签时，样式发生了冲突，总是执行后面的代码（后边代码层叠前边的代码）
3.2 继承性
继承性发生的前提是包含（嵌套关系）, 文字所有属性（颜色／大小／字体／粗细／风格／行高）都可以继承
特殊情况：
h1系列不能继承文字大小。
a标签不能继承文字颜色。
3.3 优先级
默认样式<标签选择器<类选择器<ID选择器<行内样式表<！Important
优先级特点：
继承的权重为0；
权重会叠加；
4. 链接伪类
a:link｛属性：值；｝ a｛属性：值;｝ 效果是一样的。
A:link｛属性：值；｝: 链接默认状态
A:visited｛属性：值；}: 链接访问之后的状态
A:hover｛属性：值；｝:鼠标放在链接上显示的状态
A:active｛属性：值；｝:链接激活的状态
:focus｛属性：值；｝:获取焦点（光标状态）
5. 行高
是基线和基线之间的距离
5.1 浏览器默认文字大小
行高＝文字高度＋上下边距
默认文字大小：16px；
一行文字行高和父元素高度一致的时候，垂直居中显示
6. 盒子模型
6.1 边框 border
box-sizing:
border-box： 内缩模型，如果增加border和padding,会挤压内容区域
content-box： 传统的标准盒模型，外扩
6.2 内边距 padding
盒子的宽度＝定义的宽度＋边框宽度＋左右内边距
内边距影响盒子大小
影响盒子宽度的因素
内边距影响盒子的宽度
边框影响盒子的宽度
继承的盒子一般不会被撑大
包含（嵌套）的盒子，如果子盒子没有定义宽度／高度，给子盒子设置内边距（小于等于父宽度／高度），则不会撑大盒子。
6.3 外边距 magin
垂直方向外边距合并
垂直方向的2个盒子，如果都设置了垂直方向外边距，取的是设置的比较大的值
外边距的塌陷
嵌套的盒子，直接给子盒子设置垂直方向外边距的时候，会发生外边距塌陷
解决方法：
a. 给父盒子设置边框（不推荐使用）
b. 给父盒子设置overflow:hiddenbfc(格式化上下文)
以上大部分都是课堂笔记，没啥概念性的东西，多敲就好。
网友评论