本文共 4087 字,大约阅读时间需要 13 分钟。
目录
前言:以下技巧的具体原理和解释请支持张老师的《CSS世界》,在这里不做展开。
一部分没录入的技巧原因是部分属性将被标准废弃,如:clip。还有一部分是因为个人觉得兼容性不好,而且CSS3的一些特性可以弥补,比如text-align:justify;完全可以用flex布局实现。
主要用于子元素浮动(float)之后,父元素无法撑起高度和宽度。
因为div嵌套着p,所以p的尺寸并不会超过Div。但是要注意,当p的内容为英文单词组成的时候,如果单词过长,比如“pppppppppppppppppppppppp”这种甚至更长,会被现为一个单位而造成超出div的尺寸。
如果你想要英文字符也有中文字符的效果的话,在p使用“work-break:break-all”。
目的在于制造一个凹或者凸的形状,利用了“2”中英文单词不换行的特性。
相信这点大部分人都知道,但是有一些奇怪的行为,比如说width<content+padding会怎样?事实上当padding+border>width时,元素的渲染大小(Chrome)下为padding+border;而padding+border<width时,会将剩余空间分配给content。
缺点是,如果高度太大会造成展开过快和收回延迟,所以这个足够大的值尽量适当。
7.优雅的图片未加载或加载失败效果
需要注意的是,图片显示完毕后,img会成为“替换元素”,而替换元素是无法设置伪元素的,因为content内容被图片替换掉了;还需要注意attr里面的变量不能加双引号。
需要注意的是,如果右键保存图片,保存的是src内的图片,而不是替换之后的。
用h1的原因主要是因为SEO,语义化的问题。
Weisman's blog
需要注意的是,第一个i不能换行,换行后会产生后移的结果。
在IE6-IE9下是...,其他都是动态的;使用dot的目的是语义化和低版本游览器的兼容。
正在加载...
第一种主要利用了内联元素的padding只会影响外观和不影响布局的特点;第二种针对其他属性会改变背景图定位的一种方式。
demo
利用margin来改变尺寸,需要注意,改变尺寸的元素水平方向的尺寸不能是确定的。
如果使用padding留白,在Firefox和IE不会显示。
注意container高度不能是确定值,缺点是如果在内部使用锚点定位会出现问题。
正方观点
观点1
观点1
反方观点
观点1
auto值对于margin来讲是占用剩余的空间。
此技巧主要说明border的颜色默认是继承自color的。
和增加点击区第二种方式一样
缺点是border不支持百分比,最多2-3栏。
1234
至于为什么说“近似”,一句话说不清楚,请看开头。
<!--css-->
基于行高实现的...
产生的问题和“幽灵空白节点”和x-height有关,你可以尝试在img前加入x字符观察一下。
特点是文字大小的改变不会影响对齐。ex代表的是x-height的高度,根据x字形的不同(如font-family)而不同。
拉拉
文字
特点是内容和游览器尺寸变化都是自动变换大小和位置,可以通过伪元素的height控制上下位置。
demo
float的真正用途。
demo,demo,demo,demo,demo,demo,demo,demo
事实上overflow:hidden是可以滚动的,可以通过锚点focus、scroTop滚动。滚动条的实现请自行发挥。
与锚点不同的是不会触发由内到外(多层滚动造成的类似于事件冒泡的效果)的页面跳动(元素上边与窗体上边对齐),还支持Tab选项的效果;缺点是需要js支持选中效果。
1234
拉拉
一个元素上如果单用(父元素的position属性均是默认)“position:absolute”,事实上元素将原地不动,最终会产生BFC。
邮箱格式不准确(示意)...
32.主体页面侧边栏
利用text-align和fixed的组合;height置0和overflow隐藏目的是为了不影响主体的体验,而之所以绝对定位元素没有被隐藏的原因是“如果overflow不是定位元素,同时绝对定位元素和overflow容器之间也没有定位元素,则overflow无法对绝对定位元素进行剪裁。”——《CSS世界》。
利用top和bottom或left和right同时设置的时候回触发流体特性的特点;与通过“top:0;left:0;width:100%;height:100%;”相比,在设置margin、border、padding的时候,不会溢出到窗体的外面(就算你想到box-sizing,那margin呢?);而之所以用span的原因是想说明绝对定位会将元素的display置为block。
主要利用“position:relative;z-index:0;”创建层叠上下文与z-index的负值将阴影置于"container"和"page"之间。
你可以尝试将关键CSS去掉查看效果。
demo
demo
36.隐藏文字
说这个主要是为了说明,Chrome游览器如果字体设置12px以下的大小,会被自动处理成12px,但有一个值除外,0。
因为是内联元素,所以完全不用担心会影响元素高度的问题。
特点是可以让html结构显得干净
¥399
后续可通过script.innerHTML访问。
主要利用outline。
需要注意IE只支持cur文件。
兼容到IE7;此应用涉及较多东西,所有水平流的特性都可以应用到垂直流中(比如水平居中变成了垂直居中)。
参考博客:
转载地址:http://tlcnn.baihongyu.com/