u014378108的博客

animation- 要写在要作用的元素上，不能写在动画定义里。

transition-property: 设置哪些属性要发生变换不是所有的属性都能过渡，值为数字，或者值能转为数字的属性，都支持过渡，否则不支持过渡。常见的支持过渡的属性有：颜色、长度值、百分比、z-index 、opacity 、2D 变换属性、3D 变换属性、阴影。不使用过度的话，就会闪的一下变到hover设置的样式。

方法2-1：left:50%;方法2-2：left:50%;transform:translate()方法1：left,right,top,bottom:0;

子元素absolute,left:50%,top:50% 没有居中。使用移动，子元素左移动自身的50%，子元素上移动自身的50%子元素margin-left: 负的 自身宽度的一半。子元素margin-top:负的 自身高度的一半。即 translate(50%,50%)移位：translate。父元素relative。相对于原来的位置移动。

【代码】flex 小案例。

【代码】calc()

order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。默认值为 auto ，表示继承父元素的 align-items 属性。通过align-self 属性，可以单独调整某个伸缩项目的对齐方式。

flex-basis 设置的是主轴方向的基准长度，会让宽度或高度失效。备注：主轴横向：宽度失效；主轴纵向：高度失效作用：浏览器根据这个属性设置的值，计算主轴上是否有多余空间，默认值auto ，即：伸缩项目的宽或高。设置了flex-basis:80px;沿主轴方向的宽（主轴方向：row 或row-reverse）或主轴方向的高（主轴方向：column 或 column-reverse) 会变成80px，原先设置的宽或高无效。

垂直：marign-top: ( 父元素高度-子元素高度）/2 px 可能会出现margin-top塌陷问题，需要父元素添加overflow:hidden,或padd>0 或border>0。垂直：父元素添加line-height=height ,每个元素加上vertical-align:middle。如果要绝对居中，设置父元素的font-size:0,再设置子元素的font-size:0。水平：在父元素添加text-align:center,对于行内元素或块元素。

display:flex 设置盒子为伸缩容器盒子里的子（）元素（块元素，行内，行内块）都变成，一旦成为了伸缩项目，全都会“块状化”默认主轴flex-direction:主轴方向flex-wrap:主轴换行flex-flow:flex-direction flex wrap 复合属性主轴对齐：justify-content侧轴对齐：单行：align-items多行：align-content。

normal 文本超出边界自动换行，文本中的换行被浏览器识别为一个空格。与box-shadow的区别是box-shadow没有spread。注意：要使得 text-overflow 属性生效，为非 visiblem，如hidden,auto。在pre 效果的基础上，超出元素边界自动换行。在pre 效果的基础上，超出元素边界自动换行，原样输出，与pre 标签的效果相同。(与pre-wrap的区别)文本换行 white-space。且只识别文本中的换行，空格。文本内容溢出时的呈现模式。no-wrap：不换行。

四个角可单独设置圆角。

等比例缩放,直到完全覆盖容器.图片会尽可能全的显示在元素上，但要。image默认从padding开始显示，50%表示(padding+contenet)的50%背景图片包含在容器内，但要注意：可能会造成容器里部分区域没有背景图片。contain:等比例缩放，图片全部显示，容器可能出现没背景的区域。，使背景图片的宽或高，与容器的宽或高相等，再将完整。cover:等比例缩放,让图片覆盖容器。

backgruond-clip

1. padding-box ：从padding 区域开始显示背景图像。背景repeat的效果。从padding开始显示，border是repeat填充的。3. content-box ： 从content 区域开始显示背景图像。2. border-box ： 从border 区域开始显示背景图像。content-box ： 从content 区域开始显示背景图像。border-box ： 从border 区域开始显示背景图像。默认从padding开始显示。作用：设置背景图的原点。

rgba 是颜色的设置方式，用于设置颜色，它的透明度，仅仅是调整颜色的透明度。rgba 是颜色的设置方式，用于设置颜色，它的透明度，仅仅是调整颜色的透明度。opacity 是一个属性，设置的是整个元素（包括元素里的内容）的不透明度。

blue:8px 与上图 spread:3px blue5px 对比。spread:5px,在box的大小上往四周延申5px铺在box背后。h-shadow 水平阴影的位置，必须填写，可以为负值。v-shadow 垂直阴影的位置，必须填写，可以为负值。inset blur 调大 中间圆形效果。inset 可选，将外部阴影改为内部阴影。蓝色块躲在灰色块后面。blur:5px;spread 可选，阴影的外延值。color 可选，阴影的颜色。blur 可选，模糊距离。水平方向移动115px。

border-box width,height设置的是盒子的宽高，content区域自动缩小。content-box 默认模式，width,height 设置的是 content区的宽高。

item 下的第一个子孙，且这个子孙是dl ,在这个元素下的dt color:red。所有item下的 第一个孩子且是ul，下 的 第一个孩子且是li 的背景色。=========firth-child nth-child 结合。鼠标移动到li的时候，显示该hover元素下的 .sec-memu。ul 下的第一个孩子且是li元素 下的a。=========上面的demo 调整样式。对比，ul 的第一个孩子不是li元素。ul 下的 第一个孩子&li。2n+1 2n-1 奇数。