css3 常用样式
样式穿透
/deep/仅仅只在Vue里生效
<style>
/deep/.impouLi{
/**/
}
.demo{
color:#000 !important;
}
style>
会直接穿透所有子元素的样式
元素宽高 width height
最小高度 min-height
背景样式复合写法
background:image repape attachment position/size,color
背景颜色 bg color
background-color:#000;
背景颜色三原色 rgb
background-color:rgb(255,255,255);
背景透明度 rgba
background-color:rgba(255,0,0,0.5)a为透明
transparent 看起来像透明
(继承父元素的颜色看起来像透明)
背景图片 image
background-image:url('图片地址');
背景平铺 repeat
background-repeat:repeat;
(repeat默认重复 no-repeat不平铺 可以设置x y方向)
写法一 background-repeat-x:repeat;
写法二 background-repeat:repeat-y;
背景大小 bg size
background-size:cover;(大小可以写宽高,百分比关键字和auto)
cover:图片等比例缩小或放大到刚好覆盖内容超出的隐藏
contain:图片等比例缩小或放大直到有一条边碰到边框就停止
图片显示基点 origin
background-origin:padding-box;默认
content-box;内容区左上角
border-box;边框左上角
背景图片剪裁 cilp
background-cilp:border-box;默认
padding-box;图片紧紧贴着边框
content-box;只显示内容部分背景颜色也减掉了
背景关联依附 attachment
background-attachment:scroll;默认不跟随内容滚动
fixed;图片跟浏览器窗口
local;图片会跟内容走
图片位置 position
background-position:x y;相对于基点水平平移
百分比(百分比基数 元素 宽/高 度 -图片 宽/高 度)
关键字left,right,bottom,top,center居中
透明度 opacity
opacity:0.2;(会把子元素也一块消除)
内容超出处理 overflow
overflow:visible;默认正常显示
hidden;超出隐藏(会出现半个字)
scroll;超出用滚动条(文本没超出也有滚动条)
auto;未超出正常显示,超出显示滚动条
边框样式 border
border:50px solid red;(可以单独设置在那条边)
实线边框 solid
虚实线 dashed
圆点边框 dotted
双边框 double
边框宽度 border-width:;
边框种类 border-style:;
边框颜色 border-color:;
有/无序列表去掉小黑圆点 list-style
list-style:none; circle空心圆 square正方形
文字样式
字体无法选中,不选中
user-select: none;
英文字母全大写
text-transform:uppercase;
"一行"文字超出后方显示省略号:省略号三步走
overflow:hidden;超出隐藏
white-space:nowrap;文本不换行
text-overflow:ellipsis;超出显示省略号
颜色 color
color:#fff;
字体大小 font-size
font-size:16px;
(字体单位:px像素 em一个字符宽 高ex字母大写x的高 不写单位是父元素的字体大小乘数值)
字体粗细: font-weight
font-weight:;(normal正常lighter细 bold粗体 bolder更粗 100-900数字)
字体样式 font-family
font-family:Serif;(Serif有衬线 Sans Serif无称线)
文字垂直居中line-height
line-height:20px;(元素的高)
文本缩进样式text-indent
text-indent:1em; 只能给块元素设置
文本装饰 text-decoration
text-decoration:underline;下划线
文本上划线text-decoration:overline;
文本贯穿线text-decoration:line-through;
水平对齐方式text-align
text-align:center;(水平居中)
左对齐 text-align:left;
右对齐 text-align:right;
两端对齐 text-align:justify;(不等于水平居中)
块元素的宽width:100px;
块元素的高height:100px;
文字阴影 text-shadow
text-shadow: 2px 6px 1px red;
X轴偏移量 Y轴偏移量 透明度(不可以为负值) 颜色
外边距 margin
margin:20px 10px 20px 10px;(上 右 下 左)
margin-top:20px;
margin:20px auto;(上下 左右auto居中)
margin:20px auto 0;(上 左右 下)
margin:20px;(上下左右)
内边距 padding
padding(与margin相同)
同一层级下行内和块级的垂直居中 vertical-align 基线对齐
vertical-align:baseline;(只能对行内或行内块元素)
baseline(使**元素的基线与父元素的基线对齐) 默认值
middle(使元素的中部与父元素的中线对齐)
top(使元素及其后代元素的顶部与整行的顶部对齐)
bottom(使元素及其后代元素的底部**与整行的底部对齐) | 数值:px; , em;px 正值往上偏移
块元素与行内元素转换 display
转换成块级元素
display:block;
转换成行内元素
display:inline;
转换成行内块元素
display:inline-block;
隐藏元素
display:none; 浏览器都不会去渲染
盒模型 box-sizing
标准盒模型
box-sizing:content-box;
怪异盒模型
box-sizing:border-box;
圆角属性 border-radius
和边框没有关系
border-radius:50px;数值属性左上 右上 左下 右下
border-top-left-radius:50px;左上角
border-radius:200px/50px;反斜杠前为横轴数值 反斜杠后为纵轴数值可设置百分数
盒子阴影 box-shadow (可设置多个阴影)
box-shabow:1px 1px 2px 0 #f60; x轴 Y轴 模糊度 阴影缩放 颜色
后方可以写inset:内阴影 默认是outset:外阴影
阴影缩放(不能写百分比): 以元素的本身大小为影子大小的基本值 ,然后对影子的宽高进行设置
渐变色
渐变色属于背景图片
线性渐变 linear-gradient
background:linear-gradient(to bottom right,red ,blue);
background:linear-gradient(0deg,red 50%,blue 50%); 0deg时是颜色是从下往上
径向渐变 radial-gradient
background:radial-gradient(red 0%,blue 100%);
重复线性渐变色 repeating-linear
background:repeating-linear-gradient(45deg,black 0,black 15px,red 15px,red 30px); 类似于横格本
重复径向渐变 repeating-radial
background:repeating-radial-gradient(red 0%,blue 100%);类似于靶子
浮动样式 float
左浮动 float:left;
右浮动 float:right;
清除浮动 clear
左边不能有浮动元素在上方
clear:left;
右边不能有浮顶元素在上方
clear:right;
两边都不能有浮动元素在上方
clear:both;
定位 position
绝对定位 position:absolute;
设置了绝对定位的元素会原地往上飘
后飘起来的元素飘得更高
相对定位 position:relative;
给绝对定位建立一个坐标系
给谁设置相对定位坐标原点就在谁的左上角(padding左上角边框之下)
固定定位 position:fixed;
坐标系自动锁死在浏览器窗口,坐标原点为浏览器窗口左上角定点
改变层级 z-index:0;
默认层级是后飘起来的元素最高
z-index:1;谁数字大谁在上方
鼠标样式cursor:pointer;小手
伪元素
鼠标悬浮 hover
当鼠标放在:hover左侧选择器选中的元素是,整个选择器代码才会生效
hover右侧的选择器只能是选择兄弟元素或是子元素(包括兄弟元素的子元素)
修饰没有点击过的链接 link
修饰已经点击过的链接 visited
鼠标悬浮 hover
修饰点击时的链接样式 active
鼠标点击 (只能是按钮或选项) checked
点击获取焦点 focus
伪类:disabled–禁选的
:enabled–在input没有失效时(没有禁选)
在什么之后 after
添加到元素内容的后面
在什么之前 before
添加到元素内容的前面
表单元素
划分出一个表单区域 form
avtion:服务器地址
method:传输数据采用的方式get,post(采用这个相对安全)
表单分组: fieldset
分组的标题:legend
表单元素 input
文本框里的占位符 placeholder=“占位符”
展示输入框: type=“text”
选中后有一个默认的蓝色边框用style里的样式去掉
style"outline:none;"
邮箱: type=“email”
密码输入 type=“password”
数字输入 type=“number” 步长: step=“10” 最大值 :max=“10” 最小值: min=“0” 默认值: value=“0”
数字滑块 type=“range” 同上
日期 type=“date” 保留月 type=“month” 保留周 type=“weeek” 日期和时间 type=“datetime-local”
时间 type=“time”
颜色输入 type=“color”
文件输入 type=“file” 后方加上 multiple 为多文件输入
模拟按钮 type=“button” 按钮里的文字value=""
提交按钮 type=“submit”
重置按钮 type=“reset”
单选按钮 type=“radio” name="" value=“该按钮给服务器的数据值”
多选按钮 type=“checkbox” name="" value=""
扩大选中区域 label
for里的属性对应input里id的属性
下拉选项 select
列表的具体选项 option value=“向服务器发送的数据值” 后面跟selected为默认值
下拉选项分组 optgroup lable=“组名”
文本输入区域 textarea rows=“有多少行” cols=“有多少列”
css样式:resize:
none–不能拉动
vertical–垂直能拉动
horizontal–水平方向能拉动
both
表格元素
创建一个表格内容: table
单元格之间的间距: cellspacing
单元格"边框"和内容之间的间距: cellpadding
在网页中创建表格中的一行: tr
在网页中创建表格中的一列: td(在行里)
表格中的表头: th
创造表格的名字: caption
可以用caption-side样式改变位置
表格区域划分
表头区域: thead
表身区域: tbody
表脚区域: tfoot
表格名字: caption
合并行: rowspan 向下合并
合并列: colspan 像右合并
表格的边框样式设计
边框分隔: border-collapse collapse与外框合在一起, separate分开(默认值)
边框间距: border-spacing
动画样式
触发式动画:transition
综合样式transition:属性名 过渡时间 过度动画时间函数 动画延迟时间(建议延迟单独写)
动画时间: transition-duration
动画延迟: transitinon-delay
动画时间函数: transition-timing-function:cubic-bezier() 贝塞尔曲线
默认ease
匀速linear
慢进快出ease-in
快进慢出ease-out
慢进中快慢出ease-in-out
动画属性既让什么属性变化: transition-property
主动式动画:@keyframes 动画名
主动式动画激活: animation 动画名
执行时间: animation-duration
时间函数: animation-timing-function
时间延迟: animation-delay 可以写负值
动画播放次数: animation-iteration-count:infinite(无限次)
播放动画正反方向: animation-direction
默认是normal
奇正偶反alternate
反向播放reverse
奇反偶正alternate-reverse
播放完后的状态: animation-fill-mode
默认: backwards
结束后保留最后一帧状态: forwards
动画0%>最后一帧: both
动画运行状态: animation-play-state
动画暂停: paused
动画运行: running
变化样式: transform 所有样式不影响布局
位移: translate(偏移量1,偏移量2);
旋转: rotate(角度值) 注:写综合样式时建议写最后面
缩放: scale(倍数1,倍数2); x/y
倾斜: skew(角度1,角度2);
变化原点: transform-origin
3D动画(添加Z轴)
使元素3D化transform-style:preserve-3d;
让整个元素发生3D旋转
景深效果设置 Z轴:perspective:1000px;(给父元素设置)
使元素拥有3D效果
设置Z轴位置perspective-origin
滤镜属性: filter(相当于美颜)
亮度倍数: filter:brightness(倍数);
倍数大于1时元素会变亮, 小于1元素变暗
对比度: filter:contrast(百分比);
一个区域里面每个颜色都变得格外显眼,颜色更鲜艳
模糊: filter:blur(模糊半径:像素值);
给图像设置高斯模糊 值越大越模糊
色调
灰色色阶 filter:grayscale(百分数);
褐色色阶 filter:sepia(百分数);
弹性盒模型 display:flex
弹性盒模型的主轴方向: flex-direction
默认主轴横向 从左到右 row
主轴横向 从右到左 row-reverse
主轴纵向 从上到下 column
主轴纵向 从下到上 column-reverse
弹性盒模型换行: flex-wrap
默认:不换行 如果子元素的总宽大于父元素子元素的宽度被重置
换行:wrap 如果子元素的总宽度大于父元素, 超出的子元素到下一行显示
主轴的方向如何排布:justify-content
左对齐(默认值): flex-start
右对齐: flex-end
居中: center
两端对齐: space-between
项目之间的间隔都相等
两端对齐的间隙公式:(父元素宽度 - 子元素宽度之和)除以子元素个数减一
中间大两端窄: space-around
每个项目两侧间隔相等
子元素与父元素间隙公式: (父元素宽度 - 子元素宽度之和)除以子元素个数*2
交叉轴方向如何排布: align-items
交叉轴起点对齐: flex-start
交叉轴终点对齐: flex-end
交叉轴的中点对齐: center
项目的第一行文字基线对齐: daseline
默认值 如果没有设置高度则占满父元素: streth
占满元素的高度: auto
交叉轴换行后如何排布: align-content
每行将会伸展占用剩余空间: streth
元素中心: center
容器的开头: flex-start
容器的结尾: flex-end
每行平均分布: space-between
每行平均分布两端保留子元素与子元素之间的一半: space-around
弹性盒子内子元素的大小属性
综合属性: flex:flex-grow ,flex-shrink ,flex-basis
增长因子: flex-grow (默认为0)
只能在子元素宽度之和小于父元素时设置根据公式
元素一的实际=元素一的宽度+(父元素宽度 减 子元素宽度之和)* (元素一的增长因子除以增长因子之和)
缩放因子: flex-shrink (默认为一)
只能在子元素宽度之和大于父元素时设置 根据公式
元素一的实际=元素一的宽度+(子元素宽度之和 减 父元素宽度)* (元素一的缩放因子除以缩放因子之和)
定义元素的宽度: flex-basis
用长度定义宽度:length 不允许负值
用百分比定义宽度: percentage 不予许负值
auto
基于内容自动计算宽度: content
子元素前后顺序: order 可以为负值
定义项目的排布顺序数值越小越靠前