HTML+CSS | |||||||||
元素 | 缩写 | 作用 | |||||||
font-size: ; | fz | 设置文字大小 | |||||||
text-indent: 2em; | ti 2em | 首行缩进2字符距离 | |||||||
text-align: center; | tac | 文字水平居中 | |||||||
list-style-type:none | 去掉li的点 | ||||||||
text-decoration: none; | tdn | 去除下划线 | |||||||
margin: 0 auto | m0 a | 大盒子水平居中 | |||||||
line-height: 36px; | lh | 设置行高(文字垂直居中) | |||||||
font-weight: 700; | fw | 文本加粗 | |||||||
font-family: 微软雅黑; | ff | 设置字体 | |||||||
img | 插入图片 | atl | 替换文本 加载失败就会显示文字信息 | ||||||
display: block; | db | 转化为块元素 | 独占一行 设置宽高生效 宽度默认是父级的100% | ||||||
display: inline; | di | 转化为行类元素 | 一行显示多个 设置宽高不生效 尺寸和内容一样大 | ||||||
display: inline-block; | dib | 转化为行类块 | 一行显示多个 设置宽高生效 | ||||||
background: url( ) | bgu | 设置背景图片 | no-repeat 0px -170px; 设置精灵图和位置 | ||||||
background-repeat: no-repeat; | brn | 背景图片不平铺 | |||||||
background-size: cover; | bgs | 背景图片大小 | |||||||
background-color: ; | bgc | 背景色 | |||||||
border : 1px solid #000; | bd1 +solid | 盒子边框 | border : 1px dashed #000; 虚线边框 | ||||||
background-position: 0 0; | bp | 精准定位背景 | |||||||
left 左 top 上 right 右 bottom 下 | |||||||||
margin | mar | 外边距 | |||||||
panding | pan | 内边距 | |||||||
box-sizing: border-box; | 先输入bs再输入bb | 自动内减 | |||||||
:first-child | 第一个 | ||||||||
:last-child | 最后一个 | ||||||||
:nth-last-child(1) | 倒数第一个 | ||||||||
display: none; | 隐藏元素 | ||||||||
background-image: linear-gradient(transparent,rgba(255, 255,255,0.5) ,transparent); | |||||||||
opacity | 透明度 | ||||||||
outline: none; | 取消点击搜索栏产生的框 | ||||||||
::placeholder{ | 设置搜索框的文字属性 | ||||||||
overflow: hidden; | 溢出部分隐藏 | ||||||||
box-shadow:0px 3px 5px 0px | 盒子阴影 | ||||||||
border-radius | 圆角边框 | ||||||||
position: absolute; | pa | 相对定位 | |||||||
position: relative; | 绝对定位 | ||||||||
::after | 在什么什么后面加伪元素 | 要加content: '' | |||||||
.box::before | 在什么什么前面加伪元素 | 要加content: '' | |||||||
transition: all 0.5s; | ts | 过渡 | |||||||
vertical-align: middle; | 去除img下面空隙 | ||||||||
perspective: 800px; | 开启近大远小 | ||||||||
preserve-3d | 开启3D | ||||||||
transform | 将这个东西 | ||||||||
translateX(800px) | 移动 | ||||||||
rotate(360deg); | 旋转 | ||||||||
animation | 使用动画 | forwards:最后一帧状态backwards:第一帧状态linear(匀速) infinite(无限循环) alternate(来回)paused 暂停 | |||||||
display: flex; | df | 使用flex 布局 | 给父元素添加 | ||||||
space-evenly; 边距相等 | |||||||||
flex-wrap: wrap; 弹性盒子换行 | |||||||||
align-self:flex-end; | 底部排行 | ||||||||
flex-direction: column; | 切换X为主轴 | row-reverse 行, 从右向左 column-reverse 列, 从下向上 row 行, 水平(默认值) | |||||||
justify-content: center; | j-c c | 主轴居中 | |||||||
justify-content: space-between; | 圣杯布局 | ||||||||
justify-content: space-around; | 1:2布局 | ||||||||
flex-start | 从左往右布局(默认) | ||||||||
align-items: center; | aIc | 侧轴居中 | |||||||
align-content | 行对齐方法(取值和jc一样) | ||||||||
link:favicon.ico | 网页图标 |
HTML+CSS常用元素和属性
最新推荐文章于 2023-07-09 20:59:14 发布