一、在html中如何引入css
- 在style属性中直接填写css样式（行内样式、内联式）
- 填写到标签中（内嵌式）
将css代码写入.css文件，在html文件中引入该文件（外部样式），与内嵌式优先级相当。
- 链接式属于html标签，加载html的同时加载.css文件
- 导入式@import 是css提供的，在html加载完成后再加载.css文件
二、.选择器
2.1核心选择器
- 标签选择器
h1{}
- 类选择器
.class{}
- id选择器
#id {}
- 组合选择器
div.one,div.two{}
- 并且选择器
ul.nav{}
- 普遍选择器
*{}
2.2层次选择器
- 父子选择器：
.nav > li {}
- 后代选择器
.nav li{}
- 下一个兄弟选择器：
div.b_first + div.b_second{}
- 之后所有兄弟选择器：
div.b_first ~ div.b_second{}
2.3伪类选择器
- :first-child
- :last-child
- :nth-child（参数）
参数：数字、表达式（n+3，从n=0开始）、关键字（odd、even）
- :hover
2.4伪元素选择器
ul::after{
clear:"both";
content:"";
display:"block"
} 2.5属性选择器
- [name] 选择具有name属性的元素
- [name=username] 选择具有name属性，并且属性值为username的元素
- [name^=u] 选择具有name属性，并且属性值以u开头的元素
- [name$=u] 选择具有name属性，并且属性值以u结尾的元素
- [name*=u] 选择具有name属性，并且属性值中包含u的元素
三、优先级
- 特权
!important
- 权值
1000 style属性
100 #id
10 .class、伪类 、属性
1 标签（元素）、伪元素
- 顺序
四、盒子模型
(针对于块元素讨论盒子模型)
4.1样式
- 外边距
margin-top、margin-right、margin-bottom、margin-left
margin:0 auto（盒子居中，前提是已经设置width值）
- 内边距
padding(-top/-right/-bottom/-left)
边框
border(-top/-right/-bottom/-left)
borde（速写形式):
- border-width
- border-style :
soliddotteddasheddouble
- border-color
（上 下 左 右、上 右左 下、上下 右左)
- 宽：width
- 高：height
4.2盒子类型
- 怪异盒子（边框盒子）（IE8）
box-sizing:border-box
盒子宽度为：width（padding+border+内容宽度）
盒子在浏览器中的宽度：width + margin-left + margin-right
- 传统盒子（内容盒子）（firefox）
box-sizing:content-box
盒子宽度为：padding+border+width（内容宽度）
盒子在浏览器中的宽度：padding + border + width + margin
六、布局
6.1浮动布局
不完全脱离文档流，不会遮挡文本
6.1.1 浮动元素的css样式
float:left\right
浮动元素默认宽度为0，且失去了对父元素的支撑作用，即已脱离文档流 。在浮动流中，若多个同级别元素浮动元素已占满一行，则自动换行 。
6.1.2 清除浮动
方法一
ul::after{ clear:"both"; content:""; display:"block" }- 方法二
给父级元素添加overflow:hidden属性
6.2定位布局
position: static(默认)
- relative
相对点：该元素所在文档流中的初始位置
是否脱离文档流：不脱离
最佳实践：一般不移动，作为相对点
- absolute
相对点：距离最近的父‘定位’元素。如果没有父定位元素，那就只能相对于浏览器视口或者将某个父元素设置为定位元素
是否脱离文档流：脱离
- fixed
相对点：浏览器视口，并且不会随着浏览器的滚动而滚动
是否脱离文档流：脱离
- sticky
相对点：相对定位和固定定位的结合，达到阈值之前时相对定位，达到阈值之后是固定定位，阈值通过left、top、right、bottom来设定
当position的取值为relative/absolute/fixed/sticky这四个之一。我们就认为当前这个元素为定位元素。 定位布局可以使用定位属性，比如left、right、top、bottom
6.3伸缩盒布局
作用：与浮动布局的作用类似，用于将一个容器中多个子元素【块元素】在一行中多列排列，常用于响应式布局(移动端)
使用：
- ul容器 ：
display:flex 让容器成为伸缩盒容器
flex-direction：row 容器中子元素的排列方式，row-沿x轴排列，column-沿y轴排列，即设定主轴。（交叉轴与主轴垂直）
flex-wrap:wrap/nowrap 是否允许换行
jusitfy-content:space-around 元素四周留有空白
align-items:center flex子项在容器中交叉轴上的对齐方式，center为居中放置
一般给容器添加宽高，子元素在容器中排列
- li子元素
flex-basis 主轴中基准值
flex-grow 主轴中剩余空间分配所占份数
flex-shrink 主轴中若有亏损，所占亏损份数
flex 速写
七、文本规则
针对盒子内容来进行修饰，具有可继承性。
- text-align:center/left/right；
- vertical-align:middle 调整行内元素的垂直排列方式
- line-height:32px； 当文字行高等于父盒子高度时，即可达到垂直居中效果
- text-decoraction:
underline/light-through/overline/none
- text-decoraction-style:
solid/dotted/dashed
- text-indent 缩进
- text-transform:
lowercase/uppercase
overflow(overflow-x/-y):
- visible（默认）
- hidden (在父容器上设置该属性)
- scroll
八、字体规则
- font-family
- font-size
- font-weight
- font-style
- color
- font（速写）:font-style font-weight font-size/line-height font-family;
normal normal 12px/3em "微软雅黑"
网络字体( https://www.iconfont.cn/）:
1.获取字体文件
2.在css定义网络字体
3.使用
- 3.1基准样式
- 3.2特殊样式
- 3.3在html引用
九、实体
空格
< 小于
> 大于
十、其他规则
display:
- block
- inline
- inline-block :
、
、