CSS学习笔记[4]——CSS常见样式[下]

背景

  • background
  • background-attachment;背景图像是否固定或者随着页面的其余部分滚动
  • background-color
  • background-image
  • background-position
  • background-repeat
  • background-size
background-size: cover | contain

http://js.jirengu.com/jaboxuwora/3/edit

CSS Sprite(CSS雪碧图)

  • 将不同的图片/图标合并在一张图上
  • 使用CSS Sprite可以减少网络请求,提高网页加载性能

隐藏or透明

  • opacity: 0; 透明度为0,整体
  • visibility:hidden;
  • display:none; 消失,不用占位置,脱离普通流
  • background-color: rgba(0, 0, 0, 0.1);只是背景色透明

inline-block

(inline的只有左右magin,padding有效,上下无效)

  • 既成现inline特性,不占据一整行,宽度由内容宽度决定
  • 又呈现block特性,可以设置宽高,内外边距
  • 缝隙问题(inline产生)

line-height

  • 属性设置行间的距离(行高)
描述
normal 默认。设置合理的行间距。
number 设置数字,此数字会与当前的字体尺寸相乘来设置行间距。
length 设置固定的行间距。如20px
% 基于当前字体尺寸的百分比行间距。
inherit 规定应该从父元素继承 line-height 属性的值。
  • line-height: 数字/百分比 区别
    line-height可以继承
    数字的时候会将倍数继承
    百分比的时候会继承父元素计算后的行高值
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,315评论 1 92
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 17,003评论 32 459
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 2,249评论 1 4
  • Annotation是JDK发展的一个重要技术,现在基本上Java开发使用注解非常普遍。 准确覆写:@Overri...
    小孩真笨阅读 219评论 0 0
  • 昨天,去填了一张表,一张干部登记表,好玩得很,还干部呢?干什么的部?(王小波)好玩得很。哈哈,好玩得很! 一路上只...
    庄户人家阅读 251评论 0 1

友情链接更多精彩内容