CSS Layout 布局

CSS 炫酷的水平分隔线

这里介绍一个更加炫酷的 CSS 两边横线水平分割线效果，来自 CodePen 的 benknight

CSS 控制长文本自动折行

通常用 word-wrap: break-word;、word-break: break-all;、table-layout: fixed; 控制长文本，表格 td 用 table-layout: fixed，更详细的请看下面：

CSS 删除线实现方法详解

在CSS中为文本添加删除线，通常使用 text-decoration 属性，并设置其值为 line-through：

CSS 简写背景语法

要让背景图片适应所有屏幕大小且不重复，可以使用以下 CSS 代码：

CSS 隐藏高德地图、百度地图、腾讯地图的 Logo

可以通过 CSS 样式，来实现高德地图 AMap、百度地图 Baidu Map、腾讯地图、MapBox ... 等的 LOGO 隐藏。以下是几种方法：

CSS inline-block 布局

现在，你也可以使用 inline-block 来布局。

CSS 盒模型

Box Model，在 CSS 中，box model 这一术语是用来设计和布局时使用。CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充，和实际内容。

CSS float

另一个布局中常用的 CSS 属性是 float。Float 可用于实现文字环绕图片，以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

CSS position

为了制作更多复杂的布局，我们需要讨论下 position 属性。它有一大堆的值，名字还都特抽象，别提有多难记了。让我们先一个个的过一遍，包括：static、relative、fixed、absolute 和 sticky。

CSS 如何让滚动条在 div 上方

当使用 overflow-x: scroll 的时候。需要水平滚动条不仅出现在底部，还能出现在顶部，或者同时显示在顶部和底部。

li 元素列表样式改为正方形方块

在 CSS 中，可以通过设置 list-style-type 属性来改变列表项 <li> 前面的标记样式。如果想要将列表项前面的点（默认是圆点）改为正方形，可以使用以下 CSS 代码：

CSS 中字母竖向显示

在 CSS中，如果想要将英文字母竖着显示，可以使用 writing-mode 属性。

CSS 单行不折行，多余的省略号

CSS中要实现单行文本不折行并且在文本溢出时显示省略号的效果，可以使用以下 CSS 属性

text-align:justify 两端对齐失效原因和解决办法

text-align CSS 属性设置块元素或者单元格框的行内内容的水平对齐。这意味着其效果和 vertical-align 类似，但是是水平方向的。但注意：justify 文字向两侧对齐，仅对多行文本有效，将内容隔开，使其左右边缘与行框的左右边缘对齐，对最后一行无效。

SVG 设置颜色、margin和 padding

SVG Scalable Vector Graphics 原始文件，可以通过下面方式设置 SVG 的 margin 和 padding，以及颜色。

CSS 跨平台中文字体解决方案

Fonts.css 一直以来跨平台的中文字体 CSS 设置都是一件让人很头疼的事情，这个库打包了一些常见字体的名字，希望能覆盖 Windows、Mac 以及 Linux 的常见字体，方便引用。在 font-family 直接支持宋、楷、黑和仿宋之前，我觉得这样一种解决方案依然还是有其存在价值的。