一、文字属性
font-size:设置字体大小
font-family:设置文字的字体,常见的如:黑体、宋体、楷体等
font-style:规定斜体字,常见的如:normal:文本正常显示,italic:文本斜体显示,oblique:文本倾斜显示
font-weight:设置文体的粗细,关键字100~900为字体指定了9级加粗度。100最细,900最粗。
二、文本属性
color:设置文本颜色
text-indent:缩进元素中文本的首行,取值类型如下:text-indent:5em,表示此段落第一行缩进5个字符的宽度;text-indent:20%,表示此段落第一行缩进父容器宽度的百分之二十;
text-decoration: none:会关闭原本应用到一个元素上的所有装饰,underline: 添加下划线 overline:在文本的顶端画一个上划线 line-through:在文本中间画一个贯穿线 blink:让文本闪烁
text-align:一个元素中的文本行互相之间的对齐方式,值有left(左对齐)、right(右对齐) 和 center(居中)
word-spacing: 字符之间的间隔
letter-spacing: 单词或者字母之间的间隔
line-height:25px-32px
三、背景属性
background-color:设置背景颜色,默认透明
background-image:url("图片路径"):设置背景图片
background-repeat:repeat-y:只在垂直方向都平铺 repeat-x:只在水平方向都平铺 repeat:在水平垂直方向都平铺 no-repeat:任何方向都不平铺
background-position: 改变图像在背景中的位置。top、bottom、left、right 和 center
四、列表属性
list-style-type:decimal;改变列表的标志类型
list-style-image: url("images/dog.gif");用图像表示标志
list-style-position: inside;确定标志出现在列表项内容之外还是内容内部
五、尺寸显示轮廓属性
width:设置元素的宽度
height:设置元素的高度
显示属性 display:none 不显示 block:块级显示 inline:行级显示
绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
常用属性: outline-style:solid(实线)/dotted(虚线)/dashed(虚线,虚线的每段较长)/double(框为空心);
设置轮廓的样式
outline-color:red;设置轮廓的颜色
outline-width:10px设置轮廓的宽度
六、浮动属性
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
float:left向左浮动
float:right向右浮动
对于浮动属性的话,在有些需要拼接的div中或者模块中用着很方便,只是在拼接的时候要注意块的大小。
七、定位属性
position:static默认值,该关键字指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。此时 top、right、bottom、left 属性无效。
position:relative相对定位,它的偏移是相对于原先在文档流中的位置,普通流中仍然保留此元素的位置。relative不会改变行内元素的display值。
position:absolute绝对定位,如果其父元素没有设置position属性,则其根据body元素来变动,否则根据父元素的位置进行变动。此属性会脱离页面中的普通流并改变display的属性。行内元素应用了absolute属性后会改变其display为block。应用了absolute/relative属性值后,很有可能会覆盖其他非定位元素(static),可以设置z-index的值以防止被覆盖。
position:fixed元素设置为此属性值后,其会脱离普通流,而且其根元素是浏览器窗口,即当你滚动网页,这个元素依旧会显示在浏览器的那个位置。fixed属性会创建新的层叠上下文。和absolute相同,fixed也会使行内元素的display变成block。
position:sticky盒位置根据正常流计算(这称为正常流动中的位置),然后相对于该元素在流中的 flow root(BFC)和 containing block(最近的块级祖先元素)定位。在所有情况下(即便被定位元素为table时
),该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时,后续元素的位置仍按照 B 未定位时的位置来确定。position:sticky对table元素的效果与position:relative相同。