欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前端零碎知识点

程序员文章站 2022-05-10 11:52:41
...

1、target:_blank 超链接打开新窗口(_selftarget的默认值)。

2、图片

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

3、表格

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

4、表单

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

5、重置样式

  • *{margin:0;padding:0} 清除所有内外边距;
  • *(通配符)

6、边框

border-styleoutset(边框凸起)/ 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 HackFilter

  • 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(剩余空间等比划分)
  • flexflex-growflex-shrinkflex-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 2Dtransform

  • 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表单)中处于选中状态的元素
相关标签: 前端 基础