本文共 4099 字,大约阅读时间需要 13 分钟。
来自 | 《css世界》一书
主要为子元素浮动(float)之后,父元素无法撑起高度和宽度。
但是要注意,当p的内容为英文单词组成的时候,如果单词过长,而不是“ pppppppppppppppppppppppppppppp”这样的一次,会被视为一个单位而造成超过div的尺寸。
如果你想要英文字符也有中文字符的效果的话,在p使用“ word-break:break-all”。
目的在于制造一个凹或凸的形状,利用了“ 2”中英文单词不换行的特性
相信这点大部分人都知道,但是有一些奇怪的行为,比如说width <content + padding会怎样?实际上当padding + border> width时,元素的渲染大小(Chrome下)为padding + border;而padding + border <width时,允许剩余空间分配给content。
缺点是,如果高度太大会造成展开过快和重复中断,那么这个足够大的值应该适当。
需要注意的是,图片显示完成后,img会成为“替换元素”,而替换元素是无法设置伪元素的,因为内容被图片替换掉了;还需要注意attr里面的变量不能加双引号。
需要注意的是,如果快捷保存图片,保存的是src内的图片,而不是替换之后的。
用h1的原因主要是因为seo,语义化的问题。
Weismann's blog
需要注意的是,第一个i不能换行,换行后会产生后移的结果。
在IE6-IE9下是...,其他都是动态的;使用点的目的是语义化和低版本浏览器的兼容。
正在加载中...
第一种主要利用了内联元素的填充只会影响外观和不影响布局的特点;第二种针对其他属性会改变背景图定位的一种方式。
demo
利用保证金来改变尺寸,需要注意,改变尺寸的元素水平方向的尺寸不能是确定的。
如果使用padding留白,在Firefox和IE不会显示。
注意container高度不能是确定值,缺点是如果在内部使用锚点定位会出现问题。
正方观点
观点1
观点1
反方观点
观点1
自动值对于保证金是占用剩余的空间。
demo
此技巧主要说明border的颜色默认是继承自color的。
和增加点击区域第二种方式一样
缺点是边框不支持百分比,最多2-3栏。
1234
而为什么说“近似”,一句话说清楚,请看开头
基于行高实现的...
产生的问题和“幽灵空白子系统”和x-height有关,你可以尝试在img前加入x字符观察一下。
ex代表的是x-height的高度,根据x字形的不同(如font-family)而不同。
拉拉
文字
特点是内容和浏览器尺寸变化都是自动变换大小和位置,可以通过伪元素的高度控制上下位置。
demo
float的真正用途。
demo,demo,demo,demo,demo,demo,demo
实际上overflow:hidden是可以滚动的,可以通过锚点,focus,scrollTop滚动。滚动条的实现请自行发挥。
与锚点不同的是不会触发由内到外(多层滚动造成的某种事件冒泡的效果)的页面跳动(元素上边与分段上边对齐),还支持Tab选项的效果;缺点是需要js支持效果。
1234
拉拉
在一个元素上如果单用(父元素的位置属性均是替换)“ position:absolute”,事实上元素将原地不动,最终会产生BFC。
邮箱格式不准确(示意)...
利用text-align和fixed的组合;高度放置0和overflow隐藏目的是为了不影响主体的体验,而之所以绝对定位元素没有被隐藏的原因是“如果overflow不是定位元素,同时绝对定位元素和overflow容器同时也没有定位元素,则溢出无法对绝对定位元素进行剪裁。” —《 CSS世界》。
利用top和bottom或left和right同时设置的时候会触发流体特性的特点;与通过“ top:0; left:0; width:100%; height:100%;”,在设置边距,边框, padding的时候不会溢出到合并的外面(就算你想到box-sizing,那margin呢?);而之所以用span的原因是想说明绝对定位放置元素的显示置为块。
主要利用“位置:相对;z-index:0;”创建并合并到z-index的负值将阴影放置在“ contaniner”和“ page”之间。
你可以尝试将关键CSS去掉查看效果。
demo
demo
说这个主要是为了说明,Chrome浏览器如果字体设置12px以下的大小(新版本已经不限制了),会被自动处理成12px,但是有一个值除外,0。
因为是内联元素,所以完全不用担心会影响元素高度的问题。
特点是可以让html结构活跃干净。
¥399
后续可通过script.innerHTML访问。
主要利用轮廓。
需要注意IE只支持cur文件。
兼容到IE7;此应用涉及到一体的东西,所有水平流的特性都可以应用到垂直流中(称为水平居中变成了垂直居中)。
推荐阅读
本文完〜
转载地址:http://cnbpi.baihongyu.com/