这是我参与「第四届青训营 」笔记创作活动的的第4天
什么是css
css全称：cascading style sheets
作用：用于定义页面元素的样式
- 设置字体
- 设置标签的位置大小
- 添加动画效果
示例：
h1 {
color: white;
}
h1：是选择器，指定哪个进行样式设置；
color：是属性；
white：是属性值；
如何使用css
- 外链
<link rel="stylesheet" href="/assets/style.css">
- 嵌入
<style>
p { margin:0}
</style>
- 内联
<p style="margin: lem 0">hello</p>
选择器
指定页面中的元素，来设置样式
- 通配选择器
- id选择器
- 类选择器
- 属性选择器
- 伪类
组合方式
- 直接组合：AB 满足A同时也能满足B input:focus
- 后代组合：A B 选中A的子孙B nav a
- 亲自组合：A>B 选中A的子元素B
- 兄弟选择器：A~B 选中A后的同级B
- 相邻选择器：A+B 选中紧跟在A后的B
常见属性
- 透明度：alpha
- 字体样式：font-family
- 字体大小：font-size
- 行高：line-height
等等......
继承
某些属性会自动继承器父元素的计算值，除非显式指定一个值。而，每一个属性都有一个初始值。
盒子模型
每个盒子（即元素）由长宽、内边距、边框、外边距构成。
块级和行级的概念
- 块级：不和其他盒子并列在一行
- 行级：和其他行级盒子房子一行
浮动
position属性
- static：默认值，非定位元素。
- relative：相对于自身原本位置偏移，不脱离文档流。
- 在常规流里面布局
- 相对于自己本应该在的位置进行偏移
- 使用top left bottom right设置偏移长度
- 流内其他元素当它没有偏移一样的布局
- absolute：绝对定位，相对于非默认值祖先元素定位
- 脱离常规流
- 相对于最近的非默认值祖先定位
- 不会对流内元素布局造成影响
- fixed：相对于视口绝对定位
