摘要：第一节css基础css选择器有很多种，比如常用的标签选择器，id选择器，类选择器，派生选择器（结合上下文关系）,属性选择器css样式设置在哪些地方呢？有三种内联样式：直接给元素添加style属性，在style属性内编写css样式内部样式：在head标签内,写上style标签<style type="text/css">此处写样式</style>外部导入：
第一节css基础
css选择器有很多种，比如常用的标签选择器，id选择器，类选择器，派生选择器（结合上下文关系）,属性选择器
css样式设置在哪些地方呢？有三种
内联样式：直接给元素添加style属性，在style属性内编写css样式
内部样式：在head标签内,写上style标签<style type="text/css">此处写样式</style>
外部导入：在head标签内写如下代码
<link rel="stylesheet" type="text/css" href="url链接地址" />
第二节 盒模型
盒模型是由元素内容本身的宽和高、内边距、边框、外边距组成
第三节 css边框样式
统一设置属性如: border:1px solid red;
1px为边框宽度
solid为边框样式，表示实线，其他样式还有虚线，点线，双实线
red为边框颜色
单独设置边框可以用border-left border-right等属性
第四节 背景设置
background-color 背景颜色
background-image: url() 背景图片
background-repeat: repeat-x repeat-y no-repeat和repeat几个属性值，设置背景图片是否平铺或怎样平铺
background-position：水平方向 垂直方向两个属性值同时设置，可以用关键字center top等，也可以用像素
第五节 块级和行内元素
两者之间的转换
display:inline转为行内元素
display:block转为块级元素
display:inline-block转为行内块级元素
第六节 css中的定位
有两种方式position:relative 和position:absolute
相对定位和绝对定位
其中绝对定位使元素脱离文档流，他的位置取决于带有相对定位的父级元素
相对定位相对于自己本身偏移的位置，偏移前的空间依然占用，不脱离文档流
第七节 浮动
浮动分为左浮动和右浮动
浮动可以让块级元素并排于一行，并脱离文档流
使用时注意定义一个空div设置其样式为clear:both
附上小案例 下拉菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{width: 100px;height: 30px;text-align: center;line-height: 30px;background:#ccc;position: relative;}
.box1{width: 100px;height: 100px;background: pink;display: none;position: absolute;}
.box:hover .box1{display: block;}
</style>
</head>
<body>
<div>
大菜单
<div>小菜单</div>
</div>
</body>
</html> 批改老师：韦小宝批改时间：2018-11-10 09:32:20
老师总结：写的很认真啊！不错不错！继续保持下去哦！加油吧！
