css基础
1 CSS介绍
CSS 的意思为 Cascading Style Sheets，中文名是层叠样式表。
CSS 是由大名鼎鼎的 W3C 中 CSS 工作组来发布以及维护
CSS 作用是修饰 HTML 和 XML 的标记语言
CSS 属于浏览器解释语言，它可以由浏览器直接执行，不用再进行编译
CSS 是前端入门的必修课，运用它可以让我们的页面更加美观
2 CSS引入方式
2.1 行内样式
行内样式：将样式直接写在标签上，需要使用style属性。
示例：
Title
我是一个段落
我是一个段落
我是一个段落
2.2 内联样式
内联样式：将页面内容与表现形式进行分离，方便对样式进行统一管理。
示例：
Title
我是一个段落
我是一个段落
我是一个段落
我是div标签
我是div标签
我是div标签
2.3 外联样式
对内联样式进行进一步的抽离，方便多个html页面共用一个样式。
用法：创建一个CSS文件，需要该样式的HTML直接引用样式即可。
示例：
CSS文件
HTML文件
Title
我是一个段落
我是一个段落
我是一个段落
我是div标签
我是div标签
我是div标签
2.4 样式的优先级
就近原则：行内样式 > 内联样式 == 外联样式（后面覆盖前面）
注意事项：今后尽量不要对同个html进行多个样式书写。
如何选择三种样式写法？
如果样式是固定并且不修改并且很少情况，使用行内样式。
如果样式针对当前html页面做的样式，并且量比较大的情况下， 使用内联样式。
如果样式是通用，且css代码很多，使用外联样式，需要创建一个css文件，引入。
3 CSS 选择器
3.1 基本选择器
选择器可以快速、方便的选择所需要使用的页面元素。
基本选择器分三种：标签选择器、类选择器（class选择器）、id选择器。
标签选择器
语法：标签名{}
类选择器
通过class元素进行元素的获取，可用于对多个元素进行相同的样式设置。
语法：.类名{}
id选择器
id选择器是通过id属性给元素一个唯一标识（设置多个id相同不会报错，）
语法：#id名{}
示例：
我是p，我用的是class选择器
我是h4，我用的是class选择器
3.2 层级选择器
后代选择器
选择后面所有
子代选择器
选择后面一层
示例：
嘻嘻嘻
点我点我！
3.3 组合选择器
组合选择器是根据元素在页面中的同级关系进行选择。
示例：
p标签中的span标签
h4标签中的span标签
3.4 通配符选择器
*表示通配符，作用于页面中的所有标签。
*{
color:green;
font-size:20px;
}3.5 伪类选择器
伪类是 W3C 制定的一套选择器的特殊状态，通过伪类您可以设置元素的动态状态，例如悬停（hover）、点击（active）以及文档中不能通过其它选择器选择的元素。
伪类的名称不区分大小写，但需要以冒号:开头。
另外，伪类需要与 CSS 中的选择器结合使用，语法格式如下：
a:hover{
color:green;
}介绍几个常见的伪类选择器：
:hover (选择鼠标悬停在上面的元素)
:active (选择鼠标在上面并且按键不松开的元素)
:link (选择地址没有被访问过的超链接元素)
:visited (选择地址被访问过的超链接元素)
:focus (选择获取焦点的元素)
4 CSS盒子模型
在使用CSS进行网页布局时，我们一定离不开的一个东西——盒子模型。
盒子模型，顾名思义，盒子就是用来装东西的，它装的东西就是HTML元素的内容。
可以理解为：每一个可见的 HTML 元素都是一个盒子。
4.1 盒子的组成
外边距：margin
内边距：padding
边框：border
内容：content
会发现margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。
4.2 盒子模型演示
代码示例：
Title
盒子模型演示
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。
效果：
4.3 盒子成分分析
4.3.1 margin
盒子的外边距，是完全透明的，开发者只可以设置它的边距。
margin包含了上下左右四条边，开发者可以单独设置每一条边的边距。
margin-top：上边距
margin-buttom：下边距
margin-left：左边距
margin-right：右边距注意：
margin属性后只跟一个值，同时设置四条边的边距相等
margin属性后跟两个值，第一个值设置上下边距，第二个是设置左右边距
margin属性后跟三个值，第一个值设置上边距，第二个是设置左右边距，第三个值设置下边距
margin属性后跟四个值，第一个值设置上边距，第二个是设置右边距，第三个值设置下边距，第四个值设置左边距
4.3.2 padding
表示盒子的内边距（填充）。
与外边距不同，padding不是只能完全透明的，可以设置背景颜色和图片。
与margin类似，padding包含了上下左右四条边，开发者可以单独设置每一条边的边距。
padding-top：上部填充
padding-bottom：下部填充
padding-left：左部填充
padding-right：右部填充4.3.3 border
border表示盒子的边界，它可以设置成可见的，样式多样的。
border像margin和padding一样可以分别对每一条边进行设置。
border-top：上边界
border-bottom：下边界
border-left：左边界
border-right：右边界示例：
/*使用简写属性，同时设置四条边界，四条边界的宽度、样式和颜色*/
border: 2px solid green;
/*下面的样式与上面的样式等价*/
border-top: 2px solid green;
border-bottom: 2px solid green;
border-left: 2px solid green;
border-right: 2px solid green;除了可以单独对每一条边进行样式设置之外，还可以分别对边界的宽度、样式和颜色进行设置
边界宽度：border-width
边界样式：border-style
边界颜色：border-color
常见的边框样式：
实线边框：solid
虚线边框：dashed
点状边框：dotted
双实线边框：double
4.4 背景
设置背景颜色：background-color
设置背景图片：background-image
设置背景图片大小：background-size
设置背景图片是否重复：background-repeat
设置背景图片的位置：background-position
div{
width: 1000px;
height: 1000px;
/* background-color: #008B8B;
background-image: url(./timg.jpg);
background-size: 50px 50px;
background-repeat: no-repeat;
background-position: center;
background: #008B8B url(./timg.jpg) no-repeat;
}5 浮动
5.1 设置浮动
浮动是改变元素在文档流中的规则，让元素可以在水平方向上进行排版。
浮动一般是用于图像，但它在布局时一样非常有用。
用法:
float:left
float:right
示例：
Title
5.2 清除浮动
因为浮动脱离了普通的文档流，会出现一种高度坍塌的现象：原来的父容器高度是内部元素撑开的，但是当内部元素浮动后，脱离普通流浮动起来，那父容器的高度就坍塌，变为高度0px。
示例：
Title
清除浮动的方法有多种，这里介绍一种：
clear: both;6 定位
浮动更多的用于对模块化（无具体像素值要求）区域进行整体排版，对于精确到像素值的页面调整需要使用定位，例如：购物车上的数量、消息通知等。
属性名 |
描述 |
position:relative; |
相对定位（相对默认位置进行定位，不脱离文档流，仍占据页面位置） |
position:absolute; |
绝对定位（相对第一个带有定位属性的父元素进行定位，默认是浏览器） |
position:fixed; |
相对浏览器进行固定定位 |
6.1 相对定位
Title
6.2 绝对定位
Title
6.3 固定定位
Title
固定定位
内容内容内容内容内容内容
内容内容内容内容内容内容
内容内容内容内容内容内容
内容内容内容内容内容内容
内容内容内容内容内容内容
内容内容内容内容内容内容
内容内容内容内容内容内容
内容内容内容内容内容内容
内容内容内容内容内容内容
内容内容内容内容内容内容
内容内容内容内容内容内容
内容内容内容内容内容内容
内容内容内容内容内容内容
内容内容内容内容内容内容
内容内容内容内容内容内容
内容内容内容内容内容内容
内容内容内容内容内容内容
内容内容内容内容内容内容
内容内容内容内容内容内容
内容内容内容内容内容内容
内容内容内容内容内容内容
内容内容内容内容内容内容
内容内容内容内容内容内容
内容内容内容内容内容内容
内容内容内容内容内容内容
内容内容内容内容内容内容
内容内容内容内容内容内容
内容内容内容内容内容内容
内容内容内容内容内容内容
内容内容内容内容内容内容
内容内容内容内容内容内容