01.走进CSS的世界----开门篇

• 1.CSS是层叠样式表
• 2.作用：
  • 实现内容与表现分离
  • 提高了代码的可重用性和维护性
• 3.特点：
  • 继承性
  • 层叠性
  • 优先级，相同时--后写生效
• 4.注释
  • /* */
• 5.css属性：
  • width
  • height
  • background-color
  • float:left/rigth---块级元素同一行显示
• 6.引入方式：
  • 行内样式
  • 内部样式
  • 外部样式
  • 导入式@import
• 7.@import和link的区别
  • @import先加载HTML文件，再加载css文件，link是html和css同时加载
  • @import只能引入css文件，link可引入别的文件
  • @import有兼容性
  • @import会增加页面http请求
  • 当js操作dom时，只能操作link引入的文件
• 8.基础选择器
  • 全局：*
  • 元素: HTML元素
  • 类：.className(类名可以重复)
  • ID：#idName（具有唯一性）
  • 合并选择器:选择器1，选择器2，。。。{}
  • 交集选择器：元素.claaName{}
• 9.选择器优先级
  • !important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配符选择器 > 继承 > 浏览器默认属性
• 10.字体属性
  • color
  • font-size(浏览器支持最小12px，默认为16px)
  • font-weight:normal(默认值，不加粗)/bold（加粗）
  • font-style:normal/italic
  • font-family:
• 11.文本属性
  • 水平对齐方式text-align:left/rigth/center;
  • 文本装饰：text-decoration:none（多用于a链接）
  • 英文字母大小写转换:text-transform:uppercase/lowercase/capitalize(首字母大写)
  • 首行缩进：text-indent:;
• 12.背景属性
  • background-color
  • background-size：x y;背景图片大小
  • background-image:url("");
  • 背景图片是否平铺：background-repeat:no-repeat(不平铺)/repeat-x/repeat-y
  • background-position：x y ;背景图片定位
  • background-attachment：scroll/fixed（背景图片固定）
  • 简写background: 颜色 图片 平铺 大小 定位 固定；
• 13.CSS后代选择器“空格”和“>”的使用辨析
  • “空格”：包含子孙
  • “>”：含子不含孙
• 14.列表属性
  • list-style:none（用于ul）
• 15.表格属性
  • 边框border:style width color;
  • padding内边距边框距离
  • 元素水平对齐方式text-align
  • 单元格内容垂直对齐方式（tr或td身上）
    • vertical-align:middle/top /bottom
• 16.内容溢出(overflow)
  • 属性值：
    • visible（默认值）直接溢出
    • hidden： 溢出部分隐藏
    • auto 有溢出显示滚动条
    • scroll 不管是否溢出，都有滚动条
• 17.一行文字溢出省略号显示
  • white-space:nowrap;//文字同一行显示
  • overflow:hidden;
  • text-overflow:ellipse;//文字溢出部分省略号显示
• 18.行高
  • 当行高等于高，一行文字垂直显示
    • line-heigth:高；
• 19.元素透明度
  • opacity：；取值0-1
• 20.字符之间距离
  • letter-spacing:;可取正负
• 21.关系选择器
  • 后代选择器： 空格（选中所有后代）
  • 子代选择器： > 选中所有子代
  • 相邻兄弟 + 平级，后面的一个兄弟
  • 通用兄弟选择器 ~ 后面所有兄弟
• 22.伪类选择器
  • 冒号连接 表示一个状态
  • :link 点击之前（只用于a）
  • :visited 点击之后（只用于a）
  • :hover 鼠标悬停（所有元素）
  • :active 鼠标按下（所有元素）
• 23.css3新增伪类选择器
  • :first-child 第一个子元素
  • :last-child 最后一个子元素
  • :ntn-child(number/odd/even/倍数) 第几个子元素是。。。
• 24.盒模型content+padding+border+margin
  • 标准盒模型
    • 实际大小width+padding+margin+border
  • 怪异盒模型（IE）
    • 实际大小width+margin（width包含了padding和border）
  • 盒模型相互转换
    • box-sizing：content-box；默认值 标准盒模型
    • box-sizing：border-box； 怪异盒模型
  • 弹性盒模型
    • display：flex；
    • 子元素水平排列
• 25.浮动
  • float:left/right;默认为none
  • 原理：
    • 元素浮动后排除到普通文档流之外
    • 浮动后再页面不占据位置（原位置不保留）
    • 碰到父元素边框就停止
    • 浮动后都转换为块级元素
  • 清楚浮动的影响
    • 元素浮动后，在页面不占据位置，如果父元素没有高度，则会对后面元素产生影响
    • 解决方法：
      • 01.给父元素加高（不推荐）
      • 02.浮动元素的父元素加overflow：hidden（不推荐）
      • 03.空div法，在浮动元素后面加个空div{空div{clear：both；}}（真香）
      • 04.伪对象法，浮动元素的父元素：：after{content：""；display：block；clear：both；}（太特喵香了）
      • 05.给受影响的元素加clear：both/left/right(父元素高度找不到)