CSS 高级布局技巧
随着 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
/* 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
body {
color: red;
}
button {
color: white;
border: 1px solid #ccc;
} /* 取消 section 中 button 的 color 设置 */
section button {
color: unset;
}
用 column 做响应式的列布局
兼容性:不支持 IE9
nav {
column-count:;
column-width: 150px;
column-gap: 3rem;
column-rule: 1px dashed #ccc;
column-fill: auto;
} h2 {
column-span: all;
}
CSS 高级布局技巧的更多相关文章
- 总结与学习DIV+CSS网页布局技巧
以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...
- CSS高级布局
float属性 基本浮动规则 先来了解一下block元素和inline元素在文档流中的排列方式. block元素通常被现实为独立的一块,独占一行,多个block元素会各自新起一行,默认block元素宽 ...
- 详解 CSS 居中布局技巧
水平居中元素: 通用方法,元素的宽高未知 方式一:CSS3 transform .parent { position: relative; } .child { position: absolute; ...
- 详解CSS居中布局技巧
本文转自:https://zhuanlan.zhihu.com/p/25068655#showWechatShareTip一.水平居中元素: 1.通用方法,元素的宽高未知方式一:CSS3 transf ...
- 20 个 CSS高级样式技巧汇总
使用技巧会让人变的越来越懒,没错,我就是想让你变懒.下面是我收集的CSS高级技巧,希望你懒出境界. 1. 黑白图像 这段代码会让你的彩色照片显示为黑白照片,是不是很酷? img.desaturate ...
- CSS常用布局技巧 实例
末尾用省略号! white-space: nowrap; overflow: hidden; text-overflow: ellipsis; ######################## 两个i ...
- DIV+CSS一些小小的技巧
DIV+CSS网页布局技巧实例1:设置网页整体居中的代码 以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实 ...
- DIV+CSS常用网页布局技巧!
以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...
- CSS之定位布局(position,定位布局技巧)
css之定位 1.什么是定位:css中的position属性,position有四个值:absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设 ...
随机推荐
- python中的ValueError
在初学时候,会遇到这种错误,修改了代码,一一比对了代码,发现代码,没有错误,可是就是运行不了. 我们先从错误的语句来入手!(这显示了英语很重要) ValueError: need more tha ...
- js异步编程技巧一
异步回调是js的一大特性,理解好用好这个特性可以写出很高质量的代码.分享一些实际用的一些异步编程技巧. 1.我们有些应用环境是需要等待两个http请求或IO操作返回后进行后续逻辑的处理.而这种情况使用 ...
- android socket 线程连接openwrt与arduino单片机串口双向通信
package zcd.netanything; import java.io.BufferedReader; import java.io.InputStreamReader; import jav ...
- iOS开发中的这些权限,你搞懂了吗?
APP开发避免不开系统权限的问题,如何在APP以更加友好的方式向用户展示系统权限,似乎也是开发过程中值得深思的一件事. 那如何提高APP获取iOS系统权限的通过率呢?有以下几种方式:1.在用户打开AP ...
- kettle中全局变量的设置
设置全局变量. 找到.properties文件: 在文件中设置值: 在kettle中新建一个job(不用做任何设置): 转换中获取便元的设置: 重启kettle的执行结果:
- 将 instance 连接到 flat_net - 每天5分钟玩转 OpenStack(88)
上一节我们创建了 "flat_net",本节将在此网络中部署 instance 并验证连通性. launch 新的 instance “cirros-vm1”,选择网络 falt_ ...
- [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 ...
- 分分钟带你玩转 Web Services
当大型需求被数个公司分割开来,各公司系统相互交换数据的问题就会接踵而来. 毕竟是多家不同的公司的产品,研发开发语言.采用技术框架基本上是百花齐放. 怎样让自家系统提供的服务具有跨平台.跨语言.跨各种防 ...
- 「post中文参数问题」以及「验证码自动识别备忘」
前言 之前搞过几次模拟登录,都是模拟 post 后取到 cookie,之后便能用这个 cookie 愉快玩耍.这次碰到了验证码,其实只需手动登录一次,手动取到 cookie 后也能玩耍,不过 cook ...
- Android 引导页公共方法LeaderPager
SimpAndroidFarme是近期脑子突然发热想做的android快速开发的框架,目标是模块化 常用的控件,方便新手学习和使用.也欢迎老鸟来一起充实项目:项目地址 引导页是我们开发app很常用的功 ...