前端零碎知识点
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
表单)中处于选中状态的元素
上一篇: CSS层叠样式表(二)
下一篇: Linux知识补充点