前端小知识-css3

一、实现图片倒影

如图：

css属性

.style{
   　　-webkit-box-reflect:below 0 linear-gradient(transparent,white 50% ,white);
}

二、css3中的pointer-events属性解决事件点透问题

三、W3C拟定css标准的阶段

（1）编辑草案（ED）俗称思想大杂烩

（2）首个公开工作草案（FPWD）准备工作

（3）工作草案（WD）不断的改进

（4）候选推荐规范（CR）选出相对比较稳定的版本

（5）提名推荐规范（PR）表达意见的最后机会

（6）正式推荐规范（REC）一项W3C技术规范的最终阶段

四、浏览器前缀问题

Firefox ------------moz-

IE---------------ms-

Opera-------------o-

Chrome----------webkit-

为了防止以后不断的进行补丁的添加，最终决定的写法：

-moz-border-radius:10px;

-ms-border-radius:10px;

-o-border-radius:10px;

-webkit-border-radius:10px;

border-radius:10px;

五、行内元素和块级元素使用浮动后的变化

行内元素设置成浮动之后变得更加像是inline-block（行内块级元素，设置成这个属性的元素会同时拥有行内和块级的特性，最明显的不同是它的默认宽度不是100%），这时候给行内元素设置padding-top和padding-bottom或者width、height都是有效果的

给块级元素设浮动的时候也是同样的情况，属性更加像是inline-block，只是父级的text-align:center是对块计元素没有效果（ie高版本的会有效果），需要注意的是，设置浮动的元素是脱离文档流的，因此会遮盖未设置浮动的元素，以最典型的块级元素div为例

六、移动端解决1px问题

背景图渐变

背景图图片

js判定支持0.5px

rem解决方案

scale缩放的方式

七、如何跟每一帧动画设置速度

八、设置文字选中后的背景颜色

::selection{
     background-color:red;
     text-shadow:none;
}

　

九、display属性值有哪些

none 此元素不会被显示

block  块级元素，此元素前后会带有换行符

inline 默认。内联元素，元素前后没有换行符

inline-block 行内块元素  （css2.1新增的值）

list-item 列表显示

run-in  此元素会根据上下文作为块级元素或内联元素显示

table 作为块级表格显示，表格前后带有换行符

inline-table  内联表格显示，前后没有换行符

table-row-group  作为一个或多个行的分组来显示（类似<tbody>）

table-header-group  作为一个或多个行的分组来显示（类似<thead>）

table-footer-group  作为一个或多个行的分组来显示（类似<tfoot>）

table-row 作为表格行显示

table-column-group 作为一个或多个列的分组来显示（类似<colgroup>）

table-column 作为一个单元格列显示(类似<col>)

table-cell 作为一个表格单元格显示（类似<td>和<th>）

table-caption  作为一个表格标题显示（类似<caption>）

inherit 从父元素继承display属性的值

十、cursor属性的值

hand是手型
pointer也是手型，这里推荐使用这种，因为这可以在多种浏览器下使用。
crosshair是十字型
text是移动到文本上的那种效果
wait是等待的那种效果
default是默认效果
help是问号
e-resize是向右的箭头
ne-resize是向右上的箭头
n-resize是向上的箭头
nw-resize是向左上的箭头
w-resize是向左的箭头
sw-resize是左下的箭头
s-resize是向下的箭头
se-resize是向右下的箭头

auto是由系统自动给出效果

十一、label标签的for属性

label标签和span标签的最大区别是lable标签的for属性

label标签通常是写在表单form中的，可以和表单元素配对，比如文本框，单选框，复选框。通过for属性。

<input type="text" name="" id="text" /><label for="text">一个label，配文本框</label>

 

测试代码，会发现点击”配文本框“的label时，它前面的input：text标签会获得焦点了（可输入）

 

如果不想给label加for，但又想把input元素后面的文字和input本身关联起来，可以这样做

<label><input type="checkbox" name="askd" id="askd />几个字</label>

注意：label包input的方法，在IE6下无效

 

input标签的readyonly：true；只读状态

十二、如何处理nth-child（）不兼容ie浏览器的问题

.list li:nth-child(4n){margin-right:0;}//这样直接写只有在支持css3的浏览器中才可以正常显示。

$(document).ready(function(){

     $(".list li:nth-child(4n)").css("margin-right","0");

});//用jquery这样写，在ie浏览器中就会很好的显示了。

十三、white-space在ie浏览器中的兼容问题

white-space:pre-wrap；在ie浏览器中不兼容如何处理

.content{

white-space:pre-wrap;

*white-space:pre;

*word-wrap:break-word;

}

十四、微信内置浏览器 长按识别二维码 功能的两三个坑与解决方案

微信内置浏览器 长按识别二维码 功能的两三个坑与解决方案

 

坑一：ios版微信长按识别二维码无法正常识别的bug

解决方案：1、定位方式由absolute改为传统的margin（据说绝对定位会导致这个问题）；

                  2、修改viewport上的maximum-scale大于1（网络上看到的解决方案）；

                   3、网络上有说用position:fixed;定位会导致这个问题。

原因：正文部分比正常的地方稍微往上了一点，高度正是微信标题栏+系统状态栏的高度（64px）；

解决方案：通过img标签增大padding的方式来增大可点击的区域

 

坑二：两（多）张两张二维码无法在同一屏幕视窗中共存

“同一屏幕视窗”是指微信内置浏览器中在当前的手机屏幕上显示的可见范围

坑三：多次执行长按二维码的功能会导致内存泄露，手机会变卡

十五、

css命名：模块的物理位置+模块的容器属性+模块的作用组合

采用驼峰式、横杠式、下划式或者小写串写

总结：1.尽量统一组合方式：驼峰，下划线、横杠、英文小写选一个；

          2.清晰易懂：一眼就知道模块的位置，作用

          3.不建议：英文、拼音、数字夹杂；不建议：随意命名，不考虑后来者维护

          4.严谨是一种美德

 

 

设置文字字号的时候，数字和px之间没有空格，如果是30 px 是错误的，30px是正确的【同样适应于em】

利用像素设置文字字号在IE6浏览器中的问题，因为IE6浏览器不能网页进行缩放，设置多少就是多少，所以一些视力不好，或者老年人不友好【现在基本不考虑了】

设置文字的基本单位都都有哪些

 

尺寸单位分为两大类：相对长度单位和绝对长度单位

相对长度单位根据不同的参考元素，又分为字体相对单位和视窗相对单位

字体相对单位：em、ex、ch、 rem

视窗相对单位：ww、vh、vmin、vmax

绝对长度：cm、mm、in、px、pt、pc

px：像素单位，是显示屏幕上显示的每一个点【绝对尺寸单位】

em：相对于应用在当前元素的字体尺寸

%：相对于父元素的百分比

 

基准文本尺寸

keyword（关键字）

xx-small    9px

x-small    10px

small    13px 

medium    16px

large    18px 

x-large   24px

xx-large      32px

 

 

类选择器：

（1）.classname  选择class="classname"的元素

（2）E.classname 选择所有class="classname"的标记为E的元素

（3）后代选择器

     E F 匹配所有属于E元素后代的F元素，E和F之间用空格分隔

（4）子选择器

     E > F 匹配所有E元素的子元素F

（5）相邻兄弟选择器

     E + F 选择E元素和F元素相邻，而且F元素和E元素具有相同的父元素的所有的元素

（6）兄弟选择器

     E~F 选择E元素后面的所有兄弟元素

 

 

 

获取浏览器版本：Browser.client.version

获取浏览器名称（外壳）:Browser.client.name

 

 

linear-gradient如何使用的

 

 

css中margin边界叠加问题

边界叠加是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。简单地说，当两个垂直边界相遇时，它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高度中的较大者。

当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生叠加，见图：

 

 

◆元素的顶边界与前面元素的底边界发生叠加

当一个元素包含在另一个元素中时（假设没有填充或边框将边界分隔开），它们的顶和/或底边界也发生叠加，见图：

 

◆元素的顶边界与父元素的顶边界发生叠加

尽管初看上去有点儿奇怪，但是边界甚至可以与本身发生叠加。假设有一个空元素，它有边界，但是没有边框或填充。在这种情况下，顶边界与底边界就碰到了一起，它们会发生叠加，见图：

 

◆元素的顶边界与底边界发生叠加

 

如果这个边界碰到另一个元素的边界，它还会发生叠加，见图：

空元素中已经叠加的边界与另一个空元素的边界发生叠加

这就是一系列空的段落元素占用的空间非常小的原因，因为它们的所有边界都叠加到一起，形成一个小的边界。

边界叠加初看上去可能有点儿奇怪，但是它实际上是有意义的。以由几个段落组成的典型文本页面为例（见图2-8）。第一个段落上面的空间等于段落的顶边界。如果没有边界叠加，后续所有段落之间的边界将是相邻顶边界和底边界的和。这意味着段落之间的空间是页面顶部的两倍。如果发生边界叠加，段落之间的顶边界和底边界就叠加在一起，这样各处的距离就一致了。

边界叠加在元素之间维护了一致的距离

 

只有普通文档流中块框的垂直边界才会发生边界叠加。行内框、浮动框或绝对定位框之间的边界不会叠加。

边界叠加的问题

边办叠加是一个如果误解就会导致许多麻烦的CSS特性。请参考div元素内嵌套段落的简单示例：

1 <div id="box">
2 <p>Thisparagraphhasa20pxmargin.p>
3 </div>

div框设置了10像素边界，段落设置了20像素的边界：

1 #box{
2 margin:10px;
3 background-color:#d5d5d5;
4 }
5 p{
6 margin:20px;
7 background-color:#6699ff;
8 }

 

　　你会自然地认为产生的样式会像图1-1那样，在段落和div之间有20像素的距离，在div外边围绕着10像素的边界。

但是，产生的样式实际上像图1-2。

　　图1-2

　这里发生了两个情况。首先，段落的20像素上边界和上边界与div的10像素边界叠加，形成一个单一的20像素垂直边界。其次，这些边界不是被DIV包围，而是突出到DIV的顶部和底部的外边。出现这种情况是由于具有块级子元素的元素计算其高度方式造成的。

如果元素没有垂直边框和填充，那么它的高度就是它包含的子元素的顶部和底部边框边缘之间的距离。因此，包含的子元素的顶部和底部空白边就突出到容器元素的外边。但是，有一个简单的解决方案。通过添加一个垂直边框或填充，空白边就不再叠了，而且元素的高度就是它包含的子元素的顶部和底部空白边边缘之间的距离。

为了让前面的示例看起来像图1-1这样，只需在div周围添加补白或边框：

 1 #box{
 2 margin:10px;
 3 padding:1px;/*或者border:1pxsolidcolor;*/
 4 background-color:#d5d5d5;
 5 }
 6 p{
 7 margin:20px;
 8 background-color:#6699ff;
 9 }
10  

　　边界叠加的大多数问题可以通过添加透明边框或1px的补白来修复。

　　　　　　补充解决方案：

　　　　　　　　1.外层padding

　　　　　　　　2.透明边框border:1pxsolidtransparent;

　　　　　　　　3.绝对定位postion:absolute:

　　　　　　　　4.外层DIVoverflow:hidden;

　　　　　　　　5.内层DIV　加float:left;display:inline;

　　　　　　　　6.外层DIV有时会用到zoom:1;

 

 十六、input属性：

placeholder 是html5新增的input属性，有兼容性，ie9以上才兼容，作用是当我们聚焦输入文本的时候我们在placeholder=“默认值”的文本就会自动清空；

for 属性是label的属性，和input的id绑定，当我们点击input前面的文本标识会自动聚焦到文本框

autocomplete on/off  启用或禁用浏览器的自动输入（如曾经填写过的用户名）

autofocus  页面加载时获得焦点

alt 属性为用户由于某些原因（比如网速太慢、src属性中的错误、浏览器禁用图像、用户使用的是屏幕阅读器）无法查看图像时提供了替代文本

注意：alt属性只能与<input type="image">配合使用

 

button 可点击按钮

checkbox 复选框

file 输入字段和“浏览”按钮，供文件上传

hidden 隐藏的输入字段

image 图像形式的提交按钮

password 密码字段

radio 单选按钮

reset 重置按钮

submit 提交按钮

text 单行的输入字段，用户可输入文本，默认宽度为20个字节。

十七、video属性值：

autoplay ：视频在就绪后马上播放

controls :用户显示控件，比如播放按钮

height:高度

loop:循环播放

muted:视频的音频输出应该被静音

poster：视频下载时显示的图像，或者在用户点击播放按钮前显示的图像

preload：视频在页面加载时进行加载，并预备播放（如果使用了autoplay，则忽略了该属性）

src：要播放的视频的url

width：视频的宽度

<u>文本</u>-----定义下划线文本（注：尽量避免为文本加下划线-用户会把它混淆为一个超链接）

^文本----上标文本

_文本-----下标文本

<strike>文本</strike>------加删除线文本定义

<source src="horse.ogg type="audio/ogg">

<source src="horse.mp3 type="audio/mpeg" >

拥有两份源文件的音频播放器，浏览器应该选择它所支持的文件

<form>

     <fieldset>

          <legend>健康信息</legend>

          身高：<input type="text" />

          体重：<input type="text" />

     </fieldset>

</form>