随着 IE8 逐渐退出舞台,很多高级的 CSS 特性都已被浏览器原生支持,再不学下就要过时了。

用 :empty 区分空元素

兼容性:不支持 IE8

/*假如我们有以上列表:*/

<div class="item">a</div>
<div class="item">b</div>
<div class="item"></div> 我们希望可以对空元素和非空元素区别处理,那么有两种方案。 /* 用 :empty 选择空元素:*/
.item:empty {
display: none;
} /*或者用 :not(:empty) 选择非空元素:*/ .item:not(:empty) {
border: 1px solid #ccc;
/* ... */
}

用 :*-Of-Type 选择元素

兼容性:不支持 IE8

/* 给第一个 p 段落加粗:*/
p:first-of-type {
font-weight: bold;
}
/* 给最后一个 img 加边框:*/
img:last-of-type {
border: 10px solid #ccc;
} /* 给无相连的 blockquote 加样式:*/
blockquote:only-of-type {
border-left: 5px solid #ccc;
padding-left: 2em;
} /* 让奇数列的 p 段落显示红色:*/
p:nth-of-type(even) {
color: red;
} 此外,:nth-of-type 还可以有其他类型的参数: /* 偶数个 */
:nth-of-type(even) /* only 第三个 */
:nth-of-type(3) /* 每第三个 */
:nth-of-type(3n) /* 每第四加三个,即 3, 7, 11, ... */
:nth-of-type(4n+3)

用 calc 做流式布局

兼容性:不支持 IE8

/* 左中右的流式布局:*/

nav {
position: fixed;
left:;
top:;
width: 5rem;
height: 100%;
} side {
position: fixed;
right:;
top:;
width: 20rem;
height: 100%;
} main {
margin-left: 5rem;
width: calc(100% - 25rem);
}

用 vw 和 vh 做全屏滚动效果

兼容性:不支持 IE8

查看Demo

/* 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('https://unsplash.it/1024/683?image=1068');
}
section:nth-of-type(2) {
background-image: url('https://unsplash.it/1024/683?image=1073');
}
section:nth-of-type(3) {
background-image: url('https://unsplash.it/1024/683?image=1047');
}
section:nth-of-type(4) {
background-image: url('https://unsplash.it/1024/683?image=1032');
} body {
margin:;
}
p {
color: #fff;
font-size: 100px;
font-family: monospace;
}

用 unset 做 CSS Reset

兼容性:不支持 IE

查看Demo

body {
color: red;
}
button {
color: white;
border: 1px solid #ccc;
} /* 取消 section 中 button 的 color 设置 */
section button {
color: unset;
}

用 column 做响应式的列布局

兼容性:不支持 IE9

查看Demo

nav {
column-count:;
column-width: 150px;
column-gap: 3rem;
column-rule: 1px dashed #ccc;
column-fill: auto;
} h2 {
column-span: all;
}

CSS 高级布局技巧的更多相关文章

  1. 总结与学习DIV+CSS网页布局技巧

    以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...

  2. CSS高级布局

    float属性 基本浮动规则 先来了解一下block元素和inline元素在文档流中的排列方式. block元素通常被现实为独立的一块,独占一行,多个block元素会各自新起一行,默认block元素宽 ...

  3. 详解 CSS 居中布局技巧

    水平居中元素: 通用方法,元素的宽高未知 方式一:CSS3 transform .parent { position: relative; } .child { position: absolute; ...

  4. 详解CSS居中布局技巧

    本文转自:https://zhuanlan.zhihu.com/p/25068655#showWechatShareTip一.水平居中元素: 1.通用方法,元素的宽高未知方式一:CSS3 transf ...

  5. 20 个 CSS高级样式技巧汇总

    使用技巧会让人变的越来越懒,没错,我就是想让你变懒.下面是我收集的CSS高级技巧,希望你懒出境界. 1. 黑白图像 这段代码会让你的彩色照片显示为黑白照片,是不是很酷? img.desaturate ...

  6. CSS常用布局技巧 实例

    末尾用省略号! white-space: nowrap; overflow: hidden; text-overflow: ellipsis; ######################## 两个i ...

  7. DIV+CSS一些小小的技巧

    DIV+CSS网页布局技巧实例1:设置网页整体居中的代码 以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实 ...

  8. DIV+CSS常用网页布局技巧!

    以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...

  9. CSS之定位布局(position,定位布局技巧)

    css之定位 1.什么是定位:css中的position属性,position有四个值:absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设 ...

随机推荐

  1. python中的ValueError

    在初学时候,会遇到这种错误,修改了代码,一一比对了代码,发现代码,没有错误,可是就是运行不了. 我们先从错误的语句来入手!(这显示了英语很重要)   ValueError: need more tha ...

  2. js异步编程技巧一

    异步回调是js的一大特性,理解好用好这个特性可以写出很高质量的代码.分享一些实际用的一些异步编程技巧. 1.我们有些应用环境是需要等待两个http请求或IO操作返回后进行后续逻辑的处理.而这种情况使用 ...

  3. android socket 线程连接openwrt与arduino单片机串口双向通信

    package zcd.netanything; import java.io.BufferedReader; import java.io.InputStreamReader; import jav ...

  4. iOS开发中的这些权限,你搞懂了吗?

    APP开发避免不开系统权限的问题,如何在APP以更加友好的方式向用户展示系统权限,似乎也是开发过程中值得深思的一件事. 那如何提高APP获取iOS系统权限的通过率呢?有以下几种方式:1.在用户打开AP ...

  5. kettle中全局变量的设置

    设置全局变量. 找到.properties文件: 在文件中设置值: 在kettle中新建一个job(不用做任何设置): 转换中获取便元的设置: 重启kettle的执行结果:

  6. 将 instance 连接到 flat_net - 每天5分钟玩转 OpenStack(88)

    上一节我们创建了 "flat_net",本节将在此网络中部署 instance 并验证连通性. launch 新的 instance “cirros-vm1”,选择网络 falt_ ...

  7. [LeetCode] Frog Jump 青蛙过河

    A frog is crossing a river. The river is divided into x units and at each unit there may or may not ...

  8. 分分钟带你玩转 Web Services

    当大型需求被数个公司分割开来,各公司系统相互交换数据的问题就会接踵而来. 毕竟是多家不同的公司的产品,研发开发语言.采用技术框架基本上是百花齐放. 怎样让自家系统提供的服务具有跨平台.跨语言.跨各种防 ...

  9. 「post中文参数问题」以及「验证码自动识别备忘」

    前言 之前搞过几次模拟登录,都是模拟 post 后取到 cookie,之后便能用这个 cookie 愉快玩耍.这次碰到了验证码,其实只需手动登录一次,手动取到 cookie 后也能玩耍,不过 cook ...

  10. Android 引导页公共方法LeaderPager

    SimpAndroidFarme是近期脑子突然发热想做的android快速开发的框架,目标是模块化 常用的控件,方便新手学习和使用.也欢迎老鸟来一起充实项目:项目地址 引导页是我们开发app很常用的功 ...