美文网首页h5
css小知识

css小知识

作者: 白的吓人 | 来源:发表于2018-05-02 16:48 被阅读0次

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;这个就是真正意义上的隐藏了,不会出现占位的情况,被隐藏的元素不占据任何空间,何对该元素直接进行用户交互操作都不可能生效;;

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

  • 占位:当前元素还在这个位置,如果你想点击操作这个标签覆盖的元素,就会发现无法操作;
  • 不占位:当前元素已经不在这个位置,此时如果你点击操作这个标签覆盖的元素,就可以操作;这种方式产生的效果就像元素完全不存在。

相关文章

  • css小知识

    CSS设置缩进、字体间距、行间距(行高) 1. 缩进 text-index text-index:20px; 段落...

  • CSS小知识

    快捷键 1、快速创建多个div(或其标签):div*n + tab 多个带名为xx的class的div:div.x...

  • css小知识

    前言   将近一个月没更新过博客了,最近在忙一个项目,这个东西随说是简单,奈何甲方志存高远,硬是想让我们把一个子虚...

  • CSS 小知识

    写在前面的,整理了自己认为需要理解的内容。需要持续更新... CSS 盒子模型,box-sizing 属性的理解 ...

  • css模糊小知识

    ,、空格、>、~在css中的使用区分

  • 初入小程序

    1,需求知识(HTML,css,js) 小程序中的wxml,wxss与前端中的HTML,css基本相同,js完...

  • [CSS学习笔记] 高度自适应占位小技巧

    CSS 中padding/margin的小知识 今天看到几篇关于css的一些运用的文章,讲的是当padding/m...

  • css元素背景小知识

    1,内容区 content 通过width和height两个属性可以设置内容区的大 小。 width和hei...

  • css基础小知识笔记

    1\css规定的定位基值有三种:标准文档流、浮动及定位 2、w3c标准:万维网制定的一系列标准。{ 结构化标准语言...

  • css小知识点

    position不同值和区别 absolute: 生成绝对定位的元素,相对于 static 定位以外的第一个父元素...

网友评论

    本文标题:css小知识

    本文链接:https://www.haomeiwen.com/subject/hqycrftx.html