css小知识

CSS设置缩进、字体间距、行间距(行高)

1. 缩进 text-index

text-index:20px; 段落开头缩进了20px;主要对设置的标签的开头缩进;

小技巧:给页面添加logo利用h标签,输入文字并且对 text-index 给其设置一个较大的负值,可达到隐藏文本的效果

2. 字体间距 letter-spacing

letter-spacing:3px;

3. 行间距(行高)line-height

设置行间距及设置行高,line-height;注意单位

line-height:27;line-height:27px;是2个概念

CSS的几种隐藏方式

1. opacity

通过设置透明度opacity:0;可以达到隐藏的效果,但是会出现占位的情况,被隐藏的元素依然会对我们的网页布局起作用,用户可以与它交互;

2. Visibility

设置 visibility:hidden;也可以达到隐藏的效果,同样也会出现占位的情况,被隐藏的元素依然会对我们的网页布局起作用,与 opacity 唯一不同的是它不会响应任何用户交互;

3. display

设置display:none;这个就是真正意义上的隐藏了,不会出现占位的情况,被隐藏的元素不占据任何空间,何对该元素直接进行用户交互操作都不可能生效;;

注:这里的占位和不占位的意思是:

  • 占位:当前元素还在这个位置,如果你想点击操作这个标签覆盖的元素,就会发现无法操作;
  • 不占位:当前元素已经不在这个位置,此时如果你点击操作这个标签覆盖的元素,就可以操作;这种方式产生的效果就像元素完全不存在。
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,863评论 1 92
  • position不同值和区别 absolute: 生成绝对定位的元素,相对于 static 定位以外的第一个父元素...
    zy懒人漫游阅读 143评论 0 0
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,675评论 32 459
  • 前言:放手也是种了不起的爱,每个人都有自己的路要走。 带女儿去领居家玩,他们家有两个小朋友。 一个刚3岁,另一个1...
    萌妈育儿记阅读 469评论 2 2
  • 改变就是一个决定,可是我们为什么要做一个改变的决定呢?人都爱待在舒适区,习惯让多少人就这么平平淡淡过完一生,你不主...
    赵远东阅读 123评论 0 2