CSS实用技巧（上）

言

张鑫旭的《CSS世界》这本书，强烈推荐前端er仔细阅读下，里面详细说明了许多不怎么被注意的CSS特性，对前端进阶很有帮助。
本文简要列举书中前四章比较实用的知识点，书中干货很多，值得一读。

实用技巧

文字少的时候居中显示，多的时候居左显示

利用元素的包裹性，元素的尺寸由内部元素决定，且永远小于容器的宽度。

具有包裹性的元素：inline-block、浮动元素、绝对定位元素。

<style>
  .content{
    display: inline-block;
    text-align: left;
  }
  .box{
    text-align: center;
  }
</style>
<div class="box">
  <span class="content"></span>
</div>

你不知道的min-width/min-height, max-width/max-height

初始值

min-width/min-height初始值是auto,max-height/max-width初始值是none。

设置min-height渐变效果，需要指定min-height的值。

<style>
  .box{
    min-height: 20px;
    width: 200px;
    background-color: coral;
    transition: min-height .5s;;
  }
  .box:hover{
    min-height: 300px;
  }
</style>
<template>
  <div class="box"></div>
</template>

覆盖规则

超越important，超越最大。简而言之，min-width/min-height,max-width/max-height会覆盖width/height。当min-xxx与max-xxx设置相冲突时，实际结果以min-xxx为准。

不可忽略的幽灵空白节点

如下代码，div没有设置宽高，span为空白标签，但是div的高度却为18px，这个高度是由字体大小和行高决定的，要想去除这个影响，需要将font-size设置为0。

<style>
  div {
    background-color: #cd0000;
  }
  span {
    display: inline-block;
  }
</style>
<template>
 <div><span></span></div>
</template>

图片根据宽高自适应

指定图片宽高，使图片自适应宽高，常用的两种方式，第一种是background，第二种是object-fit。常用属性如下：

background-size	object-fit	CSS属性	说明
cover	cover	覆盖	会存在图片展示不全
contain	contain	包含	等比缩放，空白自动填充
--	fill（默认）	填充	不符合尺寸，横向、纵向压缩

功能强大的content

CSS content属性结合before/after伪类，能实现很多意想不到的效果。

...动态加载效果

<style>
dot {
  display: inline-block;
  height: 1em;
  line-height: 1;
  text-align: left;
  vertical-align: -.25em;
  overflow: hidden;
} 
dot::before {
  display: block;
  content: '...\A..\A.';
  white-space: pre-wrap;
  animation: dot 3s infinite step-start both;
} 
@keyframes dot {
  33% { transform: translateY(-2em); }
  66% { transform: translateY(-1em); }
}
</style>
<template>
  <div>
    正在加载中<dot>...</dot>
  </div>
</template>

contenteditable可编辑元素placeholder

<style>
.edit{
  width: 200px;
  height: 50px;
  background-color: azure;
}
.edit:empty::before{
  content: attr(data-placeholder);
}
</style>
<template>
  <div class="edit" contenteditable="true" data-placeholder="this is a placeholder"></div>
</template>

padding的妙用

background-clip可以设置background作用范围，结合padding，可以做出一些好玩的东西。

双层圆点

<style>
.icon-dot {
  display: inline-block;
  width: 100px; height: 100px;
  padding: 10px;
  border: 10px solid;
  border-radius: 50%;
  background-color: currentColor;
  background-clip: content-box;
}
</style>
<template>
  <span class="icon-dot"></span>
</template>

margin的奇淫技巧

左右两列等高布局

<style>
.column-box {
  overflow: hidden;
} 
.column-left,
.column-right {
  margin-bottom: -9999px;
  padding-bottom: 9999px;
  float: left;
}
.column-left{
  width: 100px;
  background-color: #ccc;
}
.column-right{
  width: 100px;
  background-color: aquamarine;
}
</style>
<template>
<div class="column-box">
    <div class="column-left">
      123
    </div>
    <div class="column-right">
      456    
    </div>
  </div>
</template>

一端固定，另外一端自适应

<style>
.left{
  width: 200px;
  height: 100%;
  float: left;
}
.right{
  margin-left: 200px;
}
</style>
<template>
  <body>
    <div class='left'></div>
    <div class='right'></div>
  </body>
</template>

块级元素垂直水平居中

家好，我是IT共享者，人称皮皮。这篇文章我们来讲讲CSS的文本样式。

一、文本颜色Color

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

十六进制值 - 如"＃FF0000"。
一个RGB值 - "RGB（255,0,0）"。
颜色的名称 - 如"红"。

一个网页的文本颜色是指在主体内的选择：

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>项目</title>
        <style>
            body {
                color: blue;
            }


            h1 {
                color: #00ff00;
            }


            h2 {
                color: rgb(255, 0, 0);
            }
</style>
    </head>


    <body>
        <h2>hello world</h2>
        <h1>welcome to CaoZhou</h1>
    </body>


</html>

注：对于W3C标准的CSS：如果你定义了颜色属性，你还必须定义背景色属性。

二、属性

1. text-align 文本的对齐方式

文本排列属性是用来设置文本的水平对齐方式。

文本可居中或对齐到左或右,两端对齐。

当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

<!doctype html>
<html lang="en">


    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            h1 {
                text-align: center;
            }


            p.date {
                text-align: right;
            }


            p.main {
                text-align: justify;
            }
</style>
    </head>


    <body>


        <p class="date">2015 年 3 月 14 号</p>
        <p class="main">　从前有个书生，和未婚妻约好在某年某月某日结婚。到那一天，未婚妻却嫁给了别人。书生受此打击， 一病不起。　　这时，路过一游方僧人，从怀里摸出一面镜子叫书生看。书生看到茫茫大海，一名遇害的女子一丝不挂地躺在海滩上。路过一人， 看一眼，摇摇头，走了。又路过一人，将衣服脱下，给女尸盖上，走了。再路过一人，过去，挖个坑，小心翼翼把尸体掩埋了。　　僧人解释道， 那具海滩上的女尸，就是你未婚妻的前世。你是第二个路过的人，曾给过他一件衣服。她今生和你相恋，只为还你一个情。但是她最终要报答一生一世的人，是最后那个把她掩埋的人，那人就是他现在的丈夫。书生大悟，病愈。


        </p>
        <p><b>注意：</b> 重置浏览器窗口大小查看 "justify" 是如何工作的。</p>
    </body>


</html>

2. text-decoration文本修饰

text-decoration 属性用来设置或删除文本的装饰。

从设计的角度看 text-decoration属性主要是用来删除链接的下划线：

<!doctype html>
<html lang="en">


    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .none {}


            .del {
                text-decoration: none;
            }
</style>
    </head>


    <body>
        <p>原来的样子</p>
        <a href="#" class="none">wwwwwwwwwwwwwwwwww</a>
        <p>去掉下划线</p>
        <a href="#" class="del">wwwwwwwwwwwwwwwwwwwww</a>
    </body>


</html>

也可以这样装饰文字：

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>项目</title>
        <style>
            h1 {
                text-decoration: overline;
            }


            h2 {
                text-decoration: line-through;
            }


            h3 {
                text-decoration: underline;
            }
</style>
    </head>


    <body>
        <h1>This is heading 1</h1>
        <h2>This is heading 2</h2>
        <h3>This is heading 3</h3>
    </body>


</html>

注：不建议强调指出不是链接的文本，因为这常常混淆用户。

3. text-transform文本转换

text-transform文本转换属性是用来指定在一个文本中的大写和小写字母。

uppercase:转换为全部大写。
lowercase：转换为全部小写。
capitalize ：每个单词的首字母大写。

<!DOCTYPE html>
<html>


    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>项目</title>
        <style>
            p.uppercase {
                text-transform: uppercase;
            }


            p.lowercase {
                text-transform: lowercase;
            }


            p.capitalize {
                text-transform: capitalize;
            }
</style>
    </head>


    <body>
        <p class="uppercase">This is some text.</p>
        <p class="lowercase">This is some text.</p>
        <p class="capitalize">This is some text.</p>
    </body>


</html>

4. text-indent文本缩进

text-indent文本缩进属性是用来指定文本的第一行的缩进。

p {text-indent:50px;}

5. letter-spacing 设置字符间距

增加或减少字符之间的空间。

<style>
     h1 {
       letter-spacing:2px;
}
      h2 {
        letter-spacing:-3px;
}
</style>

6. line-height设置行高

指定在一个段落中行之间的空间。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>项目</title>
        <style>
            p.small {
                line-height: 70%;
            }


            p.big {
                line-height: 200%;
            }
</style>
    </head>


    <body>
        <p>
            This is a paragraph with a standard line-height.<br> This is a paragraph with a standard line-height.<br> The default line height in most browsers is about 110% to 120%.<br>
        </p>


        <p class="small">
            This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br>
        </p>


        <p class="big">
            This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br>
        </p>


    </body>


</html>

7. word-spacing 设置字间距

增加一个段落中的单词之间的空白空间。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>项目</title>
        <style type="text/css">
            p {
                word-spacing: 30px;
            }
</style>
    </head>


    <body>


        <p>
            This is some text. This is some text.
        </p>


    </body>


</html>

8. vertical-align 设置元垂直居中

设置文本的垂直对齐图像。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>项目</title>
        <style>
            img{
                width: 200px;
                height: 100px;
            }
            img.top {
                vertical-align: text-top;


            }


            img.bottom {
                vertical-align: text-bottom;


            }
</style>
    </head>


    <body>
        <p>An <img src="img/logo.png"  /> image with a default alignment.</p>
        <p>An <img class="top" src="img/logo.png" /> image with a text-top alignment.</p>
        <p>An <img class="bottom" src="img/logo.png" /> image with a text-bottom alignment.</p>
    </body>


</html>

9. text-shadow 设置文本阴影

设置文本阴影。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>项目</title>
        <style>
         h1{
            text-shadow: 2px 2px #FF0000;
     }
</style>
    </head>


    <body>
    <h1>Text-shadow effect</h1>
    </body>


</html>

三、总结

本文主要介绍了CSS文本样式实际应用中应该如何去操作，通过讲解文本中对应的属性去改变文本的表现形式。使用丰富的效果图的展示，能够更直观的看到运行的效果，能够更好的理解。使用Html语言，代码结构更佳的清晰，能够帮助你更好的学习。

eta标签介绍

meta标签是HTML语言head区域的一个辅助性标签，常用于定义页面的说明，关键字，最后修改的日期和其他的元数据。这些元数据将服务于浏览器，搜索引擎和其他网络服务。

meta标签的组成

meta标签共有两个属性，分别是http-equiv属性和name属性。

name属性

name属性主要是用于描述网页，比如网页的关键词，叙述等。与之对应的属性值为content，content中的内容是对name填入类型的具体描述，便于搜索引擎抓取。

meta标签中name属性语法格式是：

<meta name="参数" content="具体的描述">

其中name属性共有以下几种参数。(A-C为常用属性)

（1） keywords(关键字)

说明：用于告诉搜索引擎，你网页的关键字。举例：

<meta name="keywords" content="PHP中文网">

（2）description(网站内容的描述)

说明：用于告诉搜索引擎，你网站的主要内容。举例：

<meta name="description" content="php中文网提供大量免费、原创、高清的php视频教程">

（3）viewport(移动端的窗口)

说明：这个概念较为复杂，具体的会在下篇博文中讲述。这个属性常用于设计移动端网页。在用bootstrap,AmazeUI等框架时候都有用过viewport。

<meta name="viewport" content="width=device-width, initial-scale=1">

（4） robots(定义搜索引擎爬虫的索引方式)

说明：robots用来告诉爬虫哪些页面需要索引，哪些页面不需要索引。content的参数有all,none,index,noindex,follow,nofollow。默认是all。

<meta name="robots" content="none">

具体参数如下：

1、none : 搜索引擎将忽略此网页，等价于noindex，nofollow。

2、noindex : 搜索引擎不索引此网页。

3、nofollow: 搜索引擎不继续通过此网页的链接索引搜索其它的网页。

4、all : 搜索引擎将索引此网页与继续通过此网页的链接索引，等价于index，follow。

5、index : 搜索引擎索引此网页。

6、follow : 搜索引擎继续通过此网页的链接索引搜索其它的网页。

（5）author(作者)

说明：用于标注网页作者举例：

<meta name="author" content="PHP中文网">

（6） generator(网页制作软件)

说明：用于标明网页是什么软件做的举例: (不知道能不能这样写)：

<meta name="generator" content="Sublime Text3">

（7）copyright(版权)

说明：用于标注版权信息举例：

（8）revisit-after(搜索引擎爬虫重访时间)

说明：如果页面不是经常更新，为了减轻搜索引擎爬虫对服务器带来的压力，可以设置一个爬虫的重访时间。如果重访时间过短，爬虫将按它们定义的默认时间来访问。举例：

<meta name="revisit-after" content="7 days" >

（9）renderer(双核浏览器渲染方式)

说明：renderer是为双核浏览器准备的，用于指定双核浏览器默认以何种方式渲染页面。比如说360浏览器。举例：

<meta name="renderer" content="webkit"> //默认webkit内核

<meta name="renderer" content="ie-comp"> //默认IE兼容模式

<meta name="renderer" content="ie-stand"> //默认IE标准模式

http-equiv属性

http-equiv顾名思义，相当于HTTP的作用。

meta标签中http-equiv属性语法格式是：

<meta http-equiv="参数" content="具体的描述">

其中http-equiv属性主要有以下几种参数：

（1） content-Type(设定网页字符集)(推荐使用HTML5的方式)

说明：用于设定网页字符集，便于浏览器解析与渲染页面举例：

<meta http-equiv="content-Type" content="text/html;charset=utf-8"> //旧的HTML，不推荐

<meta charset="utf-8"> //HTML5设定网页字符集的方式，推荐使用UTF-8

（2）X-UA-Compatible(浏览器采取何种版本渲染当前页面)

说明：用于告知浏览器以何种版本来渲染页面。（一般都设置为最新模式，在各大框架中这个设置也很常见。）

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面

（3） cache-control(指定请求和响应遵循的缓存机制)

说明：指导浏览器如何缓存某个响应以及缓存多长时间

<meta http-equiv="cache-control" content="no-cache">

共有以下几种用法：

no-cache: 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。

no-store: 不允许缓存，每次都要去服务器上，下载完整的响应。（安全措施）

public : 缓存所有响应，但并非必须。因为max-age也可以做到相同效果

private : 只为单个用户缓存，因此不允许任何中继进行缓存。（比如说CDN就不允许缓存private的响应）

maxage : 表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。例如：max-age=60表示响应可以再缓存和重用 60 秒。

禁止百度自动转码

说明：用于禁止当前页面在移动端浏览时，被百度自动转码。虽然百度的本意是好的，但是转码效果很多时候却不尽人意。所以可以在head中加入例子中的那句话，就可以避免百度自动转码了。

<meta http-equiv="Cache-Control" content="no-siteapp" />

（4）expires(网页到期时间)

说明:用于设定网页的到期时间，过期后网页必须到服务器上重新传输。

<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />

（5） refresh(自动刷新并指向某页面)

说明：网页将在设定的时间内，自动刷新并调向设定的网址。

<meta http-equiv="refresh" content="2；URL=http://www.xxx.com/"> //意思是2秒后跳转到PHP中文网

（6） Set-Cookie(cookie设定)

说明：如果网页过期。那么这个网页存在本地的cookies也会被自动删除。

<meta http-equiv="Set-Cookie" content="name, date"> //格式

<meta http-equiv="Set-Cookie" content="User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT"> //具体范例

总结：meta标签的自定义属性实在太多了。所以只总结了一些常用的，希望对大家有所帮助。

在线咨询

上一篇：Html+CSS - 1段CSS让表格更漂亮建议收
下一篇：英国抗疫必备：超市网站集合，收藏！

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商