本身不是学前端的，别人发给一些关于CSS设置的笔记，存个档。
vertical-align: top; 顶线对齐
background: blue; 背景色
border: 1px dotted; 边框大小和样式
padding-top: 20px; 字体和边框距离
text-align: center; 文本对齐居中
line-height: 37px; 行高
text-decoration: none; 去掉下划线
color: #ffffff; 字体颜色
border 边界
letter-spacing 字符间距
background-color 边框里面填充色
margin-right: 边框和边框之间的距离
type=“none” 取消点
ul>(li>a.符号)*数字
hovercolor:{ 亮的时候字体颜色;
background-color: 亮的时候背景颜色;}
margin-left（往左平移）
padding: 3px（字体上下间距）20px（左右间距）
display: block 切换块元素
text-align: 文字对齐方向
font-weight: 700; 加粗
white-space: nowrap; 不换行
/*a的4个伪类选择器：
link visited hover active
*使用时 hover要置于link visited之后，
active要置于hover之后才有效（A链接才有用）
*/
link 链接没有访问之前的状态
visited 链接已被访问过
hover 鼠标放上去高亮 （除了A链接，其他也可以用）
active 当鼠标点击链接的一瞬间了亮
cursor: pointer 设置鼠标的移入的样式
display: none 隐藏元素
position : absolute 定位 absolute 绝对定位：基于已定位父元素定位
min-width: 最小宽度
<input type="text”> 文本输入框
<input type="button" value=“”>按钮输入框
outline 外轮廓
background-image:url ( ) 背景图，括号里加背景图的链接
行高是相对于字体大小的：当时数值形式时，表示是当前字体的大小的几倍
inline-block：可以让块元素同行显示，宽高由内容撑起；
float 浮动 :（none 默认值 left 左浮动 right 右浮动）
clear 清除浮动 ：left right both(清掉左浮动 右浮动)
overflow 超出部分 （hidden隐藏 scroll滚动 ）
在对应元素后面添加内容
.clearfix:after{content: “啊"}
多个类名之间空格间隔
无序列表 ul
有序列表 ol
ul，ol通常结合li匹配使用
定义列表 dl
dl通常结合dt（列表的标题）和dd（列表项数据）匹配使用
文字上角标 sup
文字的下角标 sub
q blockquote 引号
list-style: (none)去掉序列前面的标点
<a href="" target="_blank">链接2</a> target=“_blank”(新页面打开)
_self (在当前页面打开)
E:before 在对应的元素前面添加内容
E:after 在对应的元后面添加内容
p:before{
content: “”}
content (添加内容 )
li{ background: blue !important; } !important ( 优先级最高)
cursor: pointer 鼠标变成小手
input
文本输入框 text
密码输入框 password
单选框 radio
复选框 checkbox
提交按钮 submit
普通按钮 button
value:设置按钮上显示的文字
placeholder:默认的提示文本
outline: none 去掉外轮廓(颜色)
resize: none
none 不允许调整
horizontal 允许调整宽度
vertical 允许调整高度
both 允许两个方向调整
list-style: none 去掉排序点
header 头部
section 表示一个区域
article 表示内容相对独立的区域
aside 表示侧边栏
nav 表示导航区域
hgroup 表示标题的分组
footer 表示底部
details 表示折叠信息 自带折叠效果
progress 进度条 如：下载进度 播放进度等
video 视频元素
audio 用于播放音频元素
focus: 获取焦点
checked: 获取被选中项
enabled: 获取可用状态的
disabled: 获取不可用状态的
required 必须填写项
:empty 获取空元素
background-position 确定背景位置
background-image 将精灵图作为背景图
background-repeat: no-repeat 不重复
background-size: 背景图大小
background-clip:;背景图的剪切位置
background-origin:;背景图片放置的位置
content-box 从内容区域开始放置
padding-box 从padding区域开始放置
border-box 从边框开始放
E^F E元素中所有的F元素
E~F E元素中第一个子元素F
groove 边框相框
box-shadow 边框阴影
蒙版
-webkit-mask:url(img/xin.png) no-repeat top center ;
渐变蒙版
-webkit-mask:linear-gradient(red,transparent);
linera-geadient( 线性渐变 )
radial-gradient(径向渐变 )
repeating-linear-gradient(重复线性渐变)
repeating-radial-gradient(重复径向渐变)
closest-corner 最近的角
farthest-corner 最远的角
closest-side 最近的边
farthest-side 最远的边
circle 圆形
ellipse 椭圆形
transparent 透明色
infinite 无限次
animation 动画
opacity:0.5 透明度
perspective 景深
transform-style: preserve-3d; 设置成3d
宽 时间 匀速
transition: width 1s linear; 过渡动画
延迟 时间
ease-in 2s
animation-duration:1s ; 动画时长
animation-iteration-count: infinite; 变化次数
animation-timing-function: ease-in;动画速度变化函数
animation-delay: 2s; 动画延迟时间
animation-direction:alternate;( normal 正向播放 reverse 反向播放 alternate 偶数次正向播放,奇数次反向播放) 动画播放方向
display: flex 弹性布局
flex-direction: row 水平方向 自左至右 ;设置主轴的方向
row-reverse 水平方向 自右至左
column 垂直方向 自上都下
column-reverse 垂直方向 自下到上
flex-wrap:
nowrap 默认值 不换行
wrap 换行 在第一行后面换行
wrap-reverse 换行 在第一行前面换行
设置弹性子元素在主轴上的对齐方式
justify-content: flex-start 从主轴起点对齐;
center 居中
flex-end 向主轴终点对齐
space-around 分布对齐
space-between 两端对齐
弹性子元素在交叉轴上的对齐方式
align-items: stretch 默认值 不设置高度拉伸填充整个交叉轴;
flex-start 交叉轴起点对齐
flex-end 交叉轴终点对齐
center 交叉轴的中心点对齐
baseline 文本的基线对齐
设置多个主轴在交叉轴上的对齐方式
align-content: flex-start 从交叉轴起点对齐;
center 居中
flex-end 向主轴终点对齐
space-around 分布对齐
flex-flow:是 flex-direction 和 flex-wrap的简写形式
order: -1; 设置排列顺序
默认都是0, 数值越小,位置越靠前.值相等,按书写顺序排列
flex-grow: 1; 设置弹性子元素的放大比例,多余空间的分配比例. 默认为0, 代表有多余空间也不使用
flex-shrink:3; 设置弹性子元素的缩小比例,当空间不足时的收缩比例,默认为1. 当值为0时不压缩
890
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
