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)
  • 阻止触发hoveractive状态
  • 阻止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的更多相关文章

  1. 你所不知道的 CSS 滤镜技巧与细节

    承接上一篇你所不知道的 CSS 动画技巧与细节,本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! OK,下面直接进入正文.本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE ...

  2. 你所不知道的 CSS 阴影技巧与细节

    关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow 的用法. 最近一个新的项目,CSS-Ins ...

  3. 你所不知道的 CSS 阴影技巧与细节 滚动视差?CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例

    你所不知道的 CSS 阴影技巧与细节   关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow  ...

  4. 你所不知道的 CSS 动画技巧与细节

    怕标题起的有点大,下述技巧如果你已经掌握了看看就好,欢迎斧正,本文希望通过介绍一些 CSS 不太常用的技巧,辅以一些实践,让读者可以更加深入的理解掌握 CSS 动画. 废话少说,直接进入正题,本文提到 ...

  5. 你所不知道的 CSS 负值技巧与细节

    写本文的起因是,一天在群里有同学说误打误撞下,使用负的 outline-offset 实现了加号.嗯?好奇的我马上也动手尝试了下,到底是如何使用负的 outline-offset 实现加号呢? 使用负 ...

  6. 【CSS】346- 你所不知道的 CSS 阴影技巧与细节

    偷懒了1个多礼拜,在工作饱和的情况下,怎么坚持学习?今天的分享来自@Coco国服第一切图仔,我们聊聊CSS属性box-shadow- 关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 ...

  7. 你所不知道的setInterval

    在你所不知道的setTimeout记载了下setTimeout相关,此篇则整理了下setInterval:作为拥有广泛应用场景(定时器,轮播图,动画效果,自动滚动等等),而又充满各种不确定性的这set ...

  8. 你所不知道的html5与html中的那些事第三篇

    文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么一些专家认为html5完全完成后,所有的工作 ...

  9. overflow:hidden 你所不知道的事

    overflow:hidden 你所不知道的事 overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解. ...

随机推荐

  1. Android开发优化之——对界面UI的优化(1)

    在Android应用开发过程中,屏幕上控件的布局代码和程序的逻辑代码通常是分开 的.界面的布局代码是放在一个独立的xml文件中的,这个文件里面是树型组织的,控制着页面的布局.通常,在这个页面中会用到很 ...

  2. 架构设计--用户端全http参数接口详细说明v1

    1. 用户端全http参数接口详细说明v1.doc 1 2. change histor 1 3. 接口通用参数说明 1 4. 函数注册接口(规划中) 3 5. 用户权限模块 3 5.1. 用户注册接 ...

  3. 5.1 Zend_Log_Writer

    22.2.2. 写入到数据库 22.2.3. 踩熄Writer 22.2.4. 測试 Mock 22.2.5. 组合Writers

  4. JMeter学习笔记(三)

    D. User Defined Variables:用户自定义的变量,在此我们可以定义后面原件需要引用的变量并对其进行赋值.jsessionid一般是服务器返回的,每个用户返回的都不一样,所以在此不应 ...

  5. nyoj 38 布线问题 Kruskal and Prim

    布线问题 时间限制:1000 ms  |  内存限制:65535 KB 难度:4 描述 南阳理工学院要进行用电线路改造,现在校长要求设计师设计出一种布线方式,该布线方式需要满足以下条件: 1.把所有的 ...

  6. 01、Windows Phone 套接字(Socket)实战之交互设计

    这个 Demo 主要使用 WP 中提供的 Socket 对象,来与 PC 端进行文字.文件的互相传输.因为在 WP 中系统 对存储的操作限制的比较多,例如,你把 .doc..txt..zip 等常见的 ...

  7. ms17010漏洞复现-2003

    先使用Smbtouch模块检测一下是否有漏洞. 然后使用Doublepulsar写一个shellcode到本地. 生成成功后的截图: 再使用EternalRomance植入Doublepulsar后门 ...

  8. swift侧开菜单

    此文来自学习这篇博客后的学习笔记,原博客是用oc写的,我最近在学swift,于是改写为swift. swift和oc之间互相调用还是很方便的,但是要注意AnyObject和optional的运用,我现 ...

  9. 实现itoa()

    上代码之前先讲个笑话:曾经有位面试官问:“你实现过 唉踢哦诶(音) 吗”? 我第一个想到的是各种OA系统,心想那玩意不多是Java实现的吗...过一会想明白了,瞬间石化... #include < ...

  10. Unix系统编程()深入探究文件IO概述

    open调用将引入原子atomicity操作的概念. 将某一系统调用所要完成的各个动作作为不可中断的操作,一次性加以执行. 原子操作是许多系统调用得以正确执行的必要条件. 还介绍一个系统调用fcntl ...