CSS – 嗨软

CSS技巧：让 div 显示在一行，超出自动以省略号代替

hack0573 — Thu, 20 Jan 2022 08:29:40 +0000

　　前几天给小站适配移动端的时候，遇到一个 CSS 的问题，有个 div 在PC端显示正常，但是到了手机端，由于手机界面宽度较窄，发现自动换行了，显得很丑。我还是希望这个 div 显示在一行，超出部分内容则以省略号代替。如何修改 CSS 实现？找到一段说明代码，在此做个笔记：








测试内容1
测试内容2
测试内容3
测试内容4

外链 css 要放头部而 js 要放尾部的原因探究

hack0573 — Thu, 05 Dec 2019 01:48:01 +0000

　　最近在学习前端设计，HTML5、CSS3、JavaScript jQuery 等，我们最开始学前端的时候都会看到教程在处理外部 css 和 js 的时候会将 css 放在 header 中，而 js 放在 body 的最后。为什么要这样子处理？其中是有很大原因的，今天参考一些资料好好分析学习下。

为什么外链css为什么要放头部？

　　首先整个页面展示给用户会经过html 的解析与渲染过程。

　　而外链css无论放在html的任何位置都不影响html的解析，但是影响html的渲染。

　　如果将css放在尾部，html的内容可以第一时间显示出来，但是会阻塞html行内css的渲染。

　　浏览器的这个策略其实很明智的，想象一下，如果没有这个策略，页面首先会呈现出一个行内css样式，待CSS下载完之后又突然变了一个模样。用户体验可谓极差，而且渲染是有成本的。

　　如果将css放在头部，css的下载解析是可以和html的解析同步进行的，放到尾部，要花费额外时间来解析CSS，并且浏览器会先渲染出一个没有样式的页面，等CSS加载完后会再渲染成一个有样式的页面，页面会出现明显的闪动的现象。

为什么script要放在尾部？

　　因为当浏览器解析到script的时候，就会立即下载执行，中断html的解析过程，如果外部脚本加载时间很长（比如一直无法完成下载），就会造成网页长时间失去响应，浏览器就会呈现“假死”状态，这被称为“阻塞效应”。具体的流程是这样的：

1、浏览器一边下载HTML网页，一边开始解析；
2、解析过程中，发现script标签；
3、暂停解析，网页渲染的控制权转交给JavaScript引擎；
4、如果script标签引用了外部脚本，就下载该脚本，否则就直接执行；
5、执行完毕，控制权交还渲染引擎，恢复往下解析HTML网页。

外链的script包含async或者defer如何处理？

　　这两个属性只是script标签在header标签中使用的，如果你把它放在body后面是无效的。

　　script 的这两个属性主要用于其js文件没有操作DOM的情况，这时候就可以将该js脚本设置为异步加载，通过async或defer来标记代码。

async和defer的区别

　　1、async和defer都仅对外部脚本有效，对于内置而不是连接外部脚本的script标签，以及动态生成的script标签不起作用。

　　2、async和defer虽然都是异步的，不过使用async标志的脚本文件一旦加载完成就会立即执行；而使用defer标记的脚本文件，会在 DOMContentLoaded 事件之前（也就是页面DOM加载完成时）执行。

　　3、如果有多个js脚本文件，async标记不保证按照书写的顺序执行，哪个脚本先下载结束，就先执行那个脚本。而defer标记则会按照js脚本书写顺序执行。

　　4、一般来说，如果脚本之间没有依赖关系，就使用async属性，如果脚本之间有依赖关系，就使用defer属性。如果同时使用async和defer属性，后者不起作用，浏览器行为由async属性决定。

对于async标记，浏览器的解析过程是这样的：

　　1、浏览器开始解析HTML网页；
　　2、解析过程中，发现带有async属性的script标签；
　　3、浏览器继续往下解析HTML网页，同时并行下载script标签中的外部脚本；
　　4、脚本下载完成，浏览器暂停解析HTML网页，开始执行下载的脚本；
　　5、脚本执行完毕，浏览器恢复解析HTML网页。

对于defer标记，浏览器的解析过程是这样的：

　　1、浏览器开始解析HTML网页；
　　2、解析过程中，发现带有defer属性的script标签；
　　3、浏览器继续往下解析HTML网页，同时并行下载script标签中的外部脚本；
　　4、浏览器完成解析HTML网页，此时再执行下载的脚本。

　　由于使用了async或defer的script会放在header中，而header又会存在外链css，那么二者有顺序要求吗？

　　最后，其实js的执行是依赖css样式的。即只有css样式全部下载完成后才会执行js。因为如果脚本的内容是获取元素的样式，宽高等CSS控制的属性，浏览器是需要计算的，也就是依赖于CSS。浏览器无法感知脚本内容到底是什么，为避免样式获取错误，因而只好等前面所有的样式下载完后，再执行JS。也就是说，如果有外链css，那么js的执行时需要等待外链css下载完。

　　根据一些网友的评论与反馈，然后查了一些资料，暂时得出的结论如下：由于现代浏览器很聪明会进行 prefetch 优化，就如 Chrome 浏览器，它会在解析 HTML 时收集外链，并在后台并行下载，由于会并行下载，那么head中外链js和css的位置其实就没有什么很大影响了。（文/Daotin）

CSS pre 标签内实现自动截断换行

hack0573 — Thu, 18 Apr 2019 15:36:10 +0000

　　我用的是“pre”标签，但是我发现用上去后有问题，它只是一行显示，如果里面的代码太长，它不会自动截断，另起一行。那么这个 .pre 应该怎么写呢？我CSS基本能看懂，但是不会写。我想到了参考 itellyou 上的，我发现它里面也是用 pre 来作为下载链接的CSS的。

　　在 Chrome 浏览器上右击“检查”，都能看到，包括它 .pre 的代码，如下：

pre {
display: block;
padding: 9.5px;
margin: 0 0 10px;
font-size: 13px;
line-height: 1.428571429;
color: #333;
word-break: break-all;
word-wrap: break-word;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
}

但是我发现按照上面的写了之后，还是不会自动截断。后来我观察到它后面还有一段：

pre {
white-space: pre-wrap;
}

这个很重要啊！！！加上之后就 OK 了，最终我的代码是这样的：

pre{display: block;word-break: break-all;word-wrap:break-word;white-space: pre-wrap;border:1px dotted #C8D8F2;font-size:12px;padding:5px;margin:2px 0 0 0;line-height: 1.428571429;border-radius: 4px;}

后面的“border-radius”很重要，有圆角效果哦！

一句话解决 WordPress CSS IE 兼容性问题

hack0573 — Wed, 13 Mar 2019 01:48:18 +0000

　　对自己的 WordPress 进行了修改优化，调整了 CSS，一切都是在 Chrome 下调试的。IE 基本上已经不太用了，直到有一次用 IE 打开网站，发现网页布局竟然是乱的，但是 Chrome 下是完好的。修改了几项 CSS 都没解决，最后居然是一行代码解决了：

<meta http-equiv="X-UA-Compatible" content="IE=11; IE=10; IE=9; IE=8; IE=7; IE=EDGE" />

　　X-UA-Compatible是自从IE8新加的一个设置，对于IE8以下的浏览器是不识别的。通过在meta中设置X-UA-Compatible的值，可以指定网页的兼容性模式设置。代码在 WordPress 中一般添加到主题 header.php 顶部。请添加在第一个 meta 元素之前，以便浏览器提前判断！

　　后来改成了：

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

　　IE = edge告诉IE使用最新的引擎渲染网页，chrome = 1则可以激活Chrome Frame。

WordPress blockquote 标签加双引号、边框、阴影等效果的CSS

hack0573 — Wed, 06 Mar 2019 08:30:35 +0000

　　其实本文跟 WordPress 没什么关系，blockquote 是一个通用的标签，也叫“块引用”。blockquote 标签内的所有内容会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。通俗来讲，就是 HTML 标签语义化的体现，意思是该标签内的内容是引用的（如名言警句、软件介绍等）而通常会有特定的前端样式。

　　如何自定义 WordPress 里的 blockquote 样式？这里提供一个比较完整的 CSS 样式，有字体、边框、背景、引号甚至阴影等效果，以此为基础，可以根据自己的需求加以修改，所以这里留一个供参考。

blockquote{
  display:block;
  background: #fff;
  padding: 15px 20px 15px 45px;
  margin: 0 0 20px;
  position: relative;
 
  /*字体*/
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1.2;
  color: #666;
  text-align: justify;
  
  /*边框 - (选项)*/
  border-left: 15px solid #c76c0c;
  border-right: 2px solid #c76c0c;
 
  /*盒子阴影 - (选项)*/
  -moz-box-shadow: 2px 2px 15px #ccc;
  -webkit-box-shadow: 2px 2px 15px #ccc;
  box-shadow: 2px 2px 15px #ccc;
}
blockquote::before{
  content: "\201C"; /*左双引号的Unicode编码*/
 
  /*字体*/
  font-family: Georgia, serif;
  font-size: 60px;
  font-weight: bold;
  color: #999;
 
  /*位置*/
  position: absolute;
  left: 10px;
  top:5px;
}
blockquote::after{
  content: ""; /*如果要显示右双引号，则写 content: "\201D"; */
}

关于文章中代码段的CSS设计

hack0573 — Wed, 02 Nov 2016 08:39:40 +0000

　　我用的是“

”标签，但是我发现用上去后有问题，它只是一行显示，如果里面的代码太长，它不会自动截断，另起一行。那么这个 .pre 应该怎么写呢？我CSS基本能看懂，但是不会写。我想到了参考 itellyou 上的，我发现它里面也是用

来作为下载链接的CSS的。

在 Chrome 浏览器上右击“检查”，都能看到，包括它 .pre 的代码，如下：

pre {
display: block;
padding: 9.5px;
margin: 0 0 10px;
font-size: 13px;
line-height: 1.428571429;
color: #333;
word-break: break-all;
word-wrap: break-word;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
}

但是我发现按照上面的写了之后，还是不会自动截断。后来我观察到它后面还有一段：

pre {
white-space: pre-wrap;
}

这个很重要啊！！！加上之后就 OK 了，最终我的代码是这样的：

pre{display: block;word-break: break-all;word-wrap:break-word;white-space: pre-wrap;border:1px dotted #C8D8F2;font-size:12px;padding:5px;margin:2px 0 0 0;line-height: 1.428571429;border-radius: 4px;}

后面的“border-radius”很重要，有圆角效果哦！

CSS-Sprite 简单使用方法 – 减少请求次数

hack0573 — Tue, 01 Mar 2016 09:31:21 +0000

　　CSS-Sprite 这个东西，知是知道的，但一直没去研究，也并不知道是怎么制作出来的。今天看到一文章，写得挺详细，看了下，搞懂了，这里记一下吧！这个应用简单说就是把多张 CSS 里面需要用的图片合并成一张，然后通过CSS来精确定位某张图片，其主要目的就是为了减少对于网站静态资源（图片）的请求次数。

　　首先要给出一个很厉害的网站，可以做到在线合并而且自动生成css样式表CSS 图片拼合生成器：http://www.cn.spritegen.website-performance.org/，进入后点 Open，选择一堆小图片，它会下方框内会自动显示，然后点“Downloads”。右下角会自动生成出那张合并后的图片和CSS，自己看下吧，原来就这么简单！

让文字左右对齐的CSS代码

hack0573 — Tue, 14 Sep 2010 02:31:29 +0000

　　我在修改网页的时候有时遇到把某块区域内的文字居设为左对齐，然而右边的文字就不齐了，不在一条竖线上了。需要在所在的CSS里加入：

text-align:justify;
text-justify:inter-ideograph;

DIV+CSS居中的方法（里面的文字不居中）

hack0573 — Thu, 19 Aug 2010 02:56:29 +0000

让div+css的div居中，而里面的文字不居中的做法：

<br />做一个测试-技术仓库<br /> body{ margin:0px; } #countainer{ margin:auto; width:600px; height:100%; background-color:#cccccc; } 技术仓库-测试页面

事实上，这里的最关键的一个点在：countainer类的属性里的“margin:auto;”这个值！

刚才测试时，发现里面的

非常重要。如果没有这句在IE浏览器里的显示还是居左的，在火狐和谷歌浏览器时的显示是正确的。加了这句后, 所有的浏览器显示都正确了。