摘要：一部分没录入的技巧原因是部分属性将被标准废弃，如。正确的滚动底部留白方式如果使用留白，在和不会显示。正方观点观点观点反方观点观点正确的块级元素右对齐值对于来讲是占用剩余的空间。
以下技巧的具体原理和解释请支持张老师的《CSS世界》，在这里不做展开。
一部分没录入的技巧原因是部分属性将被标准废弃，如：clip。还有一部分是因为个人觉得兼容性不好，而且CSS3的一些特性可以弥补，比如text-align:justify;，完全可以用flex布局实现。
应网友要求，加入部分配图，配图原则是因为防止代码量大而去掉的无用属性（如背景颜色）造成的一眼望去好像是没效果的技巧会加上一些配图，如果大家测试过程中遇到没有效果的现象，建议通过审查元素去查看以下元素的几何属性。还有一些是复制粘贴就可以得到的效果我就不截图了（想到可能读者懒的问题，我把格式写成下面的主要目的是直接复制到body中就可以用了），因为篇幅太太太太太长了。
本文首发在我的博客
主要用于子元素浮动（float）之后，父元素无法撑起高度和宽度。
因为div嵌套着p，所以p的尺寸并不会超过div。但是要注意，当p的内容为英文单词组成的时候，如果单词过长，比如“pppppppppppppppppppppppppppp”这种甚至更长，会被视为一个单位而造成超出div的尺寸。
如果你想要英文字符也有中文字符的效果的话，在p使用“word-break:break-all”。
目的在于制造一个凹或者凸的形状，利用了”2“中英文单词不换行的特性
相信这点大部分人都知道，但是有一些奇怪的行为，比如说width
缺点是，如果高度太大会造成展开过快和收回延迟，所以这个足够大的值尽量适当。
需要注意的是，图片显示完毕后，img会成为“替换元素”，而替换元素是无法设置伪元素的，因为content内容被图片替换掉了；还需要注意attr里面的变量不能加双引号。
需要注意的是，如果右键保存图片，保存的是src内的图片，而不是替换之后的。
用h1的原因主要是因为SEO，语义化的问题。
Weismann"s blog
需要注意的是，第一个i不能换行，换行后会产生后移的结果。
在IE6-IE9下是...，其它都是动态的；使用dot的目的是语义化和低版本浏览器的兼容。
正在加载中...
第一种主要利用了内联元素的padding只会影响外观和不影响布局的特点；第二种针对其他属性会改变背景图定位的一种方式。
demo
利用margin来改变尺寸，需要注意，改变尺寸的元素水平方向的尺寸不能是确定的。
如果使用padding留白，在Firefox和IE不会显示。
注意container高度不能是确定值，缺点是如果在内部使用锚点定位会出现问题。
正方观点
观点1
观点1
反方观点
观点1
auto值对于margin来讲是占用剩余的空间。
demo
此技巧主要说明border的颜色默认是继承自color的
和增加点击区域第二种方式一样
缺点是border不支持百分比，最多2-3栏。
至于为什么说“近似”，一句话说不清楚，请看开头
基于行高实现的...
产生的问题和“幽灵空白节点”和x-height有关，你可以尝试在img前加入x字符观察一下。
特点是文字大小的改变不会影响对齐。ex代表的是x-height的高度，根据x字形的不同（如font-family）而不同。
拉拉
文字
特点是内容和浏览器尺寸变化都是自动变换大小和位置，可以通过伪元素的height控制上下位置。
demo
文字环绕图片
float的真正用途。
demo，demo，demo，demo，demo，demo，demo
利用overflow:hidden自定义滚动条
事实上overflow:hidden是可以滚动的，可以通过锚点、focus、scrollTop滚动。滚动条的实现请自行发挥。
通过label实现的选项卡效果
与锚点不同的是不会触发由内到外（多层滚动造成的类似于事件冒泡的效果）的页面跳动（元素上边与窗体上边对齐），还支持Tab选项的效果；缺点是需要JS支持选中效果。
1234
“包含块”的绝对定位元素“一柱擎天”问题
拉拉
“无依赖绝对定位”的表单验证应用
在一个元素上如果单用（父元素的position属性均是默认）“position:absolute”，事实上元素将原地不动，最终会产生BFC。
邮箱格式不准确（示意）...
主体页面侧边栏
利用text-align和fixed的组合；height置0和overflow隐藏目的是为了不影响主体的体验，而之所以绝对定位元素没有被隐藏的原因是“如果overflow不是定位元素，同时绝对定位元素和overflow容器之间也没有定位元素，则overflow无法对绝对定位元素进行剪裁。”—《CSS世界》。
不通过width和height设置窗体全占用？
利用top和bottom或left和right同时设置的时候会触发流体特性的特点；与通过”top:0;left:0;width:100%;height:100%;“相比，在设置margin、border、padding的时候不会溢出到窗体的外面（就算你想到box-sizing，那margin呢？）；而之所以用span的原因是想说明绝对定位会将元素的display置为block。
margin:auto水平垂直居中
纸张卷边阴影
主要利用“position: relative;z-index: 0;”创建层叠上下文与z-index的负值将阴影置于“contaniner”和“page”之间。
你可以尝试将关键CSS去掉查看效果。
demo
demo
隐藏文字
说这个主要是为了说明，Chrome浏览器如果字体设置12px以下的大小（新版本已经不限制了），会被自动处理成12px，但是有一个值除外，0。
解决text-decoration下划线和文本重叠
因为是内联元素，所以完全不用担心会影响元素高度的问题。
自动将输入的小写字母转换大写
价格场景下的首个符号选择器
特点是可以让html结构显得干净
¥399
元素隐藏同时资源不加载
后续可通过script.innerHTML访问。
头像裁剪矩形镂空效果
主要利用outline。
自定义光标
需要注意IE只支持cur文件。
修改水平流到垂直流
兼容到IE7；此应用涉及较多东西，所有水平流的特性都可以应用到垂直流中（比如水平居中变成了垂直居中）。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/114398.html
简介 无障碍、HTML 小细节、焦点、a11y、Accessibility、框架选择 无障碍开发还是应该从 HTML 开始聊起，无论是盲人阅读器还是浏览器等工具最核心的部分还是在 HTML，毕竟没了 CSS 只是不美观了，没了 JavaScript 只是少了交互和无限扩展的可能性。 有的同学会说了产品和老板拿着鞭子在后头赶马车哪里有时间写这些。现实是这样的，但是在选择UI框架的时候可以选择 无障碍...
摘要：除特别标注外，文章非原创插图全部来自课程相关资源。剧透预警内容包含大作业的关键问题解法分析。为的返回值此方案下，判断只需要对应，判断使用结果准确，判断检测的对应是否为。更新此方法已确定违反的。 Princeton的算法课是目前为止我上过的最酣畅淋漓的一门课，得师如此夫复何求，在自己的记忆彻底模糊前，愿对这其中一些印象深刻的点做一次完整的整理和回顾，以表敬意。 注：这是一篇更关注个人努力...
摘要：大小仅仅只有，同时具有大多数地图所需要的特点。微信公众号嘻嘻图如下使用生成世界地图非常方便，配置参数记录下，有兴趣的可以看看本例中引入操作。当用户同意浏览器分享用户位置后，地图将自动调整视窗中心为该位置。 介绍：Leaflet是一个开源的JavaScript库，对移动端友好且对地图有很好的交互性。 大小仅仅只有 33 KB， 同时具有大多数地图所需要的特点。 Leaflet设计的非常简...
阅读 2070·2021-11-16 11:51
阅读 1538·2021-10-08 10:05
阅读 3289·2021-09-26 10:14
阅读 1163·2021-09-22 15:58
阅读 984·2019-08-30 15:52
阅读 1899·2019-08-30 15:43
阅读 2489·2019-08-30 13:46
阅读 793·2019-08-30 13:10
