CSS 核心样式

时间：2023-08-30 02:48:02 | 来源：网站运营

时间：2023-08-30 02:48:02 来源：网站运营

CSS 核心样式：

CSS核心样式

粗细font-weight

• 作用:设置文字是否加粗显示
• 属性名: font-weight, 属于font属性的一个单-属性
• 属性值有两种方式:单词类型、数字类型

单词类型

数字类型

• 100-900之间的整百数字
• 数字越大，文字显示越粗
• 其中400等价于normal, 700等价于bold

字体风格font-style

• 作用:设置文字是否斜体显示
• 属性名: font-style, 属于font属性的一个单- - 属性
• 属性值:单词

行高line-height

• 作用:设置的是一行文字实际占有的高度，文字字号在行高中是垂直居中的
• 属性名: line-height, 属于font属性的-一个单一属性

字体综合font

• 字体、字号、行高、加粗、斜体都是font综合属性的单一属性
• font属性五个单一属性的值可以进行合写，属性值可以有2到多个，值之间用空格进行分隔

写法一

• font进行综合书写时，必须有字号和字体参与，而且必须字号在前，字体在后，不能颠倒顺序
  如：font:14px "宋体"；

写法二

• font属性经常对字体、字号、行高进行合写，书写顺序必须是字号、行高、字体，字号和行高之间必须用/进行分隔
  如：font：14px/28px "宋体"

写法三

• 如果font属性需要设置加粗和斜体，两个属性值只能写在最前面，两个值之间可以互换位置，后面的字号、行高、字体不能更改位置
  如： font： bold italic 14px/28px "宋体"；

水平对其 text-aligns

作用：设置文本水平方向的对齐
在盒子中，不论文本是单行还是多行，都会对应方向对齐
属性值：三个方向的单词

文本修饰text-decoration

• 作用:设置文本整体是否有线条的修饰效果

文本缩紧

• 作用:设置段落首行是否进行缩进

盒模型又叫框模型

• 包含了五个用来描述盒子位置、尺寸的属性，分别是宽度width、高度height、内边距、padding、边框border、外边距margin
  常见盒模型区域
• 盒模型的属性中，根据不同属性的效果，可以划分区域:
• 书写元素内容区域: width+height
• 盒子可以实体化的区域: width+height+padding+border
• 盒子实际占位的位置: width+height+padding+border+margin
  注：深刻理解盒模型图
  盒模型宽度 width
• 作用：设置可以添加元素内容的区域宽度

特殊应用

如果一个元素不添加width属性，默认属性值为auto,不同的元素浏览器会根据其特点自动计算出实际宽度，例如<div>元素等独占- -行的，其width属性的值会自
动撑满父元素的width区域，如果是<span>元素等不需要独占一行的，其width属性的值是内部元素内容自动撑开的宽度

盒模型高度 height

• 作用：设置可以添加元素内容的区域的宽度
• 特殊应用
  如果一个元素不添加height属性，默认属性值为auto,浏览器会自动计算出实际
  高度，也就是是内部元素内容自动撑开的高度。元素的高度自适应内部内容的高度

盒模型内边距 padding

• 作用:设置的是元素的边框内部到宽高区域之间的距离
• 特点:可以去加载背景，不能书写嵌套的内容
• 属性值:常用px为单位的数值
• padding是-个复合属性，可以根据内边距的方向不同划分为四个方向的单属性
• 单一属性：书写四个方向单一属性时，一般是按照顺时针规律书写：上、右、下、左
  简写
• 有时为了化简书写，-般习惯将四个方向的单一属性进行合写成padding属性
• padding属性值:可以有1-4个值，值之间用空格进行分隔
• 根据四个方向属性值不同，padding有多种值的书写表示方法
• 根据padding的属性值的个数不同，区分了四种表示法:
  

1. 四值法 p {padding:10px 20px 30px 40px;} 上右下左
2. 三值法 p {padding:10px 20px 40px;}上 左右 下
3. 二值法 p {padding:10px 20px;} 上下 左右
4. 单值法 设置属性值只有一个，分配方向上右下左，四边的值相同

制作三边内边距相同，一边不同

• 方法①:使用四值法、三值法，进行属性值设置
• 方法②:利用综合属性和单一属性之间的层叠，对综合属性设置单值法，将四边内边距设置相同，在后面使用单一属性写法，再次定义某个方向的属性值不同，可以实现单一属性层叠综合属性的一部分
• 其中第二种用法更加灵活，推荐使用，使用过程中注意书写顺序，单一属性必须书写在后，才能层叠掉综合属性中重复的部分

盒模型 border

• 作用:设置的是内边距外面的边界区域，作为盒子的实体化的最外层
• 属性值:由三个值组成，分为线的宽度、线的形状、线的颜色
• border 属性是一个复合属性，根据划分依据不同可以有两种单一属性的划分分布
  p {
  border: 10px solid #f00;
  }
  按照属性值的类型划分
• 线宽：border-width
• 线型：border-style
• 颜色：bordr-colors
  线宽border-width
• 作用:设置边框线的宽度
• 属性值:常用px形式的数值，四个方向都有边框,属性值类似于padding,也有四种值的写法
  border-width {
  10px 20px 30px 40px;
  }
  线型border-style
• 作用:设置边框的线条形状
• 属性值:形状的单词，总体也是类似padding的综合属性写法
• 属性值的单词可能性:none solid dashed dotted double grove ridge inset outset 重点记住前三个
  边框颜色border-color
• 作用:设置边框的颜色
• 属性值:颜色名或颜色值，整体类似padding综合属性写法
  根据边框的方向划分
• 上边框: border-top
• 右边框: border-right
• 下边框: border- bottom
• 左边框: border-left
• 每个单一属性都必须与复合属性border一致，设置三个属性值
• 根据方向和类型，进一步细分类似border-top的单一方向属性，也可以根据属性值类型继续进行单一属性划分
• 单一属性写法: border-方向-类型。
• 注意:细分时必须先写方向划分再写类型划分，否则属性名错误
  border-top-color: #000;

盒模型 margin

• body{
  padding: 0;
  margin: 0;
  }
• 和padding 差不多

盒模型 清除默认样式

• 大部分标签都有一个浏览器加载的默认样式，会对布局造成一些影响。为了避免默认样式对整体布局效果造成影响，一定要清除默认样式
• 盒模型属性中内外边距:大部分容器级标签都有默认边距，要么用标签选择器的并集方式，要么通配符清除
• <ul>和<ol>两种列表有默认的列表前缀:清除list--style属性
  <a>标签的默认样式，顺带设置页面中常用的a的公共样式:设置color和text-decoration
• 清除默认加粗效果:设置font-weight

/* 清除默认样式 */ /* body,div,h1,h2,h3,h4,h5,h6,p,ul,ol,li { margin: 0; padding: 0; } */ * { margin: 0; padding: 0; } ul,ol { list-style: none; } a { color: #333; text-decoration: none; } h1,h2,h3,h4,h5,h6,b,strong { font-weight: normal; } /* 设置初始化的公共样式 */ body { color: #333; font-size: 14px; font-family: Arial,"宋体"; } </style>

盒模型高度height应用

• 根据不同的需求，高度属性可以设置也可以不设置
• 如果设置了高度:盒子占有的高度位置就确定死了，后面的同级元素会紧挨着加载
• 如果不设置高度:会根据标签内部内容高度自动撑开
• 以<div>标签为例，根据情况不同选择是否设置高度
  overflow属性
• 设置了高度的盒子，如果内部元素的加载高度超过父级，会出现溢出效果。可以通过一个溢出的属性overflow,进行溢出部分内容的显示效果设置

必须不设置高度

• 要求盒子高度必须自适应内部内容的高度
• 或者设置height的属性值是自动的

盒模型扩展-居中

文本水平居中

• 水平居中: text-align属性
• 不论单行或多行都可以设置
  文本垂直居中
• 单行文本垂直居中: 让文字行高line-height等于盒子高度heigh
• 多行文本垂直居中: 让元素高度自适应或者正好等于多行文字的高度，设置元素内边距上下值相同
  元素垂直居中
• 一个元素内部嵌套的子元素，在父元素中居中
• 垂直居中:与多行文字类似，让父元素高度自适应，子元素高度自动撑开父级的高度，再给父元素设置相同的上下边距
  元素水平居中
• 针对类似<div>样式上必须独占一行的盒子，如果子盒子宽度低于父盒子宽度，可以设置子盒子的margin值，水平方向的值都设置为auto
• 原因: auto 只在水平方向有作用，水平方向的margin如果设置为auto,边距会自动无限增大，直到撑满整个父元素除了子元素宽度之外剩余的区域，如果两个水平
  方向都是auto,两边都要无限大，只能达到一个平衡，两边距离相同，导致盒子居中

盒模型扩展-父子盒模型

• 一般情况下，一个父元素内部可以放一个或多个子元素，而且多个子元素要排成行显示，必须保证父元素的宽度一定要足够(不考虑溢出情况)，需要遵循一个设
• 置尺寸的规律:所有子元素的宽度加在一起不能大于父元素的宽度width
• 父元素的width≥所有子元素width + padding + border + margin
• 如果不满足条件:要么多余的子元素掉下来不能在一-排， 要么溢出父元素
• 解决方法： 计算或量取尺寸时一定要计算准确，一像素都不能偏差
  特殊情况:盒模型自动内减
• 父子盒模型中，只有一个子元素，且子元素是类似<div>标签必须占一行的
• 不设置子元素的width属性，子元素的width属性值会自动加载父级元素的width
• 如果同时设置了子元素水平方向的padding和border、margin, 不需要手动去进行内减，子元素的width会自动收缩尺寸
• 子元素所有的水平方向的位置所有属性的加和等于父元素的width

margin塌陷现象

• margin塌陷现象:在垂直方向如果有两个元素的外边距有相遇的，浏览器中加载的
• 真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到了边距值大的值内部
  同级元素塌陷
• 上面的元素有下边距，下面的元素有上边距，两个边距相遇，真正的盒子间距离是较大的那个值
  父子元素塌陷
• 父子元素之间也会出现margin塌陷，父元素和子元素都设置了同方向的
• margin-top值，两个属性之间没有其他的内容进行隔离，导致两个属性相遇，发生margin塌陷
• 父盒子没设置margin-top时,本身父元素与上一个元素的距离是0，子元素如果设置了垂直方向的上边距，会带着父级一起掉下来
  解决margin塌陷问题的方法
• ①同级元素:如果两个元素垂直方向有间距，只需要设置给一个元素，不要进行拆分
• ②父子元素:让两个边距不要相遇，中间可以使用父元素border或padding将边距分隔开;更加常用的方法，父子盒模型之间的距离就不要用儿子的margin去踹出来，而是父级的padding挤出来
• 另外注意：水平方向的margin没有塌陷现象

标准文档流

• 在我们遇到的HTML元素中，有的标签元素如<div>、<p>等在浏览器中加载时必须独自占满一行，有的标签元素如<a>、<span>等则不会独占一行，原因是什么?
  标准文档流
• 标准文档流，指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。前面内容发生了变化，后面的内容位置也会随着发生变化
• HTML就是一种标准文档流文件
• HTML中的标准文档流特点通过两种方式体现:微观现象和元素等级
  微观现象
• 1.空白折叠现象
• 2.文字类的元素日过排在一行会出现一种高低不齐、底边对齐的效果
• 3.自动换行，元素内一行内容写满元素的width时会自动进行换行
  元素等级
• 在标准流中，大部分元素是区分等级的，习惯将元素划分为几种常见的加载级别:
  块级元素、行内元素、行内块元素等
• 块级元素:大部分容器级标签包括p标签都是块级元素，比如<div>、 <h1>等
• 行内元素:大部分的文本級柝笠，比如<span>、 <a>、<b>等
• 行内块元素:比如<img>、<input>等。
  块级元素
• a、块级元素可以设置宽高，在浏览器中正常加载
• b、块级元素必须独占一行，不能与其他任何标签并排一行
• C、块级元素如果不设置宽度，会自动撑满父级的width区域;高度不设置，会被内容自动撑开高度
  行内元素
• a、行内元素不能正常加载宽度和高度属性，其他的盒模型属性虽然能设置，但是容易出现加载问题
• b、行内元素可以与其他的行内或行内块元素并排一行显示
• c、行内元素不论是否设置宽高，宽度和高度都只能被内容自动撑开
  行内块元素
• a、行内块元素可以设置宽度和高度
• b、行内块元素可以与其他的行内或行内块并排一行显示
• C、行内块元素如果不设置宽高，要么以原始尺寸加载要么被内容自动撑开
• d、行内块依旧具有标准流的微观性质，例如空白折叠现象

显示模式-display

• 标准流中的元素有自己默认的浏览器加载模式，但是加载模式不是-成不变的，后期可以通过display属性更改一个标签的显示模式
• 属性值:元素根据属性值不同，可以加载对应元素等级的显示模式的特点
  属性值

脱离标准流

• display属性更改的显示模式并没有改变标准流本质性质，页面还是只能从，上往下加载，存在空白折叠现象等微观性质。要想实现更多的界面布局效果需要脱离标准流的限制
• 标签元素脱离标准流的方法包括:浮动、绝对定位、固定定位

浮动定义

• 浮动是一种非常重要的布局属性
• 属性名：float、漂流、浮动的意思
• 属性值： left： 左浮动 right： 右浮动
• 作用： 让元素脱离标准流，同一级的浮动的元素可以并排在一起显示
  浮动的元素脱离标准流
• 标准文档流特点:区分行块
• 块级元素:可以设置宽高，必须独占一行
• 行内元素:不能设置宽高，可以并排一行
• 浮动的元素脱离了标准流的限制，具备行块二象性，浮动的元素可以设置宽高，还可以并排一行，而且不会有空白折叠现象，如果元素不设置宽高，可以被元素内容
  自动撑开
  浮动性质-依次贴边
• 浮动属性值: left、 right。
• 浮动方向设置不同，进行布局时，加载位置方向不同
• 以left为例:
• 父元素宽度足够，所有子元素会按照HTML书写顺序，依次向左进行贴边，父元素
  左边←子元素1←子元素2←子元素3←子元素4
  贴边性质应用
• 利用浮动的这个依次贴边性质，可以完成多种网页布局效果。例如:
• ① 上述平均分布表格效果
• ②导航栏效果
• ③常见的电商或企业网站布局
  浮动性质 - 没有margin塌陷、字围现象
• margin 塌陷现象出现在标准流中，浮动元素已经脱离标准流，不再具有margin塌陷现象
  浮动的元素让出了标准流的位置
• 元素浮动之后，脱离了标准流，会将原来占有的标准流位置让给后面的一个同级元素
• 由于浏览器中有兼容性的问题，不会使用这种属性制作压盖效果
• 如果没有特殊需求，不允许一个父元素中的子元素有的浮动有的不浮动，同级元素中有一个浮动其他的也要浮动
  字围现象
• 与前面压盖效果结构类似，同级元素中前面的元素浮动，后面的元素不浮动，不浮动的元素内部还有一些文字，浮动的蓝盒子会压盖住粉盒子的一部分，但是文字内
  容不会被盖住，粉盒子中的文字会让开蓝盒子位置，围绕它进行加载
  浮动的问题
• 标准流中的元素，不设置高度的情况下，都能被内部的标准流元素自动撑高，如果内部的子元素进行了浮动，浮动的子元素是撑不高标准流父亲的
  清除浮动的方法
• 方法一：
  
• 清除浮动一： height
• 给标准流的父元素强制给一个合适的高度
• 解决:父元素有了高度，前面的浮动不能影响后面元素的标准流位置和贴边
• 问题:父元素高度不是自适应，一旦子元素高度变化，问题可能再次出现

• 清除浮动二： clear属性
  
• clear,清除
• 作用:清除标签元素自身受到的前面的浮动元素的影响
• 属性值:
  left 清除前面左浮动带来的影响
  right 清除前面右浮动带来的影响
  both 清除前面所有浮动带来的影响
  给标准流父元素添加clear属性，父元素不受前面浮动影响，不会再占有浮动让出的位置
• clear: both
• 解决:浮动元素影响后面元素标准流位置和贴边
• 问题:父元素不能高度自适应，两个父元素之间如果有margin效果不正确

• 清清除浮动三:隔墙法
  
• 外墙法:在两个大的父盒子之间，添加一个空的<div>标签，标签上带有clear:both属性
• 解决:浮动影响后面元素标准流位置和贴边，模拟父元素间的距离
• 问题:父元素没有高度自适应

内墙法解决了

• 内墙法:在父元素内部，所有的浮动子元素后面添加一个空的元素，标签高度为0，添加clear属性
• 解决:父元素高度自适应，浮动影响后面的元素位置和贴边
• 缺点:浮动是css样式属性带来的问题，内墙法使用HTML结构去辅助解决问题，如果页面中浮动元素很多，需要添加多个没有语义的空标签，造成HTML结构的冗余

• 清除浮动四： 伪类
  
• 本质是使用伪类方法利用css代码书写-堵内墙
• 伪类选择器:通过选中的标签添加伪类，去选中标签的某个状态或位置
• :after:这个伪类表示选中的是某个标签内部的最后的位置
• 书写方法:前面必须加普通的选择器，后面连续书写伪类名称
• 将伪类添加给一个选中父盒子的选择器后面，一般给需要清除浮动的父盒子设置一个clearfix的类名
• .clearfix:after{
  content: "1";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  }

• 清除浮动五： 溢出隐藏
  
• 小偏方:给内部有浮动子元素的父元素添加溢出隐藏overflow: hidden;属性，可以解决浮动的所有问题
• 补充：overflow属性，元素高度设置后，overflow：hidden；效果是将超过高度的部分直接隐藏
• 高度自适应原因:一个元素没有设置高度，同时设置了溢出隐藏，浏览器在加载盒子尺寸时，遇到溢出隐藏浏览器会强制性去检索内部的子元素的高度，不论子元素
  是标准流还是浮动，都会将最高的高度作为父盒子高度加载
• 浮动影响后面的元素:父元素有了高度后，可以管理住内部所有的浮动元素，不会延伸到后面标签中影响贴边

• 总结
  
• 如果父元素高度是固定的，建议使用height属性解决
• 如果父元素高度需要自适应，建议使用overflow属性解决浮动问题

a标签的伪类

• 概念：
• 伪类和类之间有一定的相似之处，也存在明显的区别。
• 普通的类:必须给标签设置对应的class属性值，才能选中标签，而且类选择器后面添加的属性，会立即加载到浏览器之上
• 伪类:不需要给标签添加任何属性，伪类名都是语法提前规定好的，书写时伪类必须搭配其他选择器使用，伪类选择器后面添加的样式不一-定立即加载到浏览器之上，
  只有用户触发了对应的行为，伪类的样式才会立即加载
• 伪类选择器的权重与普通的类选择器相同
• 伪类选择器写法：前面是普通的选择器，后面紧跟：伪类名
• <a>标签的伪类
  
• <a>标签可以根据用户行为不同，划分为四种状态，通过<a>标签的伪类可以将四种状态选中设置为不同的样式效果，用户触发对应行为，就可以加载对应的样式
• a:link {
  color:gray; ----- 访问前状态
  }
• a:visited {
  color:cyan; ----- 访问后状态
  }
• a:link {
  color:red; ----- 鼠标悬浮状态
  }
• a:link {
  color:yellow; ----- 访鼠标点击状态
  }
  <a>标签的伪类书写顺序

• <a>标签上可能会同时触发2到3个状态，每个状态的属性都会进行加载，相同的属性之间会发生层叠
• 伪类的权重是相同的，只能根据书写顺序，后写的层叠先写的，所以伪类书写顺序非常重要
• 要想让每个伪类的状态正常加载，书写顺序必须是:访问前link、访问后visited、鼠标移.上hover、鼠标点击active
• 为了方便记忆，利用爱恨准则: love hate
  <a>标签的伪类实际应用
• 一般会将访问前和访问后状态设置为一样的效果，保证了页面的统一性，可以选择性的设置鼠标移上和鼠标点击状态
  a:link,a:visited {
  color: #666;
  }
  a:hover {
  color: #f00;
  }
• 更加常用的一种设置方式如下:
  
• <a>标签任何普通的选择器，可以同时选中四种状态，可以将四种状态设置为相同的样式，属性可以设置所有的<a>默认显示样式的属性，包括盒模型、文字等
• a:hover伪类选择器:设置鼠标移上时不一样的样式属性

css常用样式-背景属性一

• 背景颜色background-color
  
• 属性名: background-color
• 作用:在盒子区域添加背景颜色的修饰。
• 加载区域:在border及以内加载背景颜色
• 属性值:颜色名、颜色值

• 背景图片background-image
  
• 属性名: background-image
• 作用:给盒子添加图片的背景修饰
• 加载范围:默认的加载到边框及以内部分。后期如果图片不重复加载，加载从border以内开始
• 属性值： URL（图片路径）
  url: uniform resource locator,统一资源定位符，小括号内部书写查找图片的路径

• 背景重复background-repeat
  
• 属性名: background-repeat
• 作用:设置添加的背景图是否要在盒子中重复进行加载
• 根据属性值不同，有四种重复加载方式 repeat no-repeat repeat-x repeat-y

• 背景定位background-position
  
• 属性名: background-position
• 作用:主要用于设置不重复的图片在背景区域的加载开始位置
• 属性值:分为三种写法，单词表示法、像素表示法、百分比表示法。不论哪种写法，属性值都有两个，值之间用空格分隔
• 第一个属性值：表示背景图片在水平方向的位置
• 第二个属性值：表示背景图片在垂直方向的位置
• 单词表示法
• 属性值都是使用代表方向的单词进行书写
• 水平方向可选单词: left、 center、 right
• 垂直方向可选单词: top、 center、bottom
• 单词表示图片与盒子背景区域进行对应方向的对齐

• 像素表示法
• 使用像素值作为背景定位的属性值
• 第一个属性值：像素是几，表示背景图片左上角针对border以内的左上顶点水平方向位移的距离
• 第二个属性值：像素是几，表示背景图片左上角针对border以内的左上顶点垂直方向位移的距离

• 像素值区分正负，正负代表位移方向不同:
• 正数:表示图片针对盒子的原点向右、向下移动
• 负数:表示图片针对盒子的原点向左、向上移动

• 百分比表示法
• 百分比表示法使用百分比数字作为属性值
• 100%代表的数值:
  水平方向，等价于盒子的border以内的背景区域宽度减去图片的宽度
  垂直方向，等价于盒子的border以内的背景区域宽度减去图片的宽度

• 背景附着background-attachment
• 属性名: background- attachment
• 作用:设置的是背景图片是否要随着页面或者盒子的滚动而滚动
• 综合写法background
• background属性可以将五个单属性的值进行合写
• 属性值:可以有1-5个属性值，值之间用空格进行分隔，背景定位的两个属性值算作
• 一个属性值，不能被分开也不能颠倒顺序。五个属性值之间可以互换位置
  例如： background: url() no-repeat center top fixed;

• 注意事项
• 注意1: 如果属性值没有设置完全，其他没有设置的单一属性会按照默认值加载
• 注意2: 如果想去层叠综合属性中的一部分，其他的属性值保持不变，最好使用单一属性写法层叠

场景一: 替换插入图

• <h1>标签是权重最高的标签，一般会在内部书写最重要的内容，比如logo图片、最大的标题等
• 另外<h1>内部的文字，可以帮助提高SEO搜索排名
• 在设置的是logo图片时候，如果使用插入图，就不能书写搜索关键字

<h1> <a href="#"><img src="images/logo.png"/></a></h1><p data-line="556" class="sync-line" style="margin:0;"></p>

背景图替换插入图方法

• 如果想解决SEO问题，可以将HTML结构中，插入图换成搜索关键字，然后使用css添加背景图给<a>标签或<h1>标签文字隐藏方法
• ①将字号设置为0。IE8 及以.上或高版本浏览器可以隐藏文字，但是IE7及以下有兼容问题
• ②可以设置给<a>标签一个text-indent属性，属性值为负的很大的值，文字会走到盒子外部，直接再设置溢出隐藏属性，将溢出文字隐藏

场景二：padding区域背景图

• 制作方法：
  在一个盒子中有背景图部分，而且有文字内容，文字会让开背景图区域进行加载，背景区域应该使用padding挤出位置
  四个方向padding都可能用于添加背景图
  例如 padding-left区域背景：
  .news li {
  padding-left: 25px;
  background: url(images/s2.png) no-repeat left center;
  }

场景三：精灵图技术

• 当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户
• 然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度
  为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术(也称CSS Sprites、CSS 雪碧)
  css精灵
• CSS精灵是一种处理网页背景图像的方式。
  它将-个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图
  像即可全部展示出来
  css精灵的技术依据
• ①将网页中需要用到的小尺寸背景图制作成一张背 景透明的png图片
• ②利用背景定位技术，将精灵图的每个小图片加载到对应的标签上
  制作精灵图的注意事项
• 1.精灵图上放的都是小的装饰性质的背景图片，插入图片不能往上放
• 2.精灵图的宽度取决于最宽的那个背景图片的标签宽度
• 3.精灵图可以横向摆放也可以纵向摆放，但是每个图片之间必须留够足够的空白，保证背景图片加载到一个标签内部时，不能出现多余内容
• 4.在精灵图的最底端，尽量留一点空白，方便以后添加其他精灵图
• 精灵图在线工具可以快速查找

css3新增背景属性 - 背景半透明

• css3支持背景半透明的写法，颜色值增加了一种ragb模式
• rgba模式:在rgb基础.上增加了一个不透明度的设置，不透明度alpha取值范围在0-1之间，0表示完全透明，1表示完全不透明，0.5 表示半透明

.box { width: 100px; height: 100px; background-color: ragb(255,0,0,1); }

• 半透明其他应用
  同样，可以给文字和边框透明，都是ragb的格式来写
  背景缩放 background-size
• 通过background-size设置背景图片的尺寸，就像我们设置<img>的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛

属性值	说明

• 多背景
• CSS3中规定，一个盒子上，可以添加多个背景图片
• background-image的属性值书写时，以逗号分隔多背景的URL路径地址
• 注意:背景加载时，先写的背景压盖后写的背景图片

background-image: url(/i/bg_flower.gif),url(/i/bg_flower_2.gif);

定位属性

属性名	属性值

• 作用：设置定位的元素，他需要根据某一个参考元素发生位置的偏移
• 偏移量属性
  
• 定位的元素要想发生位置的移动，必须搭配偏移量属性进行设置
• 水平方向: left、 right
• 垂直方向: top、bottom
• 属性值:常用px为单位的数值，或者百分比

相对定位 relative

• 相对定位的性质
  
• 性质:相对定位的元素不脱离标签的原始状态(标准流、 浮动)，不会让出原来占有的位置
• 元素显示效果上，原位留坑，形影分离

• 注意事项
  
• 注意1:偏移量属性的值是区分正负的
• 正数：表示偏移方向与属性名相反
• 负数： 表示偏移方向与属性名相同
• 注意②:同一个方向，不能设置两个偏移量属性，如果水平方向同时设置了left 和right属性，只会加载left属性。垂直方向只加载top属性
• 建议：书写时从水平方向和垂直方向各挑一个属性进行组合
• 注意③:由于相对定位的参考元素是自身，left 的正值等价于right 的负值，top 的正值等价于bottom的负值
• 为了方便记忆，可以只选择left、top组合

position: relative; right: -50px; bottom: -50px; 等价于 position: relative; left: 50px; top: 50px;

绝对定位

• 属性值: absolute, 绝对的意思
• 参考元素:参考的是距离最近的有定位的祖先元素，如果祖先都没有定位，参考<body>
• 必须搭配偏移量属性才会发生位置移动
• 性质：绝对定位的元素脱离标准流，会让出标准流位置，可以设置宽高，也可以随时定义位置，绝对定位的元素不设置宽高只能被内容撑开
• 注意1: 绝对定位的参考元素是不固定的，不同的参考元素以及不同的偏移量组合，会导致绝对定位元素的参考点不同，具体位移效果不同
• 注意2: 在绝对定位中，由于参考点不同，left正值不再等价于right的负值
• <body>为参考元素的参考点
  
• 以为参考元素时，参考点的确定与偏移量方向有关。第一，如果有top参与的定位，参考点就是<body>页面的左上顶点和右上顶点。自
  身的对比点是盒子的所有盒模型属性最外面的左上角或右上角
• 第二，如果有bottom参与的绝对定位，参考点是<body>页面首屏的左下顶点或右下顶点。对比点是盒子的所有盒模型属性最外面的左下角或右下角
• 实际应用中，如果以<body>为参考元素，不同分辨率的浏览器中，绝对定位的元素位置是不同的，所以较少使用<body>作为参考元素

• 祖先级为参考元素
  
• 如果祖先级中有定位的元素，就不会去参考
• 参考元素： 参考的是祖先元素中任意定位的，在html结构中距离目标最近的祖先

• 根据绝对定位的参考元素的定位类型不同，有三种定位组合方式:子绝父相、子绝父绝、子绝父固，由于相对定位的祖先级位置更稳定，大多使用子绝父相的情况

固定定位

• 属性值: fixed, 固定的意思
• 参考元素:浏览器窗口
• 参考点:浏览器窗口的四个顶点。跟偏移量组合方向有关
• 由于浏览器窗口的四个顶点位置不会发生变化，会导致固定定位的元素会始终显示在定位位置
• 性质：固定定位的元素脱离标准流，让出标准流位置，可以设置宽高，根据偏移量属性可以任意设置在浏览器窗口的位置，固定定位的元素会始终显示在浏览器窗口上

定位应用、压盖、居中

positionL: absolute;left: 50%;width: 100px;margin-left: -50px;

• 注意：不论子盒子的宽度是否比参考元素更宽，都能使用以上方法进行居中设置
  扩展应用
• ①解决标准流中，宽的子盒子在窄的父盒子中的居中，可以设置大的子盒子相对定位，利用相对定位居中的方法进行居中

.box p{ position: relative; left: 50%; width: 800px; height: 100px; margin-left: -400px; background-color: #000;}

• ②浮的元素居中，在不改变原始浮动状态情况下，可以利用相对定位居中方法

定位压盖顺序 z-index

• 默认压盖顺序
  
• 定位的元素不区分定位类型，都会去压盖标准流或者浮动的元素
• 如果都是定位元素，在html中后写的定位压盖先写的定位

• 自定义压盖顺序注意事项
  
• ①属性值大的会压盖属性值小的，设置z-index属性的会压盖没有设置的
• ②如果属性值相同，比较HTML书写顺序，后写的压盖先写的
• ③z-index属性只能设置给定位的元素才会生效，如果给没有定位的元素设置，不会生效
• ④父子盒模型中，如果父子盒子都进行了定位，与其他的父子级有压盖的部分:父级盒子:如果不设置z-index,后写的压盖先写的;如果设置了z-index,值大的压盖值小
  的

静态轮播图

鼠标变销售的状态： cursorc: pointer