一、CSS元素隐藏 在CSS中，让元素隐藏（指屏幕范围内肉眼不可见）的方法很多，有的占据空间，有的不占据空间；有的可以响应点击，有的不能响应点击。后宫选秀——一个一个看。...空间占据 visibility:hidden占据空间 回流与渲染 株连性 display:none隐藏产生reflow和repaint(回流与重绘)，而visibility:hidden没有这个影响前端性能的问题...三、height:0和overflow:hidden的组合 overflow:hidden用中文理解就是“溢出隐藏”，也就是盒子以外的内容都咔嚓掉不可见的。...加上height:0，只要是一般的非inline水平元素，则元素内部所有子孙都应该是不可见的 height:0和overflow:hidden组合隐藏“失效”的条件如下：祖先元素没有position:relative...position属性(static除外)的祖先元素（一直到body）是overflow: hidden元素祖先元素的时候，则不隐藏；否则，隐藏。
color:文本颜色 font-family:字体 font-size:字体大小 font-weight:bold;文字加粗 font-style:italic；斜体 text-indent:60px;...首行缩进 text-align:center;水平对齐方式 line-height:100px;行高 text-decoration:underline/none； 如果想要段落的一行高一点，但是文字又垂直居中显示
文本属性 属性 表示 注意点 color 文字颜色 通常用16进制 text-align 文本对齐 可以设定水平的对齐方式 text-indent 文本缩进 通常段落首行缩进2个字的距离 text-indent...：2em； text-decoration 文本修饰 添加下划线 underline 取消下划线 none line-height 行高 字的大小加上上下的空白等于行高 body{
04-CSS文本属性 CSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐方式、文本装饰、文本缩进、行间距等。...4.1文本颜色 color属性用于定义文本的颜色 表示方式 属性值 预定义的颜色值 red，green，blue等 16进制（最常用） #FF0000，#FF6600等 rgb值 rgb(255,0,0...)等 4.2对齐文本 text-align属性用于设置元素内文本内容的水平对齐方式。...属性值有left（默认值，左对齐）、center（居中对齐）、right（右对齐）。 4.3装饰文本 text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。...4.4文本缩进 text-indent属性用来指定文本第一行的缩进，通常是将段落的首行缩进。通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
文本属性 color 设置文本颜色； div span{ color: red; } 浏览器显示 text-align 设置元素水平对齐方式； div...{text-align: center;} 浏览器显示看上图 text-indent 设置首行文本的缩进； div{ text-align: left;...line-height 设置文本的行高； div{ text-align: left; text-indent:20px; line-height...以上为常见的文本属性，更多的文本属性可以打开W3school进行详细学习。...注意：有部分属性不是所有的浏览器内核都能识别的了的，这里可以通过加上浏览器前缀来解决： IE浏览器是Trident内核，加前缀：-ms- Chrome浏览器是Webkit内核，加前缀：-webkit-
参考链接： CSS3-文字 在CSS中，使用 text-decoration属性，可以在文本上方、下方、或中间添加装饰线，可选值为 none | underline | overline | line-through...装饰线的颜色与文本的颜色相同。 默认情况下，文本都是没有装饰线的，但超链接是个例外，它默认就带有下划线。...当然，可以把 text-decoration属性的值设置为 none，去掉超链接的下划线，当鼠标悬停后，再添加下划线，来提醒用户当前文本为链接文本。...如： a { text-decoration: none;}a:hover { text-decoration: underline;} 文本装饰线的另一个常见用法，就是修订文本，在被删除文本上增加删除线...其实，还可以使用 text-decoration属性，为文本同时添加多条装饰线。
图片 我在 JavaScript 鼠标悬停图片，显示隐藏文本 这篇博文当中实现了同样的效果，只不过是通过 JS 来实现的，但其实，通过 CSS 动画也能实现同样的效果，直接看代码吧 HTML 结构如下...[](image/n1.jpg) 世界上最好的年糕 多熬粥少熬夜，多吃鸡腿少吃亏... CSS 样式如下 #Main { width: 600px; margin: 50px auto; height: 400px...span { left:0px; } .con:hover span h1 { left: 0px; } .con:hover span p { left: 0px; } 本篇的内容到这里就全部结束了...，源码我已经发到了 GitHub Source_code 上了，有需要的同学可自行下载，预览效果可点击 effect
元素的显示与隐藏 display属性 display：none 此元素不会被显示。 display：block 此元素将显示为块级元素，此元素前后会带有换行符。...display隐藏元素后，不占有原有位置 visibility 属性 visibility：visible 默认值。元素是可见的。 visibility：hidden 元素是不可见的。...visibility隐藏元素后，保留原有位置 overflow 属性 visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。...scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。...inherit 规定应该从父元素继承 overflow 属性的值。
二、css字体、文本属性 css学前小知识： 一张图片的打印出来的实际尺寸是由电子图片的像素和分辨率共同决定的，像素(Pixel)是指构成图片的小色点，分辨率(单位DPI)是指每英寸(Inch)上的像素数量...1.字体属性 a) font-size 设置字体的大小 取值方式：数字 + 像素单位px（像素就是一个长度单位） 示意图 ?...2.字体可以写多组，中间用逗号隔开，显示不了第一个，就找第二个显示 3.字体名称中如果有空格 # $ 这种特殊字符的时候需要添加上引号 中文字体也需要添加引号 2.文本属性 a) 文本修饰 语法：text-decoration...b) 文本转换 语法：text-transform:值 取值： （1）uppercase转换成大写 （2）lowercase转换成小写 （3）capitalize首字母大写 示意图 ?...c) 文本对齐方式 语法：text-align:值 取值： （1）left左对齐---------------------默认 （2）center居中对齐 （3）right右对齐 示意图
属性 说明 normal 正常（默认值） italic 斜体 oblique 斜体 在这里，有些字体有斜体italic属性，但有些字体却没有italic属性，oblique是让没有italic属性的字体也能够有斜体效果...常见的文本属性 属性 说明 text-indent 首行缩进 text-align 水平对齐 text-decoration 文本修饰 text-transform 大小写转换 line-height...行高 letter-spacing 字母间距 word-spacing 词间距 字体样式针对的是“文字本身”的型体效果，而文本样式针对的是“整个段落”的排版效果。...字体样式注重个体，文本样式注重整体。...水平对齐：text-align：不仅对文本有效也对图片有效，有三个值：left(左对齐)，center(居中对齐)，right(右对齐) 文本修饰：text-decoration 属性 说明 none
本文重要内容 CSS的单位 字体属性 文本属性 定位属性：position、float、overflow等 CSS的单位 html中的单位只有一种，那就是像素px，所以单位是可以省略的，但是在CSS中不一样...上面这个小技巧，只适用于单行文本垂直居中，不适用于多行。如果想让多行文本垂直居中，还需要计算盒子的padding。...文本属性 CSS样式中，常见的文本属性有以下几种： letter-spacing: 0.5cm ; 单个字母之间的间距 word-spacing: 1cm; 单词之间的间距 text-decoration...overflow属性：超出范围的内容要怎么处理 overflow属性的属性值可以是： visible：默认值。多余的内容不剪切也不添加滚动条，会全部显示出来。...hidden：不显示超过对象尺寸的内容。 auto：如果内容不超出，则不显示滚动条；如果内容超出，则显示滚动条。 scroll：Windows 平台下，无论内容是否超出，总是显示滚动条。
css opacity属性 CSS | 不透明度属性 (CSS | opacity Property) With the growing need of making websites, the need...随着制作网站的需求不断增长，对网站进行样式设计的需求也越来越大。 因此，CSS已成为创建网站必不可少的部分。 因此，必须知道创建网站时要使用哪些属性。...在马上实现opacity属性之前，让我们首先在CSS上下文之外讨论该属性。...在CSS中， opacity属性倾向于设置元素的不透明度 。...注意： opacity属性的缺点是，如果将元素设置为透明的，则所有属性的子元素也将变为透明的。 如果要避免这种情况，并希望使文本在元素内可读，则应改为RGBA值 。
可以看出，使用 opacity 和 display 属性时，父元素对子元素的影响很明显，子元素设置的 opacity 和 display 属性是不起作用的，显示的效果和父元素一样，而使用 visibility...总的来说，使用 visibility 和 display 属性，自身的事件不会触发，而使用 opacity 属性，自身绑定的事件还是会触发的。...是否产生回流（reflow） 回流 当页面中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(也有人会把回流叫做是重布局或者重排)。...是否产生重绘（repaint） 重绘 当页面中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的时候，比如background-color。则称为重绘。...visibility: 离散步骤，在0到1数字范围之内，0表示“隐藏”，1表示完全“显示” visibility : hidden; 可以看成 visibility : 0; visibility
CSS隐藏元素的方法 使用CSS隐藏元素的主要方式有diaplay: none;、opacity: 0;、visibility: hidden;、position: absolute; overflow...diaplay display: none;属性依照词义是真正隐藏元素，使用这个属性，被隐藏的元素不占据任何空间，用户交互操作例如点击事件都不会生效，读屏软件也不会读到元素的内容，这个元素的任何子元素也会同时被隐藏...当使用该属性将元素从显示状态切换为隐藏状态时，元素不占据原本的空间，会触发浏览器的重绘与回流。为这个属性添加过渡动画是无效的，他的任何不同状态值之间的切换总是会立即生效。...，超出屏幕显示的部分隐藏掉，使用这两个属性隐藏主要就是通过控制方向top、left、right、bottom达到一定的值，离开当前显示区域并将超出部分裁剪，此外在未隐藏时设定好相关样式，在动态添加class...，区域内的部分显示，区域外的隐藏，直接将元素裁剪之后即可实现隐藏效果，该属性兼容性一般，具体可以查阅https://caniuse.com/#search=clip-path。
Linux下文件的隐藏属性 linux除了9个权限外，还有些隐藏属性， 使用chattr命令来设置 chattr 设置文件的隐藏属性 #chattr [+-=] [ASacdistu] 文件或目录...可避免I/O较慢的机器过度访问磁盘。 S ：一般文件是异步格式写入磁盘的，如果加上S这个属性时，对文件进行任何修改，将会“同步”写入磁盘中。...c ：这个属性设置之后，讲会自动将此文件压缩，在读取的时候会自动解压缩，但是在存储的时候，将会先进行压缩后再存储。...s ：当文件设置了s属性时，如果这个文件被删除，它将会被完全从这个硬盘空间中删除。 u ：与s相反，当使用u来配置文件时，如果该文件被删除了，则数据内容其实还存在磁盘中。...lsattr 显示文件隐藏属性 #lsattr [-adR] 文件或目录 参数： -a ：将隐藏属性也显示出来 -d ：如果接的是目录，仅列出目录本身的属性而非目录内的文件名 -R ：连同子目录的数据也一并列出
-webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式） -webkit-line-clamp:2; //这个属性不是css的规范属性...，需要组合上面两个属性，表示显示的行数。...-webkit-line-clamp 超过两行就出现省略号 -webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在...CSS 规范草案中。...限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。
可以用JQuery插件更好的实现文本溢出隐藏效果，可以访问：jQuery.dotdotdot多行文本省略号插件的使用方法 在CSS3中可以使用 text-overflow 对文本溢出进行处理： clip...对应的firefox可以使用 -moz-appearance 属性。 ?... display: -webkit-box; /*重新定义-webkit私有盒模型*/ -webkit-box-orient: vertical; /*内容之间的排列顺序...webkit-line-clamp: 3; /*在第几行末尾显示省略号...*/ word-break: break-all; } -webkit-line-clamp 是一个 不规范的属性...（unsupported WebKit property），它没有出现在 CSS 规范草案中。
循环精灵图 利用for循环设置一组元素的精灵图背景 找到精灵图图片排列的规律 核心思路：利用for循环，修改精灵图片的背景位置background-position <!...lis[i].style.backgroundPosition = '0 -' + wz + 'px'; } 显示隐藏文本框内容...input { color: #999; } <input type="text" value="<em>内容</em>...') { this.value = ''; } // 获得焦点需要把<em>文本</em>框里面的文字颜色变黑...'; } // 失去焦点需要把<em>文本</em>框里面的文字颜色变浅色 this.style.color = '#999'; }
大家好，又见面了，我是你们的朋友全栈君。 opacity 用于指定元素透明度, 支持 0~1 之间的小数. 默认值 1-完全不透明, 0-完全透明 <!
六、完整代码示例 代码 效果 一、color 文本颜色 ---- color 属性 可以 定义 文本颜色 , 其颜色值有三种表示方式 : 预定义颜色 : 直接使用 颜色的英文名称 , blue ,...---- text-align 属性 , 可以设置 文本对齐方式 , 为标签设置该 CSS 样式 , 标签内的内容就会使用相应的对齐方式 ; text-align 属性 取值 : left : 左对齐..., 该值是默认值 ; right : 右对齐 ; center : 居中对齐 ; text-align 属性 是 让标签中的 文本内容 对齐 , 标签的位置大小区域不变 ; 在 head 标签设置 ....class="tittle tac">狂人日记 显示效果如下 : 为一个 div 设置 上述 居中对齐的 tac 样式 , 整个 div 中的内容 , 包括字标签中的内容 , 也一并居中对齐...属性 , 用于 设置 文本装饰 ; text-decoration 属性 常用于为 链接 修改 装饰效果 ; text-decoration 属性值 : none : 默认属性 , 没有装饰 , 取消链接的下划线
领取专属 10元无门槛券
手把手带您无忧上云
