前端零碎知识点

1、target:_blank 超链接打开新窗口（_self 为target的默认值）。

2、图片

• title：鼠标悬停时不动时显示信息；
• alt：当路径或其他错误时，显示的文字。

3、表格

• border只能对table添加，不能对tr/td作用。
• cellspacing：单元格与单元格之间的间距；
• cellpadding：内容到边框间隙。
• colspan：合并列（左右）；
• rowspan：合并行（上下）。

4、表单

• form是自上而下排列；
• input是横向排列。

5、重置样式

• *{margin：0；padding：0} 清除所有内外边距；
• *（通配符）

6、边框

border-style：outset（边框凸起）/ solid（实线）/ dotted（点线）/ doshed（虚线）/doubled（双线）。

7、列表

 list-style-type : square、disc     将列表前的标志变为方块、圆点
 list-style-image :url(xxx.gif)     将图片作为列表前的标志
 list-style-position : inside       标志在列表内部

8、字体

font-style : normal（默认，正常显示）/ italic（斜体字）/ oblique（倾斜）

9、css样式表

• 行内（内联）样式表
• 内部样式表
• 外部样式表

10、

• type属性：定义文档类型
• rel属性：关联样式表

11、外部样式表

  （1）<link rel="stylesheet" type="text/css"  href="css/index.css" />
  （2）<style  type="text/css">
           @import url(css/index.css)
          </style>

12、优先级计算方式
！important > 内联 > ID > class（优先级覆盖的是相同属性）

13、最小高度
height属性在IE6里就是min-height作用，IE6及以下版本不识别该属性。

14、优先级

• 内联（行内）样式表的优先级最高。
• 内部样式表和外部样式表的优先级和书写顺序有关，后面写的可以覆盖前面写的。（优先级覆盖的是相同内容，其他属性照常显示）

15、input

• 去除边框：border:none; 或者 border:0;
• 边框之间的间距：float : left ;

16、背景图片

 background-image : no-repeat ;    （不平铺）
 background-image : repeat-x ;     （上、下平铺）
 background-image : repeat-y ;     （左、右平铺）

17、背景图片位置

background-position : left / right / center / bottom / top ;

18、标签

 <del>         删除标签
 <u>           下划线
 <code>        代码
 <pre>         格式化域（解析保留空格）----->块级元素
 <sub></sub>   下标
 <sup></sup>   上标

19、

line-through：删除线
over-line：上划线
underline：下划线
letter-spacing：字间间距

20、

• 普通盒模型
  （1）宽度=左右margin+左右padding+左右border+width
  （2）高度=上下margin+上下padding+上下border+height

• 怪异盒模型
  （1）宽度=左右margin+width
  （2）高度=上下margin+height

21、text-overflow（省略号）

 clip：不显示省略号（......），而是简单的裁切
 elipsis：当对象文本溢出时，显示省略标记

• 注意：text-overflow属性仅是……，当单行文本溢出时是否显示省略号标记，并不具备其他的样式属性定义
• 显示省略号的完整代码：
  a.容器宽度 width：value；
  b.强制文本在一行内显示 white-space：nowrap（文本不换行）；
  c.溢出内容为隐藏 overflow：hidden；
  d.溢出文本显示省略号 text-overflow：elipsis；
• 或者另一种方法：
  a.给当前设置省略号的元素加上（强制不换行标签）
  b.给当前元素设置 overflow：hidden；text-overflow：elipsis；

22、内联元素补充

margin 上下值和 padding 上值都不起作用

23、textarea（文本域）

 resize：none;禁止文本域自动拉伸
 outline：none;取消焦点的蓝色边框

24、vertical-align：top / middle / bottom;去除图片的底部间隙

25、权重

• 类型选择符：0001
• class选择符：0010
• id选择符：0100
• 伪类选择符：0001
• 内联样式：1000
• demo：0010

26、图片

background-image：utl(xxx.gif)；
background-repeat：no-repeat（不平铺）/ repeat（平铺）/ repeat-x/y；
background-attachment：scroll（滚动）/ fixed（固定）；
background-position：x（水平方向）/ y（垂直方向）
background-color：（颜色）；
background-attachment：fixed（图片固定）；

29、元素具备最小高度的自适应

  （1）min-height : value ;
      _height : value ;
  （2）min-height : value ;
      height : auto !important ;
      height : value ;

30、IE浏览器扩展内容

• \9：IE浏览器浏览器组 语法：选择符 { 属性：属性值 \9 }
• \0：IE8 包括IE8 语法：选择符 { 属性：属性值 \0 }
• +：IE7 IE7以下语法：选择符 { +属性：属性值 }
• :root：选择器 除了IE8及更高的浏览器 语法：:root 选择符 { 属性：属性值}

31、visibility : hidden（隐藏）/ visible（可见）与display : none 的异同

• 相同点：隐藏显示的区域
• 不同点：前者会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域；而后者会使这个对象消失。

32、自适应窗口

• 元素宽、高度自适应窗口宽、高
• 方法：html , body { width : 100% ; height : 100% ; }

33、CSS Hack和Filter

• css中，hack是指一种兼容css在不同浏览器中正确显示的技巧方法。
• Filter（过滤器），一种对特定的浏览器或浏览器组显示或隐藏规则或什么的方法。

34、使用Hack带来的负作用：降低了CSS代码的可读性，增加了代码的负担。

35、否定选择器（not）

• 例：对 input（所有）加边框，但又不想对 submit 起作用，就可以用：not试下input :not (
[type="submit"] ){ border:1px solid red ;}
• 否定选择器（:not()），定位不匹配该选择器的元素

36、

• 后代选择器（E F）
• 子元素选择器（E > F）
• 相邻兄弟选择器（E + F）: 可以选中紧跟在另一元素后的元素，但不能选中被隔离元素
• 通用兄弟选择器（E ~ F）

37、阴影

• text-shadow（文字阴影）：h-shadow（水平阴影位置） v-shadow（垂直阴影位置） blur（模糊距离） color ；
• box-shadow（盒子阴影）：length（水平） length（垂直） length（模糊半径） length（延伸半径） color（阴影颜色） inset（是否使用内阴影，默认外阴影）

38、word-break（英文换行）

  break-all：不会尝试把单词挪到下一行，而是直接进行单词内的断句
  ceep-all：文本不会换行，默认值

39、布局方式：固定布局、可切换的布局、弹性布局、混合布局、响应式布局

40、

• flex（空间等比划分）
• flex-grow（剩余空间等比划分）
• flex 是 flex-grow、flex-shrink、flex-basic 的缩写值，默认值为0,1，auto。

41、景深

  perspective：1200px；（加载父元素上）
  transform：perspective（1200px）；（在子元素中使用）

注意：两个设置会发生冲突，建议只设置父元素

42、transition-timing-function：属性

（1）linear（匀速）
（2）ease（逐渐慢下来）
（3）ease-in（加速）
（4）ease-out（减速）
（5）ease-in-out（先加速后减速）

43、CSS 2D （transform）

• transform（100px，100px）
  将元素向指定的方向移动（水平方向，垂直方向）
• scale 默认值为1
• transform-origin 变形原点，指该元素围绕着那个点变形或旋转
  取值有三种形式：
  a.具体像素：transform-origin : 200px 0px ;
  b.百分比：transform-origin : 50% 50% ;
  c.特殊关键字：transform-origin : center center ;

44、背景尺寸属性

• background-size：（1）默认 （2）具体情况 （3）百分比 （4）宽度等比拉伸 （5）高度等比拉伸 （6）cover （7）contain
• cover 含义：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。图像的某些部分也许无法显示在背景定位的区域中。
  （a.告诉系统要图片要等比拉伸
  b.告诉系统图片需要拉伸到宽度和高度都填满元素）
• contain：把图片扩展至最大尺寸，以使其高度和宽度完全适应内容区域

45、CSS3 渐变（gradient）

• 定义：可以让你在两个多多个指定的颜色之间显示平稳的过渡。
• background：finear-gradient（direction，color-stop1，color-stop2）
• direction默认为 to bottom 即从上到下的渐变
• stop 颜色的分布位置，默认均匀分布

46、线性渐变

• to right bottom（到右下角）、to right top（到右上角）、to left bottom（到左下角） 、to left top（到左上角）
• 使用角度渐变
  background：linear-gradient ( 10deg , red , blue )
  角度是指水平线和渐变线之间的角度，逆时针方向计算

47、重复性线性渐变

background：repeating-linear-gradient（red，yellow  10%，green  20%）

说明：10%的位置是yellow，20%的位置是green；然后按着20%向后重复。

48、径向渐变

• background：radial-gradient（center，shape，size，start-color，last-color）
• center 渐变起点的位置，可以为百分比，默认为圆的中心
• shape 渐变的形状，ellipse 表示椭圆，circle 表示圆
• size 渐变的大小 ， closest-side（最近边）， farthest-side（最远边）， closest-corner（最近角）， farthest-corner（最远角）

49、重复性径向渐变

  background：repeat-radial-gradient（red，yellow  10%，green  20%）

50、UI状态伪类

• enable 匹配所有用户界面（form表单）中处于可用状态的元素
• disabled 匹配所有用户界面（form表单）中处于不可用状态的元素
• checked 匹配所有用户界面（form表单）中处于选中状态的元素