h5基础（四）

1.相对定位和位移的区别

　　相对定位和位移大部分时候是一样的，只有百分比有区别（位移的百分比是参照于自己，但是相对定位的百分比是参照于父元素）

　　位移是css3的，高版本浏览器才能支持，相对定位无兼容问题

2.伪元素和伪类选择器

　　2.1 伪元素　　

　　　　伪元素表示页面中一些特殊的并不真实存在的元素（特殊位置）

　　　　伪元素用 ：：开头，伪元素如下：

　　　　　　　　::first-letter 表示第一个字母

　　　　　　　　::first-line    表示第一行

　　　　　　　　::selection  表示选中的内容

　　　　　　　　::before      表示元素的开始

　　　　　　　　::after         表示元素的最后

　　  　　其中before和after必须结合content属性来使用

　　2.2 伪类选择器

　　　　伪类选择器分为结构伪类、动态伪类、否定伪类、目标伪类、语言伪类

　　　　动态伪类：

　　　　　　.demo a:link {color:gray;}           链接没有被访问时

　　　　　　.demo a:visited {color:yellow;}　链接被访问过后

　　　　　　.demo a:hover {color:green;}　  鼠标悬浮在链接上时

　　　　　　.demo a:active {color:blue;}　　鼠标点中激活时的状态

　　　　结构伪类：

　　　　　　:first-child  选择某个元素的第一个子元素，IE6不支持:first-child选择器

　　　　　　:last-child   选择某个元素的最后一个子元素

　　　　　　:nth-child   选择某个元素的一个后者多个特定的子元素

　　　　　　:nth-of-type  

　　　　　　:empty

　　　　　　:root

　　　　否定伪类   :not()

　　　　目标伪类   :target

　　　　语言伪类   :lang()

3.图片撑大3像素的兼容

　　给图片添加 ：display:block;

　　给图片添加：  vertical-align:top;

4.宽高自适应

　　4.1 宽度的自适应

　　　　单位为%  如果撑满是100%

　　4.2 高度的自适应

　　　　单位为% ，高度可以不写，也可以是height：auto

　　　　高度如果不写，这时候父元素会有一些问题：

　　　　　1. 子元素浮动后，父元素会高度塌陷（清除浮动的方法）

　　　　　　　（1）给父元素添加固定高度，缺点：不适合自适应布局

　　　　　　　（2）给父元素添加overflow:hidden/auto/scroll  和zoom:1 ，缺点：如果遇到定位定出去的时候，就不太适合

　　　　　　　（3）给所有浮动元素的后面添加一个空盒子，并添加clear:both;  缺点：造成代码冗余

　　　　　　　（4）万能清除法

                            

　　　　　　　（5）给父元素添加浮动 ，没有优点

　　　　　　　（6）给父元素添加display:table;  转成表格

　　4.3 最小高兼容问题

　　　　　　自适应的时候，可以给一些min-height或者max-height、min-width、max-width，但会遇到min-height对于IE6不兼容的问题，我们具体应该怎么解决呢，博主今天分享两个小妙招，做好笔记喔

　　　　　　（1）min-height:200px;_height:200px;

　　　　　　（2）min-height:200px;height:auto !important;height:200px;  顺序不能乱

　　　　注意：用height写百分比的时候，需要给html和body同时添加height:100%;

5.浏览器兼容

　　5.1表单兼容

　　　　（1）表单距离顶部间距不一致

　　　　　　input:{float:left;}

　　　　（2）表单按钮样式不一样

　　　　　　用a模拟，如果按钮是图片则用背景图写

　　　　（3）表单里输入文字，在IE上文字靠上对齐

　　　　　　line-height

　　　　（4）表单去除自带的边框

　　　　　　不要用border:none;  用border:0;

6.锚点及透明度

　　6.1 锚点

　　　　作用：同一页面内不同位置跳转

　　　　用法：<a href="#id的名字"></a>  <div id="box"></div>

　　6.2 透明度

　　　　transparent   只能让颜色变透明

　　　　rgba（）  让颜色变透明，不过透明度可以选择

　　　　opacity     可以让页面元素变透明，IEd的兼容写法---filter:alpha(opacity=0-100)

　　6.3 显示隐藏

　　　　display:none; 不占位置，不支持动画

 

　　　　opacity：0；占位置 支持过渡动画

 

　　　　visibility:hidden 占位置 不支持动画

 

　　　　tranform:scale(0) 占位置

7. 图片整合

　　图片整合又叫css精灵图、雪碧图，图片整合过程中主要应用的是background-position

　　优点：（1）减少服务器的请求次数，提高页面的加载速度

　　　　　（2）减少图片的体积

8.css3属性

　　8.1浏览器前缀

　　  -webkit-   谷歌/苹果

　　 -moz-　　火狐

　　 -o- 　　　欧朋

　　 -ms-　　  IE

　　8.2 CSS3属性

　　　　 阴影

　　　　　　文字阴影 text-shadow：水平 垂直  模糊度 颜色

　　　　　　盒子阴影 box-shadow：水平 垂直 模糊度 模糊半径 颜色 insert

　　　　　　多个阴影之间用逗号隔开

　　　　英文换行

　　　　　　强制换行 word-break  默认值 normal

　　　　　　　　　　　　　　　　对于中文不换行  keep-all

　　　　　　　　　　　　　　　　强制换行  break-all

　　　    　  用来标明是否允许单词内进行断句 word-wrap 

　　　　　　　　　　　　默认值 normal　　

　　　　　　　　　　　    break-word

　　　　背景相关的

　　　　　　　（1）背景的裁剪范围   background-clip

　　　　　　　　　　border-box （默认值）背景被裁切到边框盒

　　　　　　　　　　padding-box 背景被裁切到内边距框

　　　　　　　　　　content-box 背景被裁切到内容框

　　　　　　　（2）背景起点  background-origin

　　　　　　　　　　padding-box（默认值） 背景图像相对于内边距来定位

　　　　　　　　　　border-box 背景图像相对于边框盒来定位

　　　　　　　　　　center-box 背景图像现对于内容框来定位

　　　　　　　（3）背景大小   background-size

　　　　　　　　　　length  单位px

　　　　　　　　　　percentage  单位%

　　　　　　　　　　cover 使图像完全覆盖背景区域，图片会部分失真

　　　　　　　　　　contain 保持图像本身宽高比，缩放到正好适应背景容器

　　　　　border开头的2个属性

　　　　　　　　（1）border-radius

　　　　　　　　（2）border-image

9.弹性盒

　　（1）display：flex；

　　（2）flex-direction(改变主轴方向)

　　　　　　默认值  row

　　　　　　row-reverse

　　　　　　column

　　　　　　column-reverse

　　（3）换行 flex-wrap

　　　　　　默认值 nowrap

　　　　　　wrap

　　　　　　wrap-reverse

　　（4）简写flex-flow:row nowrap

　　（5）主轴对齐方式justify-content

　　　　　　flex-start、flex-end、center、space-between、space-around

　　（6）侧轴对齐方式align-items

　　　　　　flex-start、flex-end、center、baseline、stretch（默认值）

　　（7）前后顺序 order默认为0，值越小越靠前（可以为负值）

　　（8）放大比例 flex-grow 默认值为0

　　（9）缩小比例flex-shrink  默认值为1

　　（10）和宽度一样 flex-basis

　　（11）简写flex：0 1 auto;