1什么叫css：
cascading style sheets（层叠样式表）
2如何使用：
第一种：写在html行间之中，style属性里面，很少使用，页面看起来非常乱，不能重用，和html浑噩在一起不好维护
/第二种：内嵌在style标签里面
/第三种：外联：单独创建一个.css文件使用link 连接起来
/第四种@import路劲
3css中的选择器：
01标签选择器 标签{}
02id选择器：#id名字{}
03：类选择器： .（点）类名{} 一个class可以对应多个class名,多个class用空格隔开
04:属性选择器属性名{}
05:{父子级选择器：父级空格 子级{} 关于父级和子级，可以是任意的基础选择器 可以嵌套多层 可以跨很多层选中
06:直接子级选择器 父级>子级{}： 关于父级和子级，可以是任意的基础选择器
07:并集选择器：选择器1，选择器2{}可以是任意的选择器 可以并列多个
08:交集/筛选选择器 ： 选择器1 选择器2{}先选择选择器1的再选择选择器2的
09:通配符选择器*{} 选择网页中的所有标签
4各个选择器的权重问题：
如果是相同的选择器 从上到下 最终显示的是下面的
1important》行间样式（写在行间style的样式）》id选择器》类选择器（包含属性以及伪类）》标签选择器（伪元素）》通配符
关于复合选择器的权重问题：
div .p1{}=11 div p . p1{}=12
5关于css标签的命名：
01，不要用中文
02，开头不要用数字
03，不要用特殊符号（除了—，但也别用在开头）
04，最好有意义，英文就全部用英文，拼音也可以，不要混着来
05，见多个单词链接 一般有两种方式 1横杠链接header-left 2驼峰命名法headerLeft
6文字样式：
字体大小：font size：默认为16px，最小为12px
字体类型：font family
字体加粗：fontweight：默认为nomal bold加粗 bolder 更粗 lighter细体（可以用数值表示100-900，由细至粗）
字体倾斜：font style：默认为nomal italic斜体
字体颜色：单独加上一个color就可以了
字体行高：line height（如果行高定义为容器高度（例如div）那么文字就会上线对齐，在一行的中间显示）
font:[font-style] [font-variant] [font-weight] font-size/[line-height] font-family 注意：font-size 和 font-family必须要有顺序不能不写 font-size/line-height 必须写/
补充：font variant：将段落设置为小型的大写字母字体
7描述色值的方法：
1，单词描述：例如red blue等
2，16进制表示方法：#******
#000000可以写为000：黑色
#fffffff可以写为fff：白色
ff0000为红色 可以简写为f00
00ff00为绿色 可以简写为0f0
0000ff为蓝色 可以简写为00f
这种是特例的简写：只有三对成对出现时才可以，像00ff41这种则不可以
3，rgb表示法：
rgb（0-255） rgb（0.0.0）rgb（255.255.255） rgb（255.0.0）
8像素：
像素即px：一般当作单位使用，其实是相对单位，相对的是分辨率
9.文本的css样式
文本对齐：text align：默认为left靠左，center居中，right靠右，justify两端对齐 在没有折行的情况下和left一样，在有换行的情况下会出现两端对齐
文本缩进：Texel indent
文本中的下划线：text decoration文本修饰
内涵属性：underline下划线，overline上划线，line though 中划线，none，没有样式，用于a标签的样式清除
10，边框:border
用法：border（边框宽度 颜色 边框类型）也可以分开写（border color /border width /border style）
边框的上下左右：top bottom left right
边框的高度和宽度：width/height
11.背景的用法
background
1,可以跟颜色的色值
2，可以添加背景图：background ：（url（图片的地址）
repeat背景图片的平铺 ，no repeat不平铺
x：背景图x轴的位置
y：背景图y轴的位置
背景颜色：background color
background-image图片 /background-repeat 平铺/background-position位置
12.雪碧图/精灵图的使用：
雪碧图/精灵图 为了减少服务器请求的次数 一般都是比较小的图片 如何去使用：测量这个小图左上角，距离整个图左上角的距离。 -x -y
雪碧图/精灵图的使用目的：在前端优化 1、减少请求的次数 2、减少请求的大小
*13.盒子模型
-
定义：1 就是标签的组成 2每个标签都有自己的默认大小 3 盒子模型的大小就决定了物体占地面级的大小
-
盒子模型的构成：内容(宽高)+border+padding+margin： padding:内边距 就是border和宽高之间的部分 可以理解成填充物 背景默认会在padding里面显示 margin 外边距 控制物体的位置 很多元素默认都带了margin 和 padding
-
margin/padding的使用方法： padding:10px 上 下 左 右 都是10px padding:10px 20px ; 上下 左右 padding:10px 20px 30px; 上 左右 下 padding 10px 20px 30px 40px; 上 右 下 左/margin-top/ margin-left/ margin-right/ margin-bottom
-
内边距一般调内容的边距,注意加了内边距，整体会变大，想要不变大，宽高要去减少 外边距用来调整物体的位置
14，标签
-
标签按照样子: 单标签 双标签
-
按照用途: 功能化 结构化
-
** 按照特性:**
块级标签（block） h1-h6 p ul li div ,默认宽度 独占一行,设置宽高 可以设置宽高 ,关于margin 可以设置, 主要用途：搭建结构
行内标签（内联标签）(inline) a span i b em strong， 宽度和内容有关，可以和其他行内标签共处一行 不能设置宽高，宽高跟内容有关 只能设置左右不能设置上下 主要用途：文本内部
行内块inline-block img 表单 默认宽高跟内容有关 可以设置宽高 可以设置margin
备注：以上元素可以用display转换，用法display：
*15.浮动
-
标准文档流： 标准文档流：标签从上到下，从左到右排列，块占满一行，多个行内可以共处一行
-
浮动用法：默认none没有，float：left左/right右（浮动目的:让多个元素共处一行）
-
浮动特点： 1、如果给一个元素加了浮动，会改变这个元素周围的文档流，变成浮动流(半脱离) 2、如果父级的宽度不够，子级会折行 3、浮动会改变元素的类型 类似行内块
-
浮动的作用 1、让元素变成一行 2、文本环绕 用的比较少了 浮动的问题 1、如果子级浮动了，父级没有设置高度，父级会出现塌陷的效果 a 父级加高度 b 清除浮动 2、浮动布局最后一个元素对下面的元素会产生影响 a 清除浮动
-
如何清除浮动 核心 clear:both|left|right 使用条件：只能是块标签（使用display改变标签类型，详情见14备注）
-
清除浮动的目标：给下面受影响的元素加clear 清除周围的浮动流
-
常用清除方式：写一个类来解决 这个类加在浮动元素的父级身上 .clearfix:after{ content:'', clear:both, display:block }最新版
备注：清除列表前面的样式方法：list style ：none
16，伪元素：
-
定义：伪元素不是真正的元素，是通过css模拟出来的元素
-
每个真的元素都可以通过css造出来为元素 伪元素有两个 :before :after
-
特点：默认类似行内元素
