css经验小结

作者:admin / 时间:3年前 (2017/07/02) / 分类:前端开发 / 阅读:790 / 评论:0

Relative
1.限制left/top/right/bottom定位(absolute);
2.限制z-index层级(限制内部层级,外部的relative说了算);
3.限制在overflow下的嚣张气焰(absolute);
4.相对自身定位;
5.无侵入,不影响其他元素的布局(保留了本身所在的空间);
6.left,right,top,bottom同时出现时,只有left和top起作用;
7.层级高于普通元素,用于改变自然的层叠顺序;
8.当子元素的z-index为auto时,父元素的z-index并不能限制层级;
9.relative最小化原则(独立限制absolute),滥用relative可能引发不可知的问题。

Absolute
1.absolute与float的兄弟关系(包裹性和破坏性);
2.独立的absolute可以摆脱overflow的限制;
3.脱离文档流与位置跟随;
4.无依赖的绝对定位,图标覆盖左(右)上角的实例;
5.使用text-align和absolute配合&nbsp实现居中或右对齐;
6.后来居上的层叠准则;
7.left:0,top:0,right:0,bottom:0之爆裂拉伸;
8.距离右侧X像素的中间自适应布局和百分比高度自适应;
9.相互合作性,在同一级别的css中,实际宽度以width为准,当margin:auto出现时会有绝对定位的绝对居中效果;
10.兼容性好,自适应强,扩展性好,性能优异,方便实现诸多效果,适合移动端,PC端同样精彩。

Z-index
1.支持负值和css3 animation动画;
2.只对非static定位起作用(有点类似absolute);
3.定位元素的z-index遵循后来居上和哪个大哪个上(没有嵌套情况);
4.如果发生嵌套,则遵循祖先优先原则(z-index值为数值而不是auto);
5.从层叠顺序上讲,z-index:auto可以看成z-index:0,但从层叠上下文来讲,两者却有本质区别,z-index:auto不会创建层叠上下文而z-index可以创建;
6.层叠等级:层叠上下文(background/border),负z-index,block块水平盒子,float浮动盒子,inline/inline-block水平盒子,z-index:auto或z-index:0,正z-index,(装饰,布局,内容);
7.display:flex配合子元素正z-index会创建层叠上下文;
8.不犯二准则:非浮层元素,避免设置z-index值,没有任何道理需要超过2。

Float
1.历史来源:设计成像word那样文字环绕效果;
2.包裹性(子元素的空间变得紧实)和破坏性(会让父元素高度塌陷);
3.清除浮动:.clearfix:after{content:"";display:block;height:0;overflow:hidden;clear:both;} .clearfix{*zoom:1} ;
4.元素block块状化(砖头化)和破坏性造成的紧密排列特性(去空格化);
5.自适应布局;
6.IE7兼容性问题。

Margin
1.一侧定宽的自适应布局;
2.支持负值;
3.滚动容器上下留白;
4.普通元素的百分比margin都是相对容器的宽度计算的(尤其是上下的百分比);
5.绝对定位元素的百分比margin是相对于第一个定位祖先元素(relative/absolute/fixed)的宽度计算的;
6.margin重叠通常特性:block水平元素(不包括float和absolute),不考虑writing-mode,只发生在垂直方向(margin-top/margin-bottom);
7.margin重叠的三种情况:1.相邻兄弟元素重叠(1+1=1),2.父子元素margin重叠,3.空block元素margin重叠;(元素没有border,padding,inline元素和高度设置)
8.margin重叠的计算规则:正正取大值,正负值相加,负负最负值;
9.margin:auto是为了分配剩余空间的大小,剩余空间不能为负值,常规模式下无法实现垂直居中;
10.absolute与margin居中(天使羽翼加高宽值和margin实现垂直水平居中);
11.display:table-cell和table-row等情形无效;
12.绝对定位元素非定位方位的margin值“无效”;
13.margin相对于整个容器而言的,浮动会占据位置,但不影响margin,导致鞭长莫及;
14.margin无法使内联元素脱离容器;

Overflow
1.overflow:visible/hidden/auto/scroll;
2.无论什么浏览器,默认滚动条均来自<html>!而不是<body>标签;
3.overflow与BFC:清除浮动影响,避免margin穿透问题,两栏自适应;
4.绝对定位元素不总是被父级overflow属性剪裁,尤其当overflow在绝对定位元素及其包含块之间的时候(overflow元素或子元素为relative时失效);
5.resize:both;overflow:hidden;创建可拖拽的div;
6.text-overflow:ellipsis;overflow:hidden;文字溢出...效果;
7.锚点定位与overflow选项卡技术;
        
        
Border
1.不支持百分比单位;
2.borde-width:thin(1px)/medium(3px)/thick(5px);
3.border-color会继承color的值;
4.background-position默认相对于左上方定位;
5.制作三角形{width:0;height:0;border-style:solid;border-color:red transparent transparent transparent;}


Padding
1.padding为一个值的时候只影响左右的距离不影响上下的(inline水平);
2.padding百分比相对于宽度而定;

对语义化的理解:
   去掉或丢失样式的时候可以清晰地呈现页面结构;
    有利于seo;
    有利于团队合作,语义化更具可读性;
    方便其他设备的解析
     
清除浮动的四种方法:
   设置父元素的高度
    添加一个空标签,并设置空标签样式 clear:both
    给父元素添加样式 overflow:hidden
    给最后一个浮动元素添加伪元素::after{content:"";height:0;clear:both;zoom:1;display:table}
   
渐变:background:-moz-linear-gradient{lef, #effbfb 10%, #fhkocs 68%}  //线性渐变
    background:-moz-radial-gradient(red 20%, yellow 50%, blue 80%)  //径向渐变
    background: conic-gradient(red, orange, yellow, green, teal, blue, purple);  // 圆锥渐变:


当满足以下任何一条件都会触发BFC:
  1.浮动;2.absolute或fixed;3.overflow不为visible;4.display为以下任一值:inline-block/table-cells/table-caption

得到div的height值:
div.offsetHeight(带滚动条的完整高度)
div.clientHeight(内容的高度)

重新加载页面:window.location.reload()

重绘和回流:
  当渲染树中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建,就称之为回流,每个页面至少经过一次回流,就是在第一次加载的时候
   当渲染树中的一部分元素需要更改属性,而这些属性只会更改元素的外观和风格,不会影响布局,比如background,就叫重绘
   
伪类:  :hover    伪元素: ::before
 
placeholder颜色值:
input::-webkit-input-placeholder{color:#90ee90}
input:focus::-webkit-input-placeholder{color:#87ceeb}

href:跳转到外部资源,比如超链接,css样式链接
src:引入资源到页面,如script,图片img,会影响进程的进行

强制使用IE最先进的内核渲染页面:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

文本溢出以...显示:display:block;width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;

a:link; a:visited; a:hover; a:active;
把鼠标移到按钮并点击时产生一串事件分别是:hover,focus,active

内容水平居中的方式:
1.inline:text-align:center;
2.block:margin:0 auto;  
3.left:50%;margin-left:-内容一半的宽度;
4.left:50%;transform:translateX(-50%);
5.position:absolute;left:0;right:0;top:0;bottom:0;margin:0 auto;
6.display:flex;justify-content:center;


没有评论,留下你的印记,证明你来过。


发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。