外边距
margin: 上 右 下 左;
内边距
padding: 上 右 下 左;
文字左右间距
letter-spacing: 1px;
文字上下行高
line-height: normal;
文本对齐方式 center居中对齐 end靠右对齐
text-align: center end;
上划线overline 删除线line-through 下划线underline
text-decoration: overline line-through underline;
文本溢出截取掉clip 文本溢出省略号ellipsis
text-overflow: clip ellipsis;
文本阴影
text-shadow: x y red;
文本段落缩进
text-indent: 2rem;
文本镜像翻转
unicode-range: rtl;
字体样式 为宋体黑体之类的
font-family: '';
字体加粗100-900
font-weight: normal;
字体样式 italic斜体 oblique斜体
font-style: normal italic oblique;
字体大小
font-size: px;
浮动脱离文档流但层级比定位低 left左浮动 right右浮动
float: left right;
清除浮动 both全部清除 left左 right右 none默认值,不清楚浮动,注意,用完浮动记得及时清理掉,不然如果一个容器里面所有元素全部浮动,会导致容器的整个高度丢失(高度塌陷)
clear: both left right none;
定位 relative相对定位(绝对定位的参照物) absolute绝对定位(脱流) fixed(固定定位,相当于浏览器窗口定位)注意:一遍不建议使用定位,脱离文档流,节点不可控
position: relative absolute fixed;
定位后元素的层级,越高越在上显示
z-index: 1-999;
盒子显示
display: block;
盒子隐藏,消失,节点不存在
display: none;
盒子以表格进行布局常用与配合伪类::before防止外边距击穿
display: table;
将盒子以-webkit-box布局 从这到display:inline;为设置页面扩展性可用
display: -webkit-box;
超出部分省略号显示
text-overflow: ellipsis;
文本最大显示行数
-webkit-line-clamp: 显示行数;
从上到下垂直排列
-webkit-box-orient: vertical;
文本强制一行显示
white-space: nowrap;
将盒子设置为行内元素
display: inline;
将盒子变为行内块元素可数字大小独占一行
display: inline-block;
scroll超出部分左右滚动条 auto超出部分上下滚动条 hidden超出部分隐藏
overflow: hidden scroll auto;
/* 设置为弹性盒子布局 */
display: flex;
容器主轴排列样式 space-between两端对齐等份排列 space-around项目水平间间距为两端两倍 space-evenly项目水平间间距与两端间距相等 flex-end center居中排列
justify-content: space-between space-around space-evenly flex-end center;
容器属性交叉轴排列 center上下居中 flex-end靠下排列
align-items: center flex-end;
弹性盒子容器属性 column旋转轴线,可简单认为就是上下排列,注意,不标准解释,只为方便理解
flex-direction: column;
弹性盒子容器属性 nowrap默认,不允许换行显示项目宽度大于容器会等比压缩 wrap允许换行显示
flex-wrap: nowrap wrap;
弹性盒子项目属性项目所占容器空余部分的等分量
flex-grow: 1 2 3;
弹性盒子项目属性是否允许被拉伸 0为不允许 1为允许
flex-shrink: 0/1;
弹性盒子项目属性,类似于宽,但比宽权重高
flex-basis: 0vh;
弹性盒子项目属性数字越大越靠前排列
order: 1 2 3 4;
文本位置设置 center居中 flex-end靠右 ie10以上支持
align-self: center flex-end;
节点透明度0为透明1为不透明取值范围0-1 inherit从父级继承
opacity: 0-1 inherit;
背景颜色
background-color: indianred;
背景图片url() 线性渐变linear-gradient(to bottom left,red,yellow...) 径向渐变圈形radial-gradient(circle 表示圆形,ellipse 表示椭圆形。默认值是 ellipse。,red 30%, yellow 30%,green 40%)
background-image: url() linear-gradient(to bottom left,red,yellow) radial-gradient(circle/ellipse,red 30%, yellow 30%,green 40%);
背景图移动设置
background-position: x y;
背景图大小设置
background-size: px;
padding-box背景不占边框 背景不占内边距或只占内容大小content-box
background-clip: padding-box content-box;
背景图重复设置样式 repeat-x水平重复 repeat-y垂直重复 no-repeat不重复
background-repeat: repeat-x repeat-y no-repeat;
变换样式 rotate(deg)旋转 translate(x,y)位移 scale(x,y)缩放 skew(x,y)扭曲
transform: rotate(deg) translate(x,y) scale(x,y) skew(x,y);
改变变化点 top left 为左上方也可以百分比具体控制
transform-origin: 0% 0%/top left;
2d效果flat 3d效果preserve-3d
transform-style: flat preserve-3d;
景深
perspective: 1000px;
触发式动画耗时时间 (触发式动画:一般通过伪类:hover形式触发 主动式动画:页面加载完毕即触发)
transition-duration: 3s;
触发式动画延时触发
transition-delay: 1s;
触发式动画样式属性 all全部
transition-property: all 自定义;
触发式动画函数
transition-timing-function: linear;
触发式动画附和写法
transition: property duration function;
动画名字 与下方主动式动画呼应
animation-name: ljx;
动画第一帧到最后一帧时常
animation-duration: 3s;
动画播放函数 linear匀速
animation-timing-function: linear;
动画延时多久播放
animation-delay: 1s;
动画播放次数 infinite无限播放
animation-iteration-count: infinite;
动画播放模式 正向播放动画normal/reverse逆向播放动画
animation-direction: normal/reverse;
盒子模型 border-box怪异盒子模型边框内边距不影响盒子本身大小 content-box标准盒子模型
box-sizing: border-box content-box;
盒子阴影
box-shadow: x y 扩散 缩小 rgb;
}
主动式动画
@keyframes ljx{
0%{}
100%{}
}
媒体查询/响应式 最大宽设置需要按照降序排列最小宽应该按照升序排列,原理为后写覆盖掉先写
@media screen and (max-width/min-width){
}
总结css常用页面属性
最新推荐文章于 2023-05-07 15:44:24 发布