博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
布局定位和图片属性
阅读量:6436 次
发布时间:2019-06-23

本文共 722 字,大约阅读时间需要 2 分钟。

四种定位:

  1. 固定定位fixed:脱离常规流,相对于浏览器窗口定位
  2. 相对定位relative:相对于自身定位,常规流依然保存他的位置,
  3. 相对定位absolute:相对于离自身最近的定了位的祖先定位,脱离文档流,元素变成块框可以设置高度,宽度。
  4. 粘连定位sticky:当四条边都在矿口内时,为sticky默认,当元素任意一条边将要离开窗口时,为fixed,会根据窗口在包含块中移动,它自身的布局不能离开其包含块(就是父元素的content-box)。应用:qq好友列表置顶

伪元素的基本使用

每一个非自闭和标签都存在一前一后个伪元素 div::before;div::after,他们在css样式中通过content:'内容'出现,为一个行内元素,是一个元素的一个和最后一个元素。

不可以被hover,如果需要hover时应该选中其父元素在在选这个伪元素。div:hover::before{}。

例子:一般一些小的样式会有用到:

特殊的图片属性

  • background-size:cover(图片把元素盖住)contain(元素把图片盖住)与img标签有个类似的新属性object-fit:contain类似
  • bacakground-attchment:scroll/fixed/local,图片是否随着元素移动,可以把俩张图片拼接在一起对比。
  • -webkit-background-clip:text;通过文字看到背景图片的应用
  • transition:渐变属性值:时间,速度
  • index:图片的z轴大小,只相对于定位的父元素上面,和没有定位时

转载于:https://juejin.im/post/5bf42121f265da61380ed71b

你可能感兴趣的文章
主流or消亡?2016年大数据发展将何去何从
查看>>
《大数据分析原理与实践》一一第3章 关联分析模型
查看>>
《挖掘管理价值:企业软件项目管理实战》一2.4 软件设计过程
查看>>
Capybara 2.14.1 发布,Web 应用验收测试框架
查看>>
ExcelJS —— Node 的 Excel 读写扩展模块2
查看>>
《数字短片创作(修订版)》——第一部分 剧本创作 第1章 数字短片创意技法 剧本创作的构思...
查看>>
《Python数据挖掘:概念、方法与实践》——1.5节小结
查看>>
《Adobe Illustrator CC 2014中文版经典教程(彩色版)》—第1课1.4节修改图稿的视图...
查看>>
MIT 学生挑战新泽西索取挖矿程序源代码的要求
查看>>
mozjpeg:JPEG图片压缩5%,获Facebook支持
查看>>
聊聊Service(一)
查看>>
即将到来的 Android N 将具备这些新特性
查看>>
《善用佳软:高效能人士的软件应用之道》一2.6 小工具之计算器
查看>>
《C语言编程初学者指南》一1.9 本章小结
查看>>
《Spark大数据分析:核心概念、技术及实践》一3.5 API
查看>>
《“笨办法”学Python(第3版)》——习题3 数字和数学计算
查看>>
《无人机DIY》——4.2 项目1:MakerBeam机身
查看>>
阿里数据库内核月报:2015年11月
查看>>
swfheader 0.10 Released(已更正下载地址)
查看>>
SQL Server使用视图做权限控制
查看>>