UDN-企业互联网技术人气社区

板块导航

浏览  : 1083
回复  : 0

[干货] CSS高级布局样式技巧

[复制链接]
开花包的头像 楼主
发表于 2017-1-1 19:56:53 | 显示全部楼层 |阅读模式
  一、empty空元素的样式

  1、:empty { } 伪类选择符empty

  2、:not(:empty) { } 伪类选择符not

  空元素样式显示

  二、xx_-of-type伪类选择符

  1、first-of-type 匹配同类型中的第一个同级兄弟元素.

  2、last-of-type 匹配同类型中的最后一个同级兄弟元素.

  3、nth-of-type(n) 匹配同类型中的第n个同级兄弟元素.

  ...3, 3n, odd, 2n+1...

  4、only-of-type

  一个层级只能一个该类型, 否则样式无效

  多层级有效 xx_-of-type

  三、calc函数值来做流式布局

  width: calc(100% - 15rem);

  calc函数

  四、vh和vw实现纯css动态大小

  1、vh 相对于视口的高度。视口被均分为100单位的vh

  2、vw 相对于视口的宽度。视口被均分为100单位的vw

  vh和vw

  五、vh和vw的全屏滚动网页应用

  网页应用

  六、unset做CSS重置

  重置成上一层级样式,上一层级没设置该样式,Reset到默认样式

  unset

  七、background-blend-mode 混合模式

  八、column列做响应布局

  1.   nav {

  2.   /* column-count: 4;

  3.   column-width: 150px; */

  4.   columns: 4 150px;

  5.   column-gap: 2rem;

  6.   column-rule: 1px dashed #ccc;

  7.   column-fill: auto;

  8.   }
复制代码


  column列做响应布局

  原教程地址

原文作者:佚名  来源:开发者头条

相关帖子

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部