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;
}