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 可以为负值

​ 定义项目的排布顺序数值越小越靠前

子元素在纵轴的顺序: align-self

auto:为父元素设置的align-items为准

flex-start: 纵轴的起始位置

flex-end: 纵轴的结束位置

center:居中位置

baseline: 基线对齐

stretch: 占满高度