CSS高级技巧汇总

CSS不仅可以静态地修饰网页，还可以与各种脚本语言结合，动态地对网页各元素进行格式化。以下是一些CSS的高级技巧，由yjbys小编为大家分析：

使用:not()在菜单上应用/取消应用边框

首先为每个菜单项添加边框：

css

Copy code

.navli {

border-right: 1px solid #666;

}

然后移除最后一个元素的边框：

css

Copy code

.navli:last-child {

border-right: none;

}

或者直接使用:not()伪类来应用元素：

css

Copy code

.navli:not(:last-child) {

border-right: 1px solid #666;

}

这样的代码更清晰、易读、易于理解。

当然，如果新元素有兄弟元素，也可以使用通用的兄弟选择符（~）：

css

Copy code

.navli:first-child ~ li {

border-left: 1px solid #666;

}

给body添加行高

无需分别为每个

、 等元素添加行高，只需添加到 body：

css

Copy code

body {

line-height: 1;

}

这样文本元素就可以从 body 继承。

所有一切都垂直居中

要将所有元素垂直居中，非常简单：

css

Copy code

html, body {

height: 100%;

margin: 0;

}

body {

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

display: -webkit-flex;

display: flex;

}

注意：在IE11中要小心使用 flexbox。

逗号分隔的列表

使 HTML 列表项看起来像真正的、逗号分隔的列表：

css

Copy code

ul > li:not(:last-child)::after {

content:",";

}

对最后一个列表项使用:not()伪类。

使用负的nth-child选择项目

在 CSS 中使用负的 nth-child 选择项目1到项目n：

css

Copy code

li {

display: none;

}

li:nth-child(-n+3) {

display: block;

}

非常简单。

对图标使用SVG

对图标使用 SVG 是理所当然的：

css

Copy code

.logo {

background: url("logo.svg");

}

SVG对所有的分辨率类型都具有良好的扩展*，并支持所有浏览器回溯到IE9。这样可以避免使用 .png、.jpg 或 .gif 文件。

优化显示文本

有时字体在所有设备上都不能获得最佳显示，因此可以让设备的浏览器来帮助你：

css

Copy code

html {

-moz-osx-font-smoothing: grayscale;

-webkit-font-smoothing: antialiased;

text-rendering: optimizeLegibility;

}

注意：请谨慎使用 optimizeLegibility。此外，IE/Edge 不支持 text-rendering。

对纯CSS滑块使用max-height

使用 max-height 和 overflow: hidden 来实现纯CSS的滑块：

css

Copy code

.sliderul {

max-height: 0;

overflow: hidden;

}

.slider:hover ul {

max-height: 1000px;

transition: 0.3s ease;

}

继承box-sizing

让 box-sizing 继承于 html：

css

Copy code

html {

box-sizing: border-box;

}

*, *:before, *:after {

box-sizing: inherit;

}

这样在插件或者调整其他组件的时候更容易改变 box-sizing。

表格单元格等宽

表格工作起来很麻烦，因此务必尽量使用 table-layout: fixed 保持单元格的等宽：

css

Copy code

.calendar {

table-layout: fixed;

}

用Flexbox摆脱外边距的各种hack

当需要列分隔符时，通过 flexbox 的 justify-content: space-between 属*，你就可以摆脱 nth-、first- 和 last-child 的hack：

css

Copy code

.list {

display: flex;

justify-content: space-between;

}

.list.person {

flex-basis: 23%;

}

现在，列表分隔符就会在均匀间隔的位置出现。

使用属*选择器用于空链接

当 元素没有文本值，但 href 属*有链接时显示链接：

css

Copy code

a[href^="http"]:empty::before {

content: attr(href);

}

相当方便。

这些高级技巧在Chrome、Firefox、Safari、Edge的当前版本，以及IE11中都能有效工作。

第2篇：CSS高级布局技巧

IE8逐渐退出舞台，很多高级的CSS特*都已被浏览器原生支持，那么CSS怎么布局?有哪些技巧呢?下面yjbys小编为大家分享css样式布局技巧如下：

用empty区分空元素

兼容*：不支持IE8

假如我们有以上列表：

<p>a</p>

<p>b</p>

<p></p>

我们希望可以对空元素和非空元素区别处理，那么有两种方案。

用:empty选择空元素：

.item:empty{

display:none;

}

或者用:not(:empty)选择非空元素：

.item:not(:empty){

border:1pxsolid#ccc;

}

用:*-Of-Type选择元素

兼容*：不支持IE8

举例说明。

给第一个p段落加粗：

p:first-of-type{

font-weight:bold;

}

给最后一个img加边框：

img:last-of-type{

border:10pxsolid#ccc;

}

给无相连的blockquote加样式：

blockquote:only-of-type{

border-left:5pxsolid#ccc;

padding-left:2em;

}

让奇数列的p段落先死红*：

p:nth-of-type(even){

color:red;

}

此外，:nth-of-type还可以有其他类型的参数：

:nth-of-type(even)

:nth-of-type(3)

:nth-of-type(3n)

:nth-of-type(4n+3)

用calc做流式布局

兼容*：不支持IE8

左中右的流式布局：

nav{

position:fixed;

left:0;

top:0;

width:5rem;

height:100%;

}

aside{

position:fixed;

right:0;

top:0;

width:20rem;

height:100%;

}

main{

margin-left:5rem;

width:calc(100%-25rem);

}

用vw和vh做全屏滚动效果

兼容*：不支持IE8

vw和vh是相对于viewport而言的，所以不会随内容和布局的变化而变。

section{

width:100vw;

height:100vh;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

background-size:cover;

background-repeat:no-repeat;

background-attachment:fixed;

}

section:nth-of-type(1){

background-image:url('unsplash.it/1024/683?image=1068');

}

section:nth-of-type(2){

background-image:url('unsplash.it/1024/683?image=1073');

}

section:nth-of-type(3){

background-image:url('unsplash.it/1024/683?image=1047');

}

section:nth-of-type(4){

background-image:url('unsplash.it/1024/683?image=1032');

}

body{

margin:0;

}

p{

color:#fff;

font-size:100px;

font-family:monospace;

}

用unset做CSSReset

兼容*：不支持IE

body{

color:red;

}

button{

color:white;

border:1pxsolid#ccc;

}

sectionbutton{

color:unset;

}

用column做响应式的列布局

兼容*：不支持IE9

nav{

column-count:4;

column-width:150px;

column-gap:3rem;

column-rule:1pxdashed#ccc;

column-fill:auto;

}

h2{

column-span:all;

}

第3篇：css 书写技巧 CSS 技巧教程简介

tuts带来的5个css书写技巧，简单翻译一下它的中心思想。

1.CSSReset/重置

你也许需要先了解什么是css重置。然后怎么样写css重置呢。

你可以copyEricMeyerReset,YUIReset或其它cssreset,但你接下来应该根据你的项目改成你自己的reset.

不要使用*{margin:0;padding:0;}。我个人很爱用，原作者提到使用这句并不适用一些元素比如单选按钮。不过俺博客里面也没有单选按钮，如果有，又重新给单选按钮重设就好了嘛。

2.按字母顺序来排列css

不按字母顺序排的

div#headerh1{

z-index:101;

color:#000;

position:relative;

line-height:24px;

margin-right:48px;

border-bottom:1pxsolid#dedede;

font-size:18px;

}

按字母顺序排的

div#headerh1{

border-bottom:1pxsolid#dedede;

color:#000;

font-size:18px;

line-height:24px;

margin-right:48px;

position:relative;

z-index:101;

}

理由是这样可以更好的找到某个属*。个人觉得还好，差别也不是太大。不过也许会适合你。

3.更好的组织css结构

使用css注释来分给css分组，这样结构明了，也有利于协同设计。

xxxxxxx{xxxxx}

xxxxx{xxxxx}

xxxxxxx{xxxxx}

xxxxx{xxxxx}

4.保持一致*

不要无意义的去讨论到底一个选择器的所有属*写在一行，还是每个属*写一行比较好。你自己觉得ok就好。

iv#header{float:left;width:100%;}

div#headerdiv.column{

border-right:1pxsolid#ccc;

float:rightright;

margin-right:50px;

padding:10px;

width:300px;

}

div#headerh1{float:left;position:relative;width:250px;}

比如我个人就喜欢写在一行，因为每排写一行会让整个文档感觉太长了，找起来不方便。如果你喜欢写一行，但是发给team的另一个，他却喜欢每排一行，那怎么办？其实很简单，把css拿去w3c验证，它会有一份结果，会自动转换成每排一行。

5.先标记后css

这个我没有太看懂。大概理解是对html的标记弄好后再写css会比较不容易出错。比如我写一个页面，先写一个最基本的标记结构

!<--endfooter--="">

然后就是尽量善用子选择器，而不是一要给哪个元素进行样式化，就给它添加个选择器。