你所不知道的CSS
1.用FONT-SIZE：0来清除间距
inline-block的元素之间会受空白区域的影响，也就是元素之间差不多会有一个字符的间隙。如果在同一行内有4个25%相同宽度的元素，会导致最后一个元素掉下来（如图）。你可以利用元素浮动float，或者压缩html，清除元素间的空格来解决。但最简单有效的方法还是设置父元素的font-size属性为0；
*{
box-sizing: border-box;
}
.items {
font-size: 0;
> .item {
display: inline-block;
width: 25%;
height: 50px;
border: 1px solid #ccc;
text-align: center;
line-height: 50px;
background-color: #eee;
font-size: 16px; //不要忘了给子元素设置字号
}
}
<div class="items">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
2.用 OVERFLOW 來清除浮动
除了著名的clearfix清除浮动类，利用overflow属性也可以清除浮动。
假如你的案例中没有对溢出的操作（如下拉菜单），推荐使用overflow:hidden来清除浮动。
.clearfix {
overflow: hidden;
}
<div class="clearfix">
<div class="left">left</div>
<div class="right">right</div>
</div>
3.用BORDER来绘制三角形
div {
width: 0;
height: 0;
border: 72px solid;
border-color: transparent transparent transparent orange;
}
<div> </div>
延伸来绘制一个梯形
就着上面的思路，我们保留盒子宽高值，而是将其他三个边设为透明，则盒子会呈现为一个梯形：
div {
width: 256px;
height: 256px;
border: 64px solid ;
border-color : red transparent transparent transparent ;
}
4.用POINTER-EVENT来禁用事件
pointer-event属性更像是一个JavaScript事件，利用该属性，可以做如下的事情：
- 阻止任何点击动作的执行
- 使链接显示为默认光标(
cursor:default) - 阻止触发
hover和active状态 - 阻止JavaScript点击事件的触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
button{
pointer-events: none;
}
</style>
</head>
<body>
<button>点击</button>
</body>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
$(()=>{
$("button").click(()=>{
alert("1");
})
}) </script>
</html>
会发现按钮点击无法出现alert
5.用TABLE-LAYOUT来控制表格单元格宽度
你也许遇到过给表格设置了宽度，但是不起作用的问题。这是因为单元格的宽度是根据其内容进行调整的。刨根揭底，是因为表格有个叫做table-layout的属性，其浏览器默认值是auto在作怪。当我们把这个值设置为fixed的时候，我们给th/td标签设置的宽度就起作用了。用法很简单：
table {
table-layout: fixed;
width: 100%;
}
6.用CARET-COLOR来自定义光标的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input{
caret-color:red;
}
</style>
</head>
<body>
<input type="text">
</body>
</html>
7.用USER-SELECT来禁用文本选中
在远古时代，如果你不想让别人选中你页面的内容，JavaScript是不可或缺的。而在文明社会中，只需要一句user-select:none的CSS样式就可以解决。IE6-9不支持该属性，可以通过给body添加onselectstart="return false;"的内联JavaScript语句搞定。
body{
user-select: none; //页面中的文本不能被选中
}
8.用::SELECTION来美化选中文本
::selection用来设置选中文本的样式，从而改变浏览器一成不变的文本选中色（蓝色）。
::selection{
color: #fff;
background-color: #6bc30d;
}
9.用::PLACEHOLDER来美化占位符
::placeholder用来修饰input/textarea等表单元素placeholder属性的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input::-webkit-input-placeholder{
color:red
}
</style>
</head>
<body>
<input type="text" placeholder="请输入姓名">
</body>
</html>
10.用::FIRST-LETTER来实现段落首字下沉
首字下沉 ： 设置段落的第一行第一字字体变大，并且向下一定的距离，与后面的段落对齐，段落的其它部分保持原样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
width: 200px;
margin: 10px auto;
}
p::first-letter{
font-size: 6em;
line-height: 1;
float: left;
}
</style>
</head>
<body>
<p><b>吴</b>桂英是一名女干部，出生于1966年2月，此前担任北京市朝阳区委书记。朝阳区是北京的人口大区、经济大区、财政贡献大区，也备受全国关注。长安街知事（微信
ID：Capitalnews）发现，从1991年到目前为止，连续7任朝阳区委书记都升任了副部级，他们是：宋维良、蒋效愚、刘晓晨、李士祥、陈刚、程连元、吴桂英。其中，陈刚、程连元和吴桂英3人接连调至外省。</p>
</body>
</html>
11.用::FIRST-LINE来特殊标记段落第一行
就如它的名字一样，这个伪元素代表了段落的第一行，你可以使用任意样式来控制它。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
width: 200px;
margin: 10px auto;
}
p::first-line{
color:red;
}
</style>
</head>
<body>
<p>吴桂英是一名女干部，出生于1966年2月，此前担任北京市朝阳区委书记。朝阳区是北京的人口大区、经济大区、财政贡献大区，也备受全国关注。长安街知事（微信
ID：Capitalnews）发现，从1991年到目前为止，连续7任朝阳区委书记都升任了副部级，他们是：宋维良、蒋效愚、刘晓晨、李士祥、陈刚、程连元、吴桂英。其中，陈刚、程连元和吴桂英3人接连调至外省。</p>
</body>
</html>
你所不知道的CSS的更多相关文章
- 你所不知道的 CSS 滤镜技巧与细节
承接上一篇你所不知道的 CSS 动画技巧与细节,本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! OK,下面直接进入正文.本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE ...
- 你所不知道的 CSS 阴影技巧与细节
关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow 的用法. 最近一个新的项目,CSS-Ins ...
- 你所不知道的 CSS 阴影技巧与细节 滚动视差？CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例
你所不知道的 CSS 阴影技巧与细节 关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow ...
- 你所不知道的 CSS 动画技巧与细节
怕标题起的有点大,下述技巧如果你已经掌握了看看就好,欢迎斧正,本文希望通过介绍一些 CSS 不太常用的技巧,辅以一些实践,让读者可以更加深入的理解掌握 CSS 动画. 废话少说,直接进入正题,本文提到 ...
- 你所不知道的 CSS 负值技巧与细节
写本文的起因是,一天在群里有同学说误打误撞下,使用负的 outline-offset 实现了加号.嗯?好奇的我马上也动手尝试了下,到底是如何使用负的 outline-offset 实现加号呢? 使用负 ...
- 【CSS】346- 你所不知道的 CSS 阴影技巧与细节
偷懒了1个多礼拜,在工作饱和的情况下,怎么坚持学习?今天的分享来自@Coco国服第一切图仔,我们聊聊CSS属性box-shadow- 关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 ...
- 你所不知道的setInterval
在你所不知道的setTimeout记载了下setTimeout相关,此篇则整理了下setInterval:作为拥有广泛应用场景(定时器,轮播图,动画效果,自动滚动等等),而又充满各种不确定性的这set ...
- 你所不知道的html5与html中的那些事第三篇
文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么一些专家认为html5完全完成后,所有的工作 ...
- overflow:hidden 你所不知道的事
overflow:hidden 你所不知道的事 overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解. ...
随机推荐
- 控制器中添加DB类才可以操作数据库表中的数据
必须使用DB: use DB;
- STS(Spring Tool Suite)使用maven添加jar包
打开:http://mvnrepository.com/ 搜索:hibernate 或者:http://search.maven.org 搜索:hibernate-core 两种方式都可以添加jar包 ...
- FFmpeg进行屏幕录像和录音
文章转自:http://www.cucer.cn/2016/03/10/ffmpeg-screen-capture.html 有些时候我们需要对屏幕进行录制,比如制作视频教程,录制直播等.然而这方面的 ...
- JAVA中的字节流与字符流
字节流与字符流的区别? 字节流与和字符流的使用非常相似,两者除了操作代码上的不同之外,是否还有其他的不同呢? 实际上字节流在操作时本身不会用到缓冲区(内存),是文件本身直接操作的,而字符流在操作时使用 ...
- Redis总结（五）缓存雪崩和缓存穿透等问题(转载)
前面讲过一些redis 缓存的使用和数据持久化.感兴趣的朋友可以看看之前的文章,http://www.cnblogs.com/zhangweizhong/category/771056.html .今 ...
- java程序猿常用Linux命令
1.查找文件 find / -name filename.txt 根据名称查找/目录下的filename.txt文件. find . -name "*.xml" 递归查找所有的xm ...
- mysql lower_case_table_names ---- 一律把表名处理为小写
一.从操作系统说起: 1.我们知道mysql 是跨平台的.它可以在许多平台上运行如windows .linux.unix(mac).linux 是类unix的, 但是windows和linux就有非常 ...
- INFORMIX的dbexport和dbimport使用示例说明
INFORMIX-IDS数据库进行迁移中,我们在进行数据级别的迁移时,采用dbexport,dbimport来完成.dbexport导出数据库中所有对象的模式脚本和表数据文件,该模式脚本中包含有表等的 ...
- 玩转Linux文件描述符和重定向
本文介绍linux中文件描述符与重定向的相关知识,文件描述符是与文件输入.输出相关联的整数,它们用来跟踪已打开的文件.有需要的朋友参考下. 原文出处:http://www.jbxue.com/arti ...
- Error-Project facet Java version 1.8 is not supported
最近导入最新的Strtus2.5.10.1 Demo时出现了这个错误 解决方案如下: 选中工程——右键——Properties 然后依次展开找到如图所示内容,将1.8改成1.7即可. 原因:工程默认配 ...