你所不知道的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样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解. ...
随机推荐
- Android画图之抗锯齿
在画图的时候,图片如果旋转或缩放之后,总是会出现那些华丽的锯齿.其实Android自带了解决方式. 方法一:给Paint加上抗锯齿标志.然后将Paint对象作为参数传给canvas的绘制方法. ...
- Windows2008 R2下，应用程序池 'XXXXXXXX' 被自动禁用，原因是为此应用程序池提供服务的进程中出现一系列错误。
转:http://www.cnblogs.com/freeton/archive/2012/08/28/2660585.html http://www.hack001.com/post/151
- Cocos2d-x3.0 载入Cocostudio的UI后，button无法点击的解决方法
原帖地址:http://blog.csdn.net/musicvs/article/details/28390617 近期发现不少朋友都遇到这个问题,用Cocostudio的UI编辑器创建好UI后,在 ...
- Altium PCB布局时快速摆放元件的技巧
http://www.openedv.com/posts/list/45238.htm pcb窗口:工具--->交叉选择模式
- Linux:命令执行控制&&与||
1.&& 方式:command1 && command2 如果command1执行成功,则执行command2 2.|| 方式:command1 || command2 ...
- Linux下使用DD命令测试磁盘读写速度
dd是Linux/UNIX 下的一个非常有用的命令,作用是用指定大小的块拷贝一个文件,并在拷贝的同时进行指定的转换,所以可以用来测试硬盘的读写能力~ 几种常见的DD命令,先看一下区别~ dd bs=6 ...
- atitit。获取表格的字段注释metadata的原理以及AND 字段表格描述文档方案
atitit.获取表格的字段注释metadata的原理以及AND 字段表格描述文档方案 1. 通过sql ide navicate获取(推荐)通过meatadata数据库获取 1 2. 通过代码获取 ...
- atitit. 文件上传带进度条 atiUP 设计 java c# php
atitit. 文件上传带进度条 atiUP 设计 java c# php 1. 设计要求 1 2. 原理and 架构 1 3. ui 2 4. spring mvc 2 5. springMVC.x ...
- 基于FPGA的PCIe接口实现（具体讲解了数据流向）
时间:2014-12-09 来源:西安电子科技大学电子工程学院 作者:姜 宁,陈建春,王 沛,石 婷 摘要 PCI Express是一种高性能互连协议,被广泛应用于网络适配.图形加速器.网络存储.大数 ...
- 1、Reactive Extensions for .NET（译）
注:本文的工程是基于 vs2010 的,在 vs2012 中区别不大. 本文的意图是让读者熟悉 Reactive Extension for .net(Rx) 的使用.通过一系列的例子,让读者感受 基 ...