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的更多相关文章

  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. 简述document.write和 innerHTML的区别。

    document.write是重写整个document, 写入内容是字符串的htmlinnerHTML是HTMLElement的属性,是一个元素的内部html内容

  2. C# -- HttpWebRequest 和 HttpWebResponse 的使用 C#编写扫雷游戏 使用IIS调试ASP.NET网站程序 WCF入门教程 ASP.Net Core开发(踩坑)指南 ASP.Net Core Razor+AdminLTE 小试牛刀 webservice创建、部署和调用 .net接收post请求并把数据转为字典格式

    C# -- HttpWebRequest 和 HttpWebResponse 的使用 C# -- HttpWebRequest 和 HttpWebResponse 的使用 结合使用HttpWebReq ...

  3. SQL server中的parsename详解

    1.SQL server中如何拆分ip地址 比如有一个ip地址是 192.168.0.8 2.再或者,如何拆分一个包装比例,比如1:5:3 用parsename方法即可以实现: select pars ...

  4. Mysql 字符串函数 详解

    字符串函数是最常用的一种函数了,如果大家编写过程序的话,不妨回过头去看看自己使用过的函数,可能会惊讶地发现字符串处理的相关函数占已使用过的函数很大一部分.MySQL中字符串函数也是最丰富的一类函数,表 ...

  5. Android系统应用信息中存储和缓存的计算方法

    进行例如以下操作: 设置->应用->选择一个应用->应用信息 会到达例如以下界面: 能够看到这个应用占用的磁盘空间. 先说结果,这几项会计算哪些文件(夹). 1.应用,由三项相加组成 ...

  6. Android Studio 使用感受 错误解决

    刚到公司不久,公司叫我用Android studio软件,曾经一直在用的是eclipse ADT.突然接触到的新名词让我有点适应只是来. 好吧,既然是公司要求,肯定有它的道理.就从网上下载了它的安装包 ...

  7. c#取得post和get的数据和模拟发送

    可以放在控制器的入口函数中,这样载入就会被调用 asp.net mvc,get+post: public ActionResult Index() { ) { foreach (var item in ...

  8. Ownerdrawn ComboBox

    [ToolboxBitmap(typeof(ComboBox))] class ComboBoxEx : ComboBox { public ComboBoxEx() { this.DrawMode ...

  9. 打印十字图 queue 搞定

    题目描述 小明为某机构设计了一个十字型的徽标(并非红十字会啊),如下所示: ..$$$$$$$$$$$$$.. ..$...........$.. $$$.$$$$$$$$$.$$$ $...$... ...

  10. Windows Phone 性能优化（二）

    这篇文章的 demo 是在 (一)的基础上进行的调整,逻辑基本相似.本文只列和 上一篇出不同的代码. 为了实现自定义的虚拟化,把上一篇文章的 ListBox 换成 ScrollViewer + Ite ...