介绍
什么是CSS？
CSS是指层叠样式表 cascading style sheets
通过CSS可以让我们定义HTML元素如何显示，CSS可以让我们原本HTML不能描述的效果，通过CSS描述出来。
CSS与HTML结合方式
1 内联/行内样式
就是在我们的HTML标签上通过style属性来引用CSS代码
优点：简单方便
缺点：只能对一个标签进行修饰
<body>
<div style="color:red">hello,world!</div>
</body>
2 内部样式表
我们通过< style>标签来声明的CSS，推荐写在head和body之间
优点：可以通过多个标签进行统一的样式设置
缺点:：它只能在本页面上进行修饰
<style>
div{
color:red;
}
</style>
<body>
<div>hello,world!</div>
</body>
3 外部样式表
需要单独定义一个CSS文件，注意CSS文件的后缀名就是.css
在< head>中使用< link>标签引用外部的css文件
CSS的使用
css中选择器
元素(标签)选择器
它可以对页面上相同的标签进行统一的设置，它描述的就是标签的名称
类选择器
类选择器在使用时使用"."来描述，它描述的是元素上的class属性值
id选择器
它只能选择一个元素，使用 “#” 引入，引用的是元素的id属性值
id选择器，比类选择器更具有唯一性
选择器组
逗号表示，谁和谁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
/* h1{
color:darkcyan;
} */
.b , #c{
color:darkcyan;
}
</style>
<body>
<h1>拉勾网</h1>
<h1 class="b">拉勾网</h1>
<h1 id="c">拉勾网</h1>
</body>
</html>
CSS基本属性
文本、背景、列表、边框
盒子模型
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。
margin(外边距) - 盒子与盒子之间的距离
border(边框) - 盒子的保护壳
padding(内边距/填充) - 内填充，盒子边与内容之间的距离
content(内容) - 盒子的内容，显示的文本或图像
CSS定位
默认定位
块级元素：h1~h6，p, div 等，自上而下，垂直排列（自动换行）；可以改变宽高
行内元素：a,b,span等，从左向右，水平排列（不会换行）；不能改变宽高
行内块元素：input,img等，从左向右，水平排列（自动换行）；可以改变宽高
行内元素可以转换为行内块元素，这时就可以改变宽高了
display：inline、inline-block
浮动定位
让元素“飞”起来，可以靠着左边或右边，还可以消除“块级”的霸道特性（独自占一行）
float： none、left、right
相对定位
和原来的位置进行比较，进行移动定位（偏移）
position：relative
绝对定位
本元素与已定位的祖先元素的距离
position：absolute
固定定位
将元素的内容固定在页面的某个位置，当用户向下滚动页面时元素框并不随着移动
position：fixed
z-index
如果有重叠元素，使用z轴属性，定义上下层次，谁的z值大，谁在上面
z-index：2
注意：
z轴属性，要配合相对或绝对定位来使用
z值没有额定数值（整型就可以，具体用数字几，悉听尊便）
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
