css概念
Cascading Style Sheets 中文 层叠样式表 (级联样式表) CSS 是用来描述如何显示HTML标签的
css的主要作用
主要实现对HTML标签的布局和样式的定义
如何使用css
行内样式：通过style属性
<span style="css样式1;css样式2...">内容</span>
优点:使用方便
缺点：
1、css代码和html耦合度太高，不方便后期维护
2、大量的代码冗余
内嵌样式：通过style标签
<style type="text/css">
css代码
</style>
优点：
1、css代码与html代码分离，方便后期维护
2、减少代码冗余
3、灵活选择页面内容
缺点：不容易看出页面内容使用了哪些样式
外部样式：通过link标签
<link rel="stylesheet" type="text/css" href="main.css">
优点：将css代码分离成一个文件，可以给多个html页面使用，提高代码复用率
缺点：不容易看出页面内容使用了哪些样式
优先级：就近原则
选择器
基本选择器
1.png
层级选择器
2.png
组合选择器
3.png
属性选择器
4.png
伪类选择器
option:nth-child(2){
color: red;
}
盒子模型
标签的分类
block块级元素
inline行内元素
inline-block行内块状元素
5.png
盒子模型
margin外边距
padding内边距
border边框
6.png
布局模型
浮动模型
特点：
1、可以将行内元素变成块状元素
2、元素脱离文档流，不会占用文档空间
css选择器{
float:left;
}
层模型
固定定位
特点：相对于浏览器进行定位，与文档流无关
css选择器{
position:fixed;
left:100px;
top:100px;
}
相对定位
特点：
1、相对于它原本应该在的位置进行移动
2、不会拖脱离文档流，原本的位置会占住
css选择器{
position:relative;
left:100px;
top:100px;
}
绝对定位
特点：
1、如果最近的祖先元素有定位，那么就相对于这个祖先元素定位。
2、如果没有定位的祖先元素，就相对于浏览器。
3、元素会脱离文档流
css选择器{
position:absolute;
left:100px;
top:100px;
}
