CSS常用属性整理汇总全集

page: 盒子的位置计算参照absolute。(CSS3)

------------------------------------------------------------------------------------------------------------------

margin

h2{margin:10px 0;}

检索或设置对象四边的外延边距。

如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。

如果只提供一个,将用于全部的四边。

如果提供两个,第一个用于上、下,第二个用于左、右。

如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。

内联对象可以使用该属性设置左、右两边的外补丁;若要设置上、下两边的外补丁,必须先使该对象表现为块级或内联块级。

外延边距始终透明。

某些相邻的margin会发生合并,我们称之为margin折叠

---------------------------------------------------------------------------------------------------------

aspect-ratio

: 指定比率

定义输出设备中的页面可见区域宽度与高度的比率。

本特性接受min和max前缀,因此可以派生出min-aspect-ratio和max-aspect-ratio两个媒体特性。

@media screen and (aspect-ratio:1680/957){ … }

@import url(example.css) screen and (max-aspect-ratio:20/11);

---------------------------------------------------------------------

background:

[ background-color ]: 指定对象的背景颜色。

[ background-image ]: 指定对象的背景图像。可以是真实图片路径或使用渐变创建的“背景图像”

[ background-repeat ]: 指定对象的背景图像如何铺排填充。

[ background-attachment ]: 指定对象的背景图像是随对象内容滚动还是固定的。

[ background-position ]: 指定对象的背景图像位置。

[ background-origin ]: 指定对象的背景图像显示的原点。

[ background-clip ]: 指定对象的背景图像向外裁剪的区域。

[ background-size ]: 指定对象的背景图像的尺寸大小。

新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互解答,并且还准备很多学习资料,欢迎零基础的小伙伴来一起交流。

--------------------------------------------------------------------

background-attachment   设置或检索背景图像是随对象内容滚动还是固定的。必须先指定background-image属性。

fixed: 背景图像相对于窗体固定。

scroll: 背景图像相对于元素固定,也就是说当元素内容滚动时背景图像不会跟着滚动,因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。

local: 背景图像相对于元素内容固定,也就是说当元素随元素滚动时背景图像也会跟着滚动,因为背景图像总是要跟着内容。(CSS3)

-----------------------------------------------------------------------------------------------------------------------------

background-clip    指定对象的背景图像向外裁剪的区域。

padding-box: 从padding区域(不含padding)开始向外裁剪背景。

border-box: 从border区域(不含border)开始向外裁剪背景。

content-box: 从content区域开始向外裁剪背景。

text: 从前景内容的形状(比如文字)作为裁剪区域向外裁剪,如此即可实现使用背景作为填充色之类的遮罩效果。

---------------------------------------------------------------------------------------------------------------

background-repeat: 设置或检索对象的背景图像如何铺排填充。必须先指定background-image属性。

允许提供2个参数,如果提供全部2个参数,第1个用于横向,第二个用于纵向。

如果只提供1个参数,则用于横向和纵向。特殊值repeat-x和repeat-y除外,因为repeat-x相当于repeat no-repeat,repeat-y相当于no-repeat repeat,即其实repeat-x和repeat-y等价于提供了2个参数值

对应的脚本特性为backgroundRepeat。

repeat-x: 背景图像在横向上平铺

repeat-y: 背景图像在纵向上平铺

repeat: 背景图像在横向和纵向平铺

no-repeat: 背景图像不平铺

round: 背景图像自动缩放直到适应且填充满整个容器。(CSS3)

space: 背景图像以相同的间距平铺且填充满整个容器或某个方向。(CSS3

-------------------------------------------------------------------------

background-position:  设置或检索对象的背景图像位置。必须先指定background-image属性。

如果提供四个,每个或偏移前都必须跟着一个关键字(即left | center | right | top | bottom),偏移量相对关键字位置进行偏移。

示例:假设要定义背景图像在容器中右下方,并且距离右边和底部各有20px

缩写方式: background:url(test1.jpg) no-repeat right 20px bottom 20px;

: 用百分比指定背景图像填充的位置。可以为负值。

: 用长度值指定背景图像填充的位置。可以为负值。

center: 背景图像横向和纵向居中。

left: 背景图像在横向上填充从左边开始。

right: 背景图像在横向上填充从右边开始。

top: 背景图像在纵向上填充从顶部开始。

bottom: 背景图像在纵向上填充从底部开始。

------------------------------------------------------------

background-origin: 设置或检索对象的背景图像计算background-position时的参考原点(位置)。

padding-box: 从padding区域(含padding)开始显示背景图像。

border-box: 从border区域(含border)开始显示背景图像。

content-box: 从content区域开始显示背景图像。

-----------------------------------------------------------

【margin】

margin            检索或设置对象四边的外延边距

margin-top        检索或设置对象顶边的外延边距

margin-right      检索或设置对象右边的外延边距

margin-bottom     检索或设置对象底边的外延边距

margin-left       检索或设置对象左边的外延边距

argin:检索或设置对象四边的外延边距。

如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。

如果只提供一个,将用于全部的四边。

如果提供两个,第一个用于上、下,第二个用于左、右。

如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。

内联对象可以使用该属性设置左、右两边的外补丁;若要设置上、下两边的外补丁,必须先使该对象表现为块级或内联块级。

外延边距始终透明。

某些相邻的margin会发生合并,我们称之为margin折叠:

margin折叠常规认知:

margin折叠只发生在块级元素上;

浮动元素的margin不与任何margin发生折叠;

设置了属性overflow且值不为visible的块级元素,将不与它的子元素发生margin折叠;

绝对定位元素的margin不与任何margin发生折叠;

根元素的margin不与其它任何margin发生折叠;

auto: 值被设置为相对边的值

: 用长度值来定义外补白。可以为负值

: 用百分比来定义外补白。可以为负值

------------------------------------------------------------------------------------

*************************************************************************************************************

【padding】

padding            检索或设置对象四边的内部边距

padding-top        检索或设置对象顶边的内部边距

padding-right      检索或设置对象右边的内部边距

padding-bottom     检索或设置对象底边的内部边距

padding-left       检索或设置对象左边的内部边距

padding:检索或设置对象四边的内部边距。

如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。

如果只提供一个,将用于全部的四边。

如果提供两个,第一个用于上、下,第二个用于左、右。

如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。

内联对象可以使用该属性设置左、右两边的内补丁;若要设置上、下两边的内补丁,必须先使该对象表现为块级或内联块级。

: 用长度值来定义内补白。不允许负值

: 用百分比来定义内补白。不允许负值

------------------------------------------------------------

*********************************************************************************************************

【text】

text-transform          检索或设置对象中的文本的大小写

white-space             设置或检索对象内空格的处理方式

tab-size                检索或设置对象中的制表符的长度

word-wrap               设置或检索当内容超过指定容器的边界时是否断行

word-break              设置或检索对象内文本的字内换行行为

text-align              设置或检索对象中内容的水平对齐方式

text-align-last         设置或检索一个块内的最后一行(包括块内仅有一行文本的情况,这时既是第一行也是最后一行)

或者被强制打断的行的对齐方式

text-justify            设置或检索对象内调整文本使用的对齐方式

word-spacing            检索或设置对象中的单词之间的最小,最大和最佳间隙

letter-spacing          检索或设置对象中的字符之间的最小,最大和最佳间隙

text-indent             检索或设置对象中的文本的缩进

vertical-align          设置或检索对象内容的垂直对其方式

line-height             检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离

-------------------------------------------------

letter-spacing:检索或设置对象中的字符之间的最小,最大和最佳间隙。

该属性将指定的间隔添加到每个文字(包括单词内的每个字母)之后;

letter-spacing不能被应用于一行的开始和结束;

normal: 默认间隔

: 用长度值指定间隔。可以为负值。

: 用百分比指定间隔。可以为负值。

-----------------------------------------------------------------

line-height:检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离。

默认值:normal

normal: 允许内容顶开或溢出指定的容器边界。

: 用长度值指定行高。可以为负值。

: 用百分比指定行高,其百分比取值是基于字体的高度尺寸。可以为负值。

: 用乘积因子指定行高。可以为负值。

------------------------------------------------------------

text-align :设置或检索对象中内容的水平对齐方式。

块级元素的文本是一些堆叠的线框

要使得 text-align 的 justify 两端对齐生效,需要在汉字间插入有空白,如空格;

块内的最后一行文本(包括块内仅有一行文本的情况,这时既是第一行也是最后一行)及被强制打断的行,其两端对齐需使用 text-align-last;

IE浏览器下,如果 text-align-last 要生效,必须先定义 text-align 为justify;

单行两端对齐效果变得比较简单:

li{overflow:hidden;width:200px;height:21px;text-align:justify;text-align-last:justify;}

li:after{display:inline-block;overflow:hidden;width:100%;height:0;content:‘’;}

left: 内容左对齐。

center: 内容居中对齐。

right: 内容右对齐。

justify: 内容两端对齐。

start: 内容对齐开始边界。(CSS3)

end: 内容对齐结束边界。(CSS3)

: 字符串必须是单一字符,否则申明将无效。(CSS3)

match-parent: 这个值和 inherit 表现一致,只是该值继承的 start 或 end 关键字是针对父母的 direction 值并计算的,计算值可以是 left 和 right 。(CSS3)

start end: 指定 start 对齐第一行和任何强制打断的行;end 对齐所有剩余的行不受 text-align-last 影响。

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

需注意几点:

所有主流浏览器都支持 text-align 的 justify 属性值;

text-align不处理强制打断的行,也不处理块内的最后一行,换句话说,如果块内仅有一行文本(该行既是第一行也是最后一行),这时仅设置text-align:justify无法让该行两端对齐;

text-align-last 是用来处理块内的最后一行和强制打断的行的,所以当要设置单行文本两端对齐时,需使用 text-align-last;

非Firefox浏览器要使得两端对齐生效,需在文本间插入空白,如空格(如果一行仅有2个汉字,Firefox也需在之间插入空白);

Chrome23, Safari5.1.7, Opera12.5 尚不支持 text-align-last;

依据上述的点,要实现单行两端对齐,可以走2个方向:

由于所有浏览器都支持 text-align 的 justify 属性值,但不全支持 text-align-last,我们可以对非IE及IE7以上浏览器使用伪对象生成额外的内容(IE7及以下浏览器不支持伪对象,使用text-align-last处理),置于第二行并将其隐藏,这时第一行文本(即要对齐的那个单行文本)可使用text-align:justify来对齐

支持 text-align-last 的浏览器,如IE, Firefox使用 text-align-last 处理,不支持的浏览器使用如上述方法处理;

所以就目前情况来看,使用第一种方案是比较简约的,可以轻易的兼容IE5.5-10, Firefox, Chrome, Safari, Opera

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

text-align-last:设置或检索一个块内的最后一行(包括块内仅有一行文本的情况,这时既是第一行也是最后一行)

或者被强制打断的行的对齐方式

如果某一行同时也是块内的第一行或者第一行但后面紧跟着强制换行,除非显示的指定 text-align 第一行对齐方式(值 ‘start end’),否则 text-align-last 将会覆盖 text-align;

如果 auto 值被指定,内容的对齐方式将依据 text-align 的设定,除非 text-align 设置为justify;

作为IE的私有属性之一,IE5.5率先实现了 text-align-last ,后期被w3c采纳成标准属性;

IE7及以下浏览器只实现了块内最后一行的对齐方式,没有处理被强制打断的行的对齐方式,从IE8开始,这两种形式的行对齐都被支持;

IE浏览器下,如果 text-align-last 要生效,必须先定义 text-align 为justify;

auto: 无特殊对齐方式。

left: 内容左对齐。

center: 内容居中对齐。

right: 内容右对齐。

justify: 内容两端对齐。

start: 内容对齐开始边界。

end: 内容对齐结束边界。

-----------------------------------------------

text-indent: 检索或设置对象中的文本的缩进。

内联对象要使用该属性必须先使该对象表现为块级或内联块级。

hanging和each-line关键字紧随在缩进数值之后

div{text-indent:2em each-line;}

: 用长度值指定文本的缩进。可以为负值。

: 用百分比指定文本的缩进。可以为负值。

each-line: 定义缩进作用在块容器的第一行或者内部的每个强制换行的首行,软换行不受影响。(CSS3)

hanging: 反向所有被缩进作用的行。

---------------------------------------------------------------------------------------------------

text-transform :检索或设置对象中的文本的大小写。

none: 无转换

capitalize:   将每个单词的第一个字母转换成大写

uppercase:    将每个单词转换成大写

lowercase:    将每个单词转换成小写

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值