-
定位(position)
- relative :控件依旧占据文档流位置,但是显示的效果类似absolute,但是占据文档流位置 所以会影响后面元素的位置。
-
z-index
- 用于position非static的元素上,默认是0。
-
clip:rect(top,right,bottom,left)
-
四个值分别是剪裁出发点
clip示意图 - 图片从中心渐变打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .donuts{ width: 500px; height: 500px; position: absolute; clip:rect(0 500px 500px 0); background: black; color: white; margin: 100px ; transition: clip linear 2s; } </style> </head> <body> <img class="donuts" src="http://img.hb.aicdn.com/577bb1aed67d6a979b9ba46bf9e8491cb98a4f3f195a0-LPL1qm_fw658" alt=""> <img class="donuts" src="http://img.hb.aicdn.com/577bb1aed67d6a979b9ba46bf9e8491cb98a4f3f195a0-LPL1qm_fw658" alt=""> <img class="donuts" src="http://img.hb.aicdn.com/577bb1aed67d6a979b9ba46bf9e8491cb98a4f3f195a0-LPL1qm_fw658" alt=""> <img class="donuts" src="http://img.hb.aicdn.com/577bb1aed67d6a979b9ba46bf9e8491cb98a4f3f195a0-LPL1qm_fw658" alt=""> <script> setTimeout(function () { var list = document.querySelectorAll(".donuts"); list[0].style.clip = "rect(0 500px 0 0)"; list[1].style.clip = "rect(0 0 500px 0)"; list[2].style.clip = "rect(500px 500px 500px 0)"; list[3].style.clip = "rect(0 500px 500px 500px)"; },2000); </script> </body> </html>结果
淡出效果 -
-
vertical-align
- display:table-cell(单元格特性)的元素设置vertical-align:middle可以让内容(包括块级元素)垂直居中
- 内联元素(包括inline-block)设置vertical-align:middle可以使该元素在行内居中对齐。
- 注意,如果外层容器是块级元素如果设置了高度，则需要设置line-height和高度一样，如果没有设置高度，lineHeight则和容器内元素最高的那个一样高，再设置容器内的所有内联元素的vertical-align:middle就可以使他们都在行里居中对齐！
图片解析
没行高
有行高 -
块级元素垂直居中
- 设置父元素为display:table-cell;然后父元素设置vertical-align:middle;
-
缺点
多重容器嵌套时，高宽不能用百分比相对父级元素
-
缺点
- 设置父元素position:relative;子元素为绝对定位;然后用top:50%;transform:translateY(-50%)设置定位.
-
缺点
不占常规流
-
缺点
- 设置父元素position:relative;子元素为绝对定位;然后用top:0;bottom:0;margin:auto 0;设置定位
-
缺点
不占常规流
一定要设置子元素高度，不能让子元素来撑高度，因为不设置高度的话,浏览器会自动计算其高度
-
缺点
- 设置父元素为display:table-cell;然后父元素设置vertical-align:middle;
-
块级元素水平居中
- margin:0 auto;
块级元素绝对定位(水平、垂直)居中
// !!!父元素首先要设置非static的定位
position:absolute;left:0;right:0;margin:0 auto;//相对父元素水平居中
position:absolute;top:0;bottom:0;margin:auto 0;//相对父元素垂直居中
position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;//相对父元素水平垂直居中
// 浏览器会自动计算出绝对定位元素的margin值。
// 设置上下、左右为0的情况下如果元素没有设置高度或者宽度的话，浏览器会给元素计算宽高。
// 如果设置了高宽并且如果设置margin:auto的话，浏览器则会自动计算元素的margin值，如果没设置auto,则不计算margin值。
-
box-shadow,text-shadow,filter:drop-shadow
- box-shadow比text-shadow多的属性:外延,inset
- 默认第一个参数是右边阴影，第二个是西边阴影，负数相反
- drop-shadow参数和text-shadow是一样的,它的作用把显示出来的形状投影，所以是可以投影不规则图形。
[图片上传失败...(image-a60deb-1514149374837)]
-
float图文混排
- 图片浮动,文字不浮动，就会出现图文混排的效果。
[图片上传失败...(image-4e0135-1514149374837)] - 注意,文字默认的word-wrap是会撑开容器的，所以要设置该属性为break-word,遇到边框就会进行换行。
- 容器内部元素如果浮动的话，容器就不会被撑开，可以使用overflow:hidden，强行让容器计算高度，或者在浮动下方添加一个元素设置clear:both。清除当前行的浮动
- 图片浮动,文字不浮动，就会出现图文混排的效果。
-
background-position
- 表示图片从哪个点显示，默认是从左上角顶点开始显示
- 传两个数值，xx xx代表left xx top xx(距离左边和上边距离)然后定位到一个点，图片会从这个点开始显示下去
- 传四个值则,right xx bottom xx可以自己设置顶点位置，但是兼容性不好。
-
background-attachment
- fixed表示背景以浏览器作为参照物固定,上下滚动内容图片不跟随滚动
- 默认值是scroll 表示上下滚动时，背景随之滚动
-
background-clip
- 默认是border-box 表示背景从边框开始往外剪裁
- content-box 表示背景从内容开始往外剪(剪掉内外边距)
- padding-box 表示从内边距开始剪裁
-
white-space
- normal
遇到边框不换行合并空格 不合并换行 - pre
遇到边框不换行不合并空格 - nowrap
遇到边框不换行合并空格和换行 强制在一行内把所以内联内容显示完。 - pre-wrap
遇到边框换行不合并空格 - pre-line
遇到边框换行合并空格 不合并换行
- normal
-
选择器
- E~F 会命中E下面的所有F兄弟节点
- E+F 只会命中在E的下一个兄弟节点F
-
text-overflow (文字超出时的显示状态)
- 必须和white-space,overflow一起使用
- clip 默认 隐藏超出文字部分
- ellipsis 超出文字部分用省略号代替
- 必须和white-space,overflow一起使用
-
zoom
- 按数值比例缩放元素
-
cursor
- 鼠标移动到元素时的状态
-
box-sizing 盒模型的高宽属性组成模式
- content-box ”高宽属性“仅为内容高宽，不包括内边距边框
- border-box “高宽属性”包括内边距和边框的宽度
-
transform-origin 形变作用点
- 默认center center 中心点
- 可以任意调两个方向作为形变转换点 例:left bottom
-
transform
- rotate(xxdeg)绕着Z轴旋转 = rotateZ()
- rotateX(xxdeg)绕着X轴
- rotateY(xxdeg)绕着Y轴
-
perspective 透视距离
- 给父元素设置透视距离后，子元素的形变动画会变成3d的
-
媒体查询
- 设置某个条件状态下元素的状态
@media all and (min-width: 200px) and (max-width: 2500px){ .f{ background: gold; } } -
设置容器背景等比例缩放
-
圣杯布局等各种布局
