CSS笔记

overflow:hidden溢出隐藏（超出wh的隐藏）
display:block不在一行但可设置
display:inline-block行内元素
background-repeat:no-repeat不重复背景

border-radius圆角。与h一样，（圆与设计师设计效果一样）

line-height行高，与h一样，（字在中间）

float:left 向左浮动，不占据空间，left right none inherit（规定应该从父元素继承float属性值）

有浮动包裹不住overflow:hidden

清浮动clean:both both left right none (表示框的哪边不应该挨着浮动框)

字体最小12，浏览器默认

事件，样式 hover滑过的样式 选中情况下写样式

命名规范：表格可使用百分比划分width

flex属性
用于设置或检索弹性盒模型对象的子元素如何分配空间，它是以下三个属性的简写属性。
flex-grow 一个数字，规定项目奖相对于其他灵活的项目进行扩展的量。
flex-shrink 一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
flex-basis 项目的长度。

display:flex; 布局方式（弹性布局）用来为盒状模型提供最大的灵活性。
设置该属性后，子元素的float，clear，vertical-align,将失效

flex:1; 让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容。

:after选择器 在被选元素的后面插入内容

content: ‘’;内容为空

z-index:999;设置元素的堆叠顺序，拥有高的堆叠顺序的元素总是会处于堆叠低的元素前

min-width设置元素的最小宽度

min-height设置元素的最小高度

text-align:justify;文本两边对齐效果 前提基础::after (width:100%;display:inline-block;content:’’😉

text-overflow规定当文本溢出包含元素时发生的事情

text-overflow:ellipsis;多行文本溢出显示省略号
clip修剪文本；string使用给定的字符串来代表被修剪的文本

box-sizing:border-box;设置元素为盒子模型，与width相关。写此后，设置的边框、内边距

:nth-child(2n)为第2n个值设置样式

white-space:nowrap;设置如何处理元素内的空白，nowrap（默认）空白会被浏览器忽略

box-shadow向框添加一个或多个阴影
box-shadow:h-shadow;必需，水平阴影的位置，可负值
v-shadow;垂直阴影的位置 blur;模糊距离 spread;阴影尺寸 color;阴影颜色 inset;将外部阴影outset改为内部阴影；

为元素的属性设置样式：如
重新设置样式书写=>在元素后+::input-placeholder

组件属性设置样式：placeholder-class=‘命名’
opacity透明图片

常用：
background-color背景色
font-family字体样式
color字体颜色
font-size字体大小
text-align文本对齐方式
float:left/right 左浮动/右浮动
border边框

背景属性
属性 描述
background 复合属性。设置对象的背景特性。
background-attachment 设置或检索背景图像是随对象内容滚动还是固定的。必须先指定background-image属性。
background-color 设置或检索对象的背景颜色。
background-image 设置或检索对象的背景图像。
background-position 设置或检索对象的背景图像位置。必须先指定background-image属性。
background-repeat 设置或检索对象的背景图像如何铺排填充。必须先指定background-image属性。
3.background-clip 指定对象的背景图像向外裁剪的区域。
3.background-origin S设置或检索对象的背景图像计算background-position时的参考原点(位置)。
3.background-size 检索或设置对象的背景图像的尺寸大小。

动画属性
属性 描述
3.@keyframes 定义一个动画,@keyframes定义的动画名称用来被animation-name所使用。
3.animation 复合属性。检索或设置对象所应用的动画特效。
3.animation-name 检索或设置对象所应用的动画名称 ,必须与规则@keyframes配合使用，因为动画名称由@keyframes定义
3.animation-duration 检索或设置对象动画的持续时间
3.animation-timing-function 检索或设置对象动画的过渡类型
3.animation-delay 检索或设置对象动画的延迟时间
3.animation-iteration-count 检索或设置对象动画的循环次数
3.animation-direction 检索或设置对象动画在循环中是否反向运动
3.animation-play-state 检索或设置对象动画的状态

边框(Border) 和 轮廓(Outline) 属性
属性 描述
border 复合属性。设置对象边框的特性。
border-bottom 复合属性。设置对象底部边框的特性。
border-bottom-color 设置或检索对象的底部边框颜色。
border-bottom-style 设置或检索对象的底部边框样式。
border-bottom-width 设置或检索对象的底部边框宽度。
border-color 置或检索对象的边框颜色。
border-left 复合属性。设置对象左边边框的特性。
border-left-color 设置或检索对象的左边边框颜色。
border-left-style 设置或检索对象的左边边框样式。
border-left-width 设置或检索对象的左边边框宽度。
border-right 复合属性。设置对象右边边框的特性。
border-right-color 设置或检索对象的右边边框颜色。
border-right-style 设置或检索对象的右边边框样式。
border-right-width 设置或检索对象的右边边框宽度。
border-style 设置或检索对象的边框样式。
border-top 复合属性。设置对象顶部边框的特性。
border-top-color 设置或检索对象的顶部边框颜色
border-top-style 设置或检索对象的顶部边框样式。
border-top-width 设置或检索对象的顶部边框