练习知识回顾与整合-CSS

百分号基于父元素为基础

//width height:30%

隐藏多余的部分

//overflow:hidden

画线

//设置div boder-top/boder-buttom:1px solid red;padding:20px;把间距撑开

防止padding把边框撑开的办法

//box-sizing:border-box即整个盒子大小不变，padding改变的是内部大小改变/-mox 火狐/-wekit谷歌

绝对定位

//绝对定位父元素必须定位，否则以body定位

选择器注意点

//div>span直接子元素 ；h1，.uuu,#we{}群组选择；.card:first-child/nth-child()选取父元素第n个儿子

伪类选择器

//input:focus{}获得焦点，点击获得样式

使图片之间的间隙消失

//font-size:0;注意如果设在父元素上，子元素字体大小需要重新设置（图片被默认为字符所以有间距）

旋转

//transform：rotate（45edg）如果边框内部有字体把边框旋转后想要字体变正，需在在字体中添加div进行二度旋转。

图片层次感

// rgba(0,0,0,0.1)最后一项调整透明度

清除浮动

//.clearfix.after:{content:"";display:none;height:0;visibility:hideen;clear:both;}

块的隐藏

// display:none;visibility:hidden前者不占空间后者占空间

图片的定位位置的固定

//background-attachment:fixed;background-position:50% 50%;以中点占整个区域的50%

渐变效果

.task {transition:background 0.5s}

.task:hover{background:#ddd}

图片阴影

box-shadow:1px 1px 1px rgba(0,0,0,0.1)/white(水平，垂直，模糊程度，透明度或颜色)

变成"手"的样式

curser:pointer

完成后所添加的样式（同一类名）

.task.complete:after{}