/deep/
仅仅只在Vue
里生效
<style>
/deep/.impouLi{
/**/
}
.demo{
color:#000 !important;
}
style>
会直接穿透所有子元素的样式
background:image repape attachment position/size,color
background-color:#000;
background-color:rgb(255,255,255);
background-color:rgba(255,0,0,0.5)
a为透明
(继承父元素的颜色看起来像透明)
background-image:url('图片地址');
background-repeat:repeat;
(repeat默认重复 no-repeat不平铺 可以设置x y方向)
写法一 background-repeat-x:repeat;
写法二 background-repeat:repeat-y;
background-size:cover;
(大小可以写宽高,百分比关键字和auto)
cover
:图片等比例缩小或放大到刚好覆盖内容超出的隐藏
contain
:图片等比例缩小或放大直到有一条边碰到边框就停止
background-origin:padding-box;
默认
content-box;
内容区左上角
border-box;
边框左上角
background-cilp:border-box;
默认
padding-box;图片紧紧贴着边框
content-box;只显示内容部分背景颜色也减掉了
background-attachment:scroll;
默认不跟随内容滚动
fixed;
图片跟浏览器窗口
local;
图片会跟内容走
position
background-position:x y;
相对于基点水平平移
百分比(百分比基数 元素 宽/高 度 -图片 宽/高 度)
关键字left,right,bottom,top,center
居中
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:none; circle
空心圆 square
正方形
user-select: none;
text-transform:uppercase;
overflow:hidden;
超出隐藏
white-space:nowrap;
文本不换行
text-overflow:ellipsis;
超出显示省略号
color:#fff;
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:underline;下划线
文本上划线text-decoration:overline;
文本贯穿线text-decoration:line-through;
text-align:center;(水平居中)
左对齐 text-align:left;
右对齐 text-align:right;
两端对齐 text-align:justify;(不等于水平居中)
块元素的宽width:100px;
块元素的高height:100px;
text-shadow: 2px 6px 1px red;
X轴偏移量 Y轴偏移量 透明度(不可以为负值) 颜色
margin:20px 10px 20px 10px;(上 右 下 左)
margin-top:20px;
margin:20px auto;(上下 左右auto居中)
margin:20px auto 0;(上 左右 下)
margin:20px;(上下左右)
padding(与margin相同)
vertical-align:baseline;(只能对行内或行内块元素)
baseline(使**元素的基线与父元素的基线对齐) 默认值
middle(使元素的中部与父元素的中线对齐)
top(使元素及其后代元素的顶部与整行的顶部对齐)
bottom(使元素及其后代元素的底部**与整行的底部对齐) | 数值:px; , em;px 正值往上偏移
display:block;
display:inline;
display:inline-block;
display:none; 浏览器都不会去渲染
box-sizing:content-box;
box-sizing:border-box;
和边框没有关系
border-radius:50px;数值属性左上 右上 左下 右下
border-top-left-radius:50px;左上角
border-radius:200px/50px;反斜杠前为横轴数值 反斜杠后为纵轴数值可设置百分数
box-shabow:1px 1px 2px 0 #f60; x轴 Y轴 模糊度 阴影缩放 颜色
后方可以写inset:内阴影 默认是outset:外阴影
阴影缩放(不能写百分比): 以元素的本身大小为影子大小的基本值 ,然后对影子的宽高进行设置
渐变色属于背景图片
background:linear-gradient(to bottom right,red ,blue);
background:linear-gradient(0deg,red 50%,blue 50%); 0deg时是颜色是从下往上
background:radial-gradient(red 0%,blue 100%);
background:repeating-linear-gradient(45deg,black 0,black 15px,red 15px,red 30px); 类似于横格本
background:repeating-radial-gradient(red 0%,blue 100%);类似于靶子
clear:left;
clear:right;
clear:both;
设置了绝对定位的元素会原地往上飘
后飘起来的元素飘得更高
给绝对定位建立一个坐标系
给谁设置相对定位坐标原点就在谁的左上角(padding左上角边框之下)
坐标系自动锁死在浏览器窗口,坐标原点为浏览器窗口左上角定点
默认层级是后飘起来的元素最高
z-index:1;谁数字大谁在上方
当鼠标放在:hover左侧选择器选中的元素是,整个选择器代码才会生效
hover右侧的选择器只能是选择兄弟元素或是子元素(包括兄弟元素的子元素)
伪类:disabled–禁选的
:enabled–在input没有失效时(没有禁选)
添加到元素内容的后面
添加到元素内容的前面
avtion:服务器地址
method:传输数据采用的方式get,post(采用这个相对安全)
选中后有一个默认的蓝色边框用style里的样式去掉
style"outline:none;"
for里的属性对应input里id的属性
css样式:resize:
none–不能拉动
vertical–垂直能拉动
horizontal–水平方向能拉动
both
可以用caption-side样式改变位置
默认是normal
奇正偶反alternate
反向播放reverse
奇反偶正alternate-reverse
默认: backwards
结束后保留最后一帧状态: forwards
动画0%>最后一帧: both
动画暂停: paused
动画运行: running
让整个元素发生3D旋转
使元素拥有3D效果
倍数大于1时元素会变亮, 小于1元素变暗
一个区域里面每个颜色都变得格外显眼,颜色更鲜艳
给图像设置高斯模糊 值越大越模糊
默认:不换行 如果子元素的总宽大于父元素子元素的宽度被重置
换行:wrap 如果子元素的总宽度大于父元素, 超出的子元素到下一行显示
justify-content
flex-start
flex-end
center
space-between
项目之间的间隔都相等
两端对齐的间隙公式:(父元素宽度 - 子元素宽度之和)除以子元素个数减一
space-around
每个项目两侧间隔相等
子元素与父元素间隙公式: (父元素宽度 - 子元素宽度之和)除以子元素个数*2
streth
center
flex-start
flex-end
space-between
只能在子元素宽度之和小于父元素时设置根据公式
元素一的实际=元素一的宽度+(父元素宽度 减 子元素宽度之和)* (元素一的增长因子除以增长因子之和)
只能在子元素宽度之和大于父元素时设置 根据公式
元素一的实际=元素一的宽度+(子元素宽度之和 减 父元素宽度)* (元素一的缩放因子除以缩放因子之和)
用长度定义宽度:length 不允许负值
用百分比定义宽度: percentage 不予许负值
auto
基于内容自动计算宽度: content
定义项目的排布顺序数值越小越靠前