1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3.文字系列(font, line-height, letter-spacing, color- text-align等)4.背景(background, border等)5.其他(animation, transition等)//代表当前所有的标签 通配符(兼容任何浏览器打开页面内容的边距都为0)。目前最常用的是Normalize.css ,它是一个可定制的 CSS 文件,使浏览器呈现的所有元素,更一致和符合现代标准。它正是针对只需要统一的元素样式,依赖于研究浏览器默认元素风格之间的差异,精确定位需要重置的样式。
-ms-(私有属性);//IE-moz-(私有属性);//Firefox-webkit-(私有属性);//Safari 和 Chrome-o-(私有属性);// Opera如:-moz-column-count:4;(分成4块显示) // Firefox盒子3D模型(由外到内):border(边框)>content-padding(内边距)>background-image(背景图像)>background-color(背景颜色)>margin(外边距)盒子尺寸大小 = 边框+外边距+内边距+盒子里的内容大小稳定性最好的就是盒子本身的高度和宽度了,我们优先考虑这个。 因此,很多情况下,我们会考虑利用高度剩余法,宽度剩余法来做,而不是padding和margin。其次,我们才考虑padding ,因为padding也可以看做特殊的盒子高度和宽度,最后我们再用margin来做。因为margin会有边距合并的问题。CSS十问(刨根问底):http://www.cnblogs.com/dongtianee/p/4563084.html属性笔记:替换元素就是指浏览器是根据元素的某个属性的值来判断具体要显示的内容的元素,比如img标签,浏览器是根据其src的属性值来读取这个元素所包含的内容的;浏览器会根据 input 中的 type 的属性值来判断到底应该显示单选按钮还是多选按钮亦或是文本输入框。margin-top和margin-bottom这两个属性对非替换行内元素没有效果,比如a和span,注意这里是非替换行内元素而不单单是非替换元素或者是行内元素。比如 img 就是一个行内元素,margin-top和margin-bottom对它是有效果的,因为它是一个替换元素而不是非替换元素。对于padding-top和padding-bottom对行内元素没有效果这种说法是不对的,因为它们只是对于没有设置背景色或边框的行内非替换元素效果不可见而已,而对于行内替换元素来说,不管是否设置了背景色还是边框都是有效果了,并且会把父元素撑开。用padding-top和padding-bottom对inline-block的元素设置上下内边距而无需对其设置背景色或边框,并且能把父元素撑开。序列号成层级关系:http://www.Vevb.com.cn/cssref/PR_gen_counter-increment.asp垂直居中最常用的方法:父元素设置display: table;子元素设置display: table-cell;vertical-align: middle;则子元素容器里面的内容垂直居中。1em=16px;//ie无法调整px作为单位的网页字体大小,em具有继承性。(如果定义了body{font-size=12px;} #title{font-siez=2.6em;}而id=title恰好在body里面,那么id=title的字体大小就是2.6*16-12=29.6px)z-index:9;//并级的对象,此属性参数值越大,则被层叠在最上面(只有在定位的情况下才能设置),属性只能工作于那些被定义了position属性的元素中。 如果只有一个绝对定位元素自然不需要z-index;如果两个绝对定位元素,控制DOM流的前后顺序达到需要的覆盖效果,也不需要z-index;多个绝对定位元素则少见。那么如果非弹框类的绝对定位元素z-index>2,必定z-index冗余,需要优化。absolute完全脱离文档流,不占据任何空间,不影响整体布局和结构,和relative更没有任何依赖关系。absolute最好不要和父元素有依赖关系,防止整体变动时崩塌,使用absolute和margin定位能达到最佳效果,而且absolute具有跟随性,如果前一个元素是inline或者inline-block,那么就算是0空间它一样会跟随前一个元素的位置并排显示,还能自适应浏览器大小在当前位置显示不动。元素进行绝对定位后脱离文档流,其宽度是根据元素内容所占宽度来计算的,为这能让其视觉效果更好,最好给元素定义一个宽度值。float属性也是如此,其宽度是根据元素内容所占宽度来计算的。单行溢出文本显示省略号...的方法:white-space:nowrap; //文字一行显示 overflow:hidden; text-overflow:ellipsis; //超出的...显示(超出部分省略号显示)参考地址:http://jssl915.github.io/overflow/text-indent:-999px;overflow:hidden; (隐藏按钮文字的小技巧)块元素可以设置margin和padding值,行元素只能设置水平方向的padding和margin值。行内元素中间有空隙,产生原因:换行符、tab(制表符)、空格产生间隙。解决方法:1.元素写成一行(代码格式不规范,不建议使用) 2.设置父容器font-size:0;li中插入img图片间有空隙的解决方案: 父容器font-size:0或img{vertical-align:bottom/top;display:block;}高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用margin或padding时。解决方法:为父DIV添加overflow:hidden;需要给父div设置边框,当然可以设置边框为透明;为父DIV添加padding,或者至少添加padding-top;visibility隐藏后,仍然占据空间(效率高,不经常用)display隐藏后,不占据空间(效率低,经常用)display:block(块元素)/inline(行内元素)/inline-block(行内块元素);//由行元素转变为块元素为盒子添加contentEditable="true",盒子将变为可编辑的文本框。当值是0时,除了RGB颜色值0%必须跟百分号,其他情况后面可以不跟单位"px"。给img指定max-width:100%。这样的话,图片的最大宽度不会超过其原始宽度,而图片在小于原始宽度的情况下会按width: 100%的样子显示。对于img元素,还有个3像素bug,默认情况下图片下方会多出3px的边距,可以通过为img指定vertical-align的任意值或者是display:block来消除这3px,而一般使用vertical-align: middle不会破坏img默认是行内块的样式。
新闻热点
疑难解答