一、文本与字体属性
1.字体段落相关属性
color:字体颜色
font-size:字体大小
text-align:对齐方式(水平居中)
center:居中
left;左对齐
right:右对齐
justify:两端对齐
inherit:继承父元素
注意:text-align:justify仅用于除最后一行的文本对齐,要使最后一行两端对齐,需加一行代码text-align-last:justify
line-height:行高
垂直居中:行高=盒子高
list-style:li样式
none:取消默认样式
text-indent:文本(首行)缩进
缩进n个字符,值等于字体大小*n
text-decoration:设置或删除文本装饰(不继承)
none:标准文本,清除a标签默认下划线
underline:下划线
overline:上划线
line-through:删除线
blink:设置文本闪烁
inherit:继承父元素
eg:a:hover{
text-decoration:underline
}
text-tranform:文本转换
作用:指定文本中的大小写字母
capitalize:单词首字母大写
uppercase:大写所有字母
lowercase:小写所有字母
inherit:继承父元素
word-spacing:文本间隔,用于中文字,英文单词
letter-spacing:文本间隔,用于中文字和英文字母
white-spacing:空白间隔
2.background背景
CSS1属性:
background-color:背景颜色
background-image:背景图片
background-repaeat:设置图片是否平铺/重复,多用no-repeat
background-attachment:背景图片是否固定或随页面其余部分滚动
background-position:改变背景图位置
CSS3新增属性:
background-size:背景图大小
background-origin:设置背景图定位区域
background-clip:设置背景图绘画区域
简写时,顺序为:color,image,repeat
3.行内元素,块级元素,行内块元素
是否能并排排列 是否能设置宽高 不设置width时 举例
块级元素 × √ 自动收缩 div,p,h1~h6,ul/ol li等
行内元素 √ × 自动收缩 span,a,b等
行内块元素 √ √ 自动撑满 img,表单元素
4.元素的隐藏
display:block 将元素转换为块级元素
display:inline 将元素转换为行内元素
display:inline-block 将元素转换为行内块元素
display:none 隐藏该元素,元素不占位,等同无此元素
visibility:nonehidden 隐藏该元素,元素占位,此元素还存在
二、盒子模型
margin:外间距
margin-top/bottom/left/right:单独设置某一方向的外间距
eg:margin:10px; 上下左右
margin:10px 20px; 上下 左右
margin:10px 20px 30px; 上 左右 下
margin:10px 20px 30px 40px; 上 右 下 左
注意:margin有塌陷问题
同级之间上下margin,取大值
嵌套盒子,子盒子加margin-top不生效,可由父盒子设置padding和border
padding:内边距
padding-top/bottom/left/right:单独设置某一方向的内边距
eg:padding:10px; 上下左右
padding:10px 20px; 上下 左右
padding:10px 20px 30px; 上 左右 下
padding:10px 20px 30px 40px; 上 右 下 左
border:边框
写法:border:宽度 样式 颜色;
eg:border:1px solid red;
设置边框线颜色:border-top/bottom/left/right
样式: solid 实线
dashed 虚线
dotted 点
transparent:透明色
border-radius:设置边框圆角(px设置圆角固定值,%设置相对百分比,取值50%时为圆形)