css常用属性

82 阅读2分钟

1.css文本属性

direction  设置文本方法
line-height  设置行高
text-align  元素中文本的水平对齐方式
text-decoration  文本修饰线(underline下划线)
text-indent  文本缩进
text-shadow  设置文本阴影
text-transform  设置元素文本中的字母
vertical-align  设置元素的垂直对齐方式
white-space  设置元素空白的处理方式
word-spacing  设置字间距
letter-spacing 设置字符间距

2.css字体属性

font系列
font-family  文本字体类别
font-size  字体大小
font-style 字体样式
font-variant  以正常字体显示文本
font-weight 字体粗细
color 设置文本颜色

3.单位

px -- 像素
em -- 相对于当前字体font-size大小
rem - 相对于根元素的font-size大小
vw -- 视口的1%宽度
vh -- 视口的1%高度
% -- 相对于父元素

4.css背景属性

background-attachment 背景是否固定或者随着页面的其他部分滚动
background-color 背景颜色
background-image  背景图片
background-position  背景图片开始的位置
background-repeat 设置背景图片是否平铺,重复
opacity -- 透明度,1不透明,0完全透明 会继承
rgba -- 同opacity,不会继承

5.css列表属性

list-style 简写属性
list-style-image 将图片设置为列表项标志
list-style-position 设置列表项标志的位置
list-style-type 设置列表项标志的类型

6.css边框属性

border 
border-style  设置边框的样式
border-width 边框宽度
border-color 边框颜色
border-radius  边框圆角
box-shadow  边框阴影

7.css伪类/元素

:link     a:link 选择未访问链接
:visited  a:visited 选择访问过的链接
:active   a:active 选择正在活动的链接
:hover    a:hover 鼠标移到链接上的状态
/*link visited hover active 的使用顺序*/

8.弹性盒子属性

/*容器属性*/
flex-direction  -- 设置项目的排列方向
flex-wrap -- 项目超出父宽度,设置换行方式
justify-content -- 设置项目在水平的对齐方式
align-items -- 设置项目在垂直的对齐方式
align-content -- 设置多个轴线的对齐方式

/*项目属性*/
order -- 设置项目的排列顺序,越小越靠前
flex-grow -- 设置项目的方法比例,默认为0,不放大,设置为1,会将剩余空间均匀分配给项目
flex-shrink -- 设置项目缩小比例,默认为1,会等比缩小,适应容器,如果设置为0,不会缩小
flex-basis --设置项目占据主轴空间
flex -- 是上面三个的简写
align-self -- 设置单个元素的垂直对齐方式,可以覆盖align-items,默认为auto