解决:浮动影响后面元素标准流位置和贴边，模拟父元素间的距离

问题:父元素没有高度自适应

内墙法解决了内墙法:在父元素内部，所有的浮动子元素后面添加一个空的元素，标签高度为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:link {

color:gray; —– 访问前状态

}

a:visited {

color:cyan; —– 访问后状态

}

a:link {

color:red; —– 鼠标悬浮状态

}

a:link {

color:yellow; —– 访鼠标点击状态

}

标签的伪类书写顺序

标签上可能会同时触发2到3个状态，每个状态的属性都会进行加载，相同的属性之间会发生层叠

伪类的权重是相同的，只能根据书写顺序，后写的层叠先写的，所以伪类书写顺序非常重要

要想让每个伪类的状态正常加载，书写顺序必须是:访问前link、访问后visited、鼠标移.上hover、鼠标点击active

为了方便记忆，利用爱恨准则: love hate

标签的伪类实际应用

一般会将访问前和访问后状态设置为一样的效果，保证了页面的统一性，可以选择性的设置鼠标移上和鼠标点击状态

a:link,a:visited {

color: #666;

}

a:hover {

color: #f00;

}

更加常用的一种设置方式如下:标签任何普通的选择器，可以同时选中四种状态，可以将四种状态设置为相同的样式，属性可以设置所有的默认显示样式的属性，包括盒模型、文字等

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

作用:设置的是背景图片是否要随着页面或者盒子的滚动而滚动

综合写法backgroundbackground属性可以将五个单属性的值进行合写

属性值:可以有1-5个属性值，值之间用空格进行分隔，背景定位的两个属性值算作

一个属性值，不能被分开也不能颠倒顺序。五个属性值之间可以互换位置

例如： background: url() no-repeat center top fixed;

注意事项注意1: 如果属性值没有设置完全，其他没有设置的单一属性会按照默认值加载

注意2: 如果想去层叠综合属性中的一部分，其他的属性值保持不变，最好使用单一属性写法层叠

场景一: 替换插入图

标签是权重最高的标签，一般会在内部书写最重要的内容，比如logo图片、最大的标题等

另外

内部的文字，可以帮助提高SEO搜索排名

在设置的是logo图片时候，如果使用插入图，就不能书写搜索关键字

背景图替换插入图方法如果想解决SEO问题，可以将HTML结构中，插入图换成搜索关键字，然后使用css添加背景图给标签或

标签文字隐藏方法

①将字号设置为0。IE8 及以.上或高版本浏览器可以隐藏文字，但是IE7及以下有兼容问题

②可以设置给标签一个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设置背景图片的尺寸，就像我们设置

的尺寸一样，在移动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, 绝对的意思

参考元素:参考的是距离最近的有定位的祖先元素，如果祖先都没有定位，参考

必须搭配偏移量属性才会发生位置移动

性质：绝对定位的元素脱离标准流，会让出标准流位置，可以设置宽高，也可以随时定义位置，绝对定位的元素不设置宽高只能被内容撑开

注意1: 绝对定位的参考元素是不固定的，不同的参考元素以及不同的偏移量组合，会导致绝对定位元素的参考点不同，具体位移效果不同

注意2: 在绝对定位中，由于参考点不同，left正值不再等价于right的负值

身的对比点是盒子的所有盒模型属性最外面的左上角或右上角

第二，如果有bottom参与的绝对定位，参考点是

页面首屏的左下顶点或右下顶点。对比点是盒子的所有盒模型属性最外面的左下角或右下角

实际应用中，如果以

为参考元素，不同分辨率的浏览器中，绝对定位的元素位置是不同的，所以较少使用作为参考元素

祖先级为参考元素如果祖先级中有定位的元素，就不会去参考

参考元素： 参考的是祖先元素中任意定位的，在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