css属性总结 | ||||
分类 | 属性名 | 作用 | 属性值 | 备注 |
文本处理 | color | 字体颜色 | red rgb rgba hex | 单词 rgb rgba 16进制 |
font-size | 字体大小 | 16px | 像素值 | |
em | 参照物是父级,父级的n倍 | |||
rem | 参照物是html,根元素html的n倍(谷歌浏览器默认是16px) | |||
text-decoration | 文本修饰线 | line-through | 删除线 | |
underline | 下划线 | |||
none | 去除所有修饰线 | |||
line-height | 行高 | 40px | 像素值(当行内元素的行高等于父级时,元素垂直居中) | |
text-align | 文本水平对齐方式 | center | 水平居中对齐 | |
left | 水平居左对齐 | |||
right | 水平居右对齐 | |||
vertical-align | 与左右两侧内容在垂直方向的对齐方式 | baseline | 基线对齐,默认值 | |
top | 顶部对齐 | |||
bottom | 底部对齐 | |||
middle | 中线对齐 | |||
font-family | 字体型号 | "微软雅黑“,”宋体“ | 从前往后依次取值,可以写多个值 | |
font-weight | 字体字重 | normal 400 | 正常体 | |
lighter 300 | 细体 | |||
bold 600 | 粗体 | |||
text-indent | 首行缩进 | 2em | 中文首行缩进两字符 | |
white-space | 文本溢出换成省略号 | nowrap | 强制不换行 | |
overflow | hidden | 溢出隐藏 | ||
text-overflow | ellipsis | 超出的文本替换成省略号 | ||
背景处理 | background-color | 背景颜色 | red rgb rgba hex | 单词 rgb rgba 16进制 |
backgroud-image | 背景图 | url(图片路径) | 所在区域需要设置宽高 | |
backgroud-image | 渐变效果 | linnear-gradient(颜色1,颜色2) | 只有颜色渐变 | |
backgroud-image | linnear-gradient(角度值,颜色1,颜色2) | 带角度的渐变 | ||
backgroud-image | linnear-gradient(角度值,颜色1 开始位置 结束位置,颜色2 开始位置 结束位置) | 带角度与起始位置的渐变 | ||
backgroud-size | 背景图尺寸 | (600px 300px) | 像素值 | |
(100% 100%) | 百分比注意图片失真问题 | |||
(100% auto) | 宽度正好,高度自适应,会牺牲高度 | |||
(auto 100%) | 高度正好 ,宽度自适应,会牺牲宽度 | |||
contain | 至少显示一张完整的图,剩余空间平铺 | |||
cover | 铺满整个屏幕,超出部分裁掉 | |||
backgroud-position | 背景图定位 | left top | 默认左上角,先说左右,再说上下; X轴:left左 center中 right右; Y轴:top上 center中 bottom下 | |
150px -50px | 像素值,向右 向上 | |||
background-repeat | 背景图重复方式 | repeat | 默认值,X轴Y轴都重复 | |
repeat-x | 只允许在X轴重复 | |||
repeat-y | 只允许在Y轴重复 | |||
no-repeat | 不允许重复 | |||
盒子模型 | box-sizing | 盒子模型计算方案 | content-box | 内容盒子(默认) |
border-box | 边框盒子(怪异盒模型) | |||
pdding | 内间距 | 10px | 上右下左四个方向的内间距都是10 | |
10px 20px | 上下10 左右20 | |||
10px 20px 30px | 上10 左右20 下30 | |||
10px 20px 30px 40px | 上10 右20 下30 左40 | |||
pdding-top | 10px | 上内间距10 | ||
padding-right | 10px | 右内间距10 | ||
padding-bottom | 10px | 下内间距11 | ||
padding-left | 10px | 左内间距11 | ||
margin | 外间距 | 10px | 上右下左四个方向的外间距都是10 | |
10px 20px | 上下10 左右20 | |||
10px 20px 30px | 上10 左右20 下30 | |||
10px 20px 30px 40px | 上10 右20 下30 左40 | |||
margin-top | 10px | 上外间距10 | ||
margin-right | 10px | 右外间距10 | ||
margin-bottom | 10px | 下外间距11 | ||
margin-left | 10px | 左外间距11 | ||
border | 四个方向的边框 | 1px solid #000 | 综合设置:边框粗细 线型 颜色 | |
border-top | 上边框 | |||
boder-right | 右边框 | |||
border-bottom | 下边框 | |||
boder-left | 左边框 | |||
border-width | 边框宽度 | 1px | 设置四个方向边框的粗细 | |
border-style | 边框线型 | solid单实线 dashed虚线 dotted点状 | double双实线 | |
border-color | 边框颜色 | red rgb rgba hex | 单词 rgb rgba 16进制 | |
border-{top}-{color} | 设置单方向边框的单个属性 | |||
大小处理 | width | 宽度 | 100px 100% | 像素值 百分比 |
height | 高度 | 100px 100% | 像素值 百分比 | |
显示模式 | display | 块级元素 | block | 以块级元素的形式显示 |
行内元素 | inline | 以行内元素的形式显示 | ||
行内块元素 | inline-block | 以行内块元素的形式显示 | ||
元素消失 | none | 元素消失并释放布局空间 | ||
隐藏与显示 | background-color | 背景色设为透明度 | background-color:transparent; | 只影响背景颜色,不会释放布局空间 |
background-color:rgba(0,0,0,0); | ||||
visibility | 可见度 | hidden | 隐藏 | |
visible | 可见(默认) | |||
opacity | 透明度 | 0 完全透明;1完全不透明;0.5半透明 | 所有元素一起变透明,不释放布局空间 | |
display | 修改显示模式 | none | 元素消失并释放布局空间 | |
溢出控制 | overflow | 控制溢出情况 | visible | 溢出可见 |
hidden | 溢出隐藏,直接裁掉 | |||
scroll | 添加滚动条,无论是否需要直接添加 | |||
auto | 自动添加滚动条 | |||
修饰与美化 | list-style | 列表样式 | none | 去掉列表前的标识符 |
borde-radious | 边框圆角 | 10px 或10% | 像素值或者百分比,四个角弧度统一 | |
10px 20px | 左上右下 右上左下 对角线 | |||
10px 20px 30px | 左上 右上左下 右下 | |||
10px 20px 30px 40px | 从左上角开始顺时针给四个角设置 | |||
border-{top}-{left}-radios | 单独设置某个角 | |||
box-shadow | 元素阴影 | 值1:5px | 必写,阴影的X轴偏移量 | |
值2:5px | 必写,阴影的Y轴偏移量 | |||
值3:5px | 羽化值,越大阴影越虚化 | |||
值4:5px | 扩展半径,越大阴影范围越大 | |||
值5:#aaa | 阴影颜色 | |||
值6:outset | 外阴影 | |||
cursor | 光标 | default | 默认,箭头 | |
pointer | 手形 | |||
wait | 等待,转圈圈,沙漏 | |||
text | 工字形,文本输入 | |||
crosshairs | 十字光标,截图用 | |||
浮动 | float | 左浮动 | left(start) | 向父级元素的左侧边界靠拢 |
右浮动 | right(end) | 向父级元素的右侧边界靠拢 | ||
定位 | position | 定位方式 | static | 静态定位,文档流布局 |
relative | 相对定位,参照自己原来的位置 | |||
absolute | 绝对定位,参照最近的非静态祖先元素 | |||
fixed | 固定定位,参照根元素 | |||
z-index | 调整层级 | 整数值,无单位,可以有负数 | 数字越大,层级越靠上 | |
top/right/bottom/left | 移动方向 | 像素值 百分比 | 距离参照物移动的距离,负值反方向 | |
弹性布局容器属性 | display | 显示模式 | flex | 使用本属性的父容器将使用弹性布局 |
flex-direction | 主轴方向 | row | 行模式,默认值 | |
column | 列模式 | |||
row-reverse | 反向行模式 | |||
column-reverse | 反向列模式 | |||
flex-warp | 是否换行 | nowarp | 不换行,默认值 | |
warp | 换行 | |||
flex-flow | 主轴方向与是否换行 | row主轴方向 nowarp是否换行 | 两个属性的简写 | |
justify-content | 项目在主轴上的对齐方式 | flex-start | 项目在主轴上起点对齐 | |
flex-end | 项目在主轴上终点对齐 | |||
center | 项目在主轴上居中对齐 | |||
spance-between | 项目在主轴上两端对齐 | |||
spance-evenly | 项目在主轴上公平对齐 | |||
spance-around | 项目在主轴上环绕对齐 | |||
align-items | 项目在交叉轴上的对齐方式 | flex-start | 项目在交叉轴方向上起点对齐 | |
flex-end | 项目在交叉轴方向上终点对齐 | |||
center | 项目在交叉轴方向上居中对齐 | |||
弹性布局项目属性 | flex-grow | 项目增长属性 | 0 默认值 不增长 | 父容器有剩余空间也不会放大 |
1 | 增长,其他项目为0时,直接占满所有空间 | |||
n | 等比例增长 | |||
flex-shrink | 项目收缩 | 0 | 不收缩 | |
1 | 默认,收缩 | |||
flex-basis | 项目在主轴方向上的大小 | auto | 主轴上项目尺寸是自设尺寸 | |
500px | 主轴上项目尺寸是被规定(500px) | |||
过渡 | transition | 过渡 | 最简写写执行时间就行,其他都可以不写,执行时间在前,延迟时间在后,其他没顺序 | |
变换 | transform | 位移 | translateX(100px) | X轴向右移动100px,正值向右,负值向左 |
transform | 位移 | translateY(100px) | Y轴向下移动100px,正值向下,负值向上 | |
transform | 位移 | translate(100px,100px) | 向右移动100,向下移动100 | |
transform | 位移 | translate(100px) | 只写一个值,默认为X轴 | |
transform | 旋转 | rotate X(30deg) | 元素围绕X轴旋转 | |
transform | 旋转 | rotate Y(30deg) | 元素围绕Y轴旋转 | |
transform | 旋转 | rotate (30deg) | 二维平面,默认围绕中心点旋转 | |
transform | 缩放 | scale() | 同时负责X轴与Y轴的缩放 | |
transform | 缩放 | scaleX() | 只负责X轴的缩放 | |
transform | 缩放 | scaleY() | 只负责Y轴的缩放 | |
transform | 扭曲 | skewX(20deg) | X轴的扭曲 | |
transform | 扭曲 | skewY(20deg) | Y轴的扭曲 | |
transform | 扭曲 | skew(20deg,20deg) | XY一起扭曲 | |
transform-origin | 切换基点 | nter默认值,可以是百分比/关键字 | 切换基点的位置 |
web学习笔记6-css样式总结
于 2023-03-14 20:20:23 首次发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)