随堂笔记

1.复习了昨天学习的

CSS层叠样式表
 css的语法以及css的使用方式1.行内样式2.内部样式表3.外部样式表4.外部导入样式
 css选择器:ID选择器  class选择器 标签选择器 组合选择器 子代选择器
   后代选择器  通用选择器  伪类选择器       :hover鼠标悬浮上去的样式
 css样式的优先级1.根据权重来确定  2.如果权重相同，就近原则（后定义原则）
 权重：仅仅只是一个参考的值，并没有实际的含义 注意：计算权重的时候不需要去管子代、后代。直接加起来就行了
 元素的显示方式
   display     
    inline     行内元素
    inline-block
    block
    none       隐藏    隐藏后不占位置
  元素的隐藏
   visibility:hidden   隐藏以后还会继续保留位置
  轮廓
   主要用在input标签中，只需要清空即可
  列表
   list-style：none 即可
  鼠标的样式
   cursor 课后自己试试看效果
2.今天学习了CSS背景类样式
  background-color     背景颜色
  background-image     背景图片
  background-repeat    背景图片的重复
  background-size      背景图片的大小
   repeat-y     只允许在y轴重复
   repeat-x     只允许在x轴重复
   no-repeat    不重复，只显示一次
  background-position  背景图片的定位
  取值： 两个，分别表示x和y方向。如果只写一个，则两个值相等

              简写:background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置  
                #000 url() no-repeat fixed center top;
3.框模型
     盒子模型的组成:
  margin    外边距  padding   内边距
  border    边框  content   内容
   margin:合起来写的属性:一个值,四个全相同;两个值,表示上下和左右;三个值表示上  左右 下  四个值表示上右下左    也可以单独写    另外和居中写margin:0 auto;
   padding:指边框与内容之间的距离 和margin用法相同
   border:边框宽度 样式 颜色  (不需要区分顺序)
   定义的宽和高只是内容部分,padding和border会把盒子撑大
4.定位:    top,left,right,bottom 只有元素增加定位的情况下才会使用
 相对定位:相对自身位置移动
 绝对定位:相对于定位夫级移动位置
 固定定位:相对于浏览器移动位置

 相对定位,占位置;绝对定位和固定定位不占位置
 一般有子绝父相 子绝父绝
5.学习了层叠次序
 z-index默认为0,取值越大,定位元素在层叠元素中越居上
 如果取值相同,则后来居上    后面不加单位
6.学习浮动
 分为左浮动和右浮动   浮动会脱离文档流

   清除浮动
 不是清除自身的浮动，而是清除上一个浮动对自身造成影响

 overflow: hidden;  溢出隐藏，主要是用于清除浮动
 增加一个空的标签，清除所有的浮动，即可解决高度失效的问题(clear:both)
 还有伪类清除浮动

 
拓展雪碧图(sprite)也称精灵图, 各个小图标的集合，使用的目的是减少http的请求

      

转载于:https://www.cnblogs.com/hdkx/p/10946627.html