css 用text-indent但是会影响其他文字排版

巧用css text-indent减小中文标点符号的占位大小

由于设计需要,我们的页面中经常会有如下效果: 可是我们实现出来的效果确实这样的: 看起来两行文本没有对齐嘛,仔细检查后原来是[字符的原因,因为是中文标点符号占半个字的位置.不信?选中下汉字标点符号看一下即可.至于为什么会占半个字的位置,个人觉得可能是为了方便排版,标点符号也要占一个汉字的空间(想想小时候写的作文标点符号是不是都占一格).标点符号相对于格子左对齐,所以自然一侧留下一半空间.具体原因求科普!查明原因即对症下药,既然中文标点符号占汉字半个位置,那么我们使用CSStext-indent:

css scroll text without wrap & webkit-scrollbar

css scroll text without wrap hidden webkit-scrollbar .tabs-title-box::-webkit-scrollbar, .tabs-content-box::-webkit-scrollbar { display: none; width: 0 !important; height: 0 !important; background: transparent; } .tabs-title-box{ box-sizing: border-b

div介绍盒子模型边框属性 CSS初始化文字排版边框调整溢出

今天学习的div,了解了div是干什么用的掌握了什么是盒子模型,以及div的外边距内边距以及边框,运用div和CSS给文字排版,利用边框的来做图像,div溢出的处理 CSS初始化: 精确排版的时候用这个清理一下 *{ margin:0px; padding:0px; } */ <!doctype html> <html> <head> <meta charset="utf-8"> <title&

amazeui学习笔记--css（基本样式3）--文字排版Typography

amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块blockquote和定义列表(dl dt)注意一下 3.样式不能正常显示:拷贝过来的很多样式在博客中都不能正常显示二.文字排版Typography 目录字体字体定义字体辅助 Class Webkit 反锯齿字体相关链接元素基本样式标题 <h1> - <h6> 段落 &l

2048总结 JavaScript+jQuery（取元素方便，.css，text方法）

Html部分(界面):1.开始新游戏:2.返回上一步:3.记分栏: 4.16个小格组成: 其中1,2由链接形式实现. a标签中href属性调用js方法: <a href="javascript:new_game();"id="new_game_button">开始新游戏</a> CSS部分: 1.字体采用@media方法适应屏幕大小: 2.背景待修改:(17行): 3.各元素的宽度.高度等单位为rem:默认1rem等于多少像素?? 4.htm

对于前端JS、Html、CSS的大小、位置是否影响网站的相应时间

1.页面中大量的注释代码.空行会影响页面的加载速度尽量去除打断的注释代码,及空行:尽可能的使用压缩后的JS.CSS文件,太小的文件没必要压缩 2.有人说CSS样式放在页面的开头,JS文件放在页面的结尾,可以提高页面的加载速度? 从页面的加载.渲染顺序来看好像是有一定的道理,但并不一定,现在大多数浏览器都支持JS文件的异步加载,其实CSS.JS文件的位置并不一定影响网站的加载速度 3.文件多少,引入过多的外部JS.CSS文件也会影响页面的加载速度在浏览器的吞吐量一定的情况下,同时加载文件的个数

CSS 设置背景透明度，不影响子元素

由于 opacity 属性能被子元素继承,使用它设置父元素背景透明度时也会影响子元素．解决方法: 1> 使用 RGBA Example .classname { /* RGBa, 透明度0.6 */ background: rgba(0, 0, 0, 0.6); } 2> 使用 opacity, 设置一个背景DIV,此DIV使用绝对布局 Example <div class="demo"> <div class="demo-bg"&g

CSS黄金三段--消除边框的影响

以前常常因为padding.margin等影响了整个边框的大小,只能傻傻的算大小.现在的黄金三段真的是帮了大忙了,下面的代码放在CSS相应的内容中,就可以使得边框的大小就是你设置的width的属性值. -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;

Mysql BLOB、BLOB与TEXT区别及性能影响、将BLOB类型转换成VARCHAR类型

在排查公司项目业务逻辑的时候,见到了陌生的字眼,如下图顺着关键字BLOB搜索,原来是Mysql存储的一种类型,从很多文章下了解到如下信息了解 MySQL中,BLOB字段用于存储二进制数据,是一个可以存储大量数据的容器,它能容纳不同大小的数据. MySQL的四种BLOB类型类型大小(单位:字节) TinyBlob 最大 255 Blob 最大 65K MediumBl

CSS文本(Text)属性-----letter-spacing和text-align

letter-spacing letter-spacing:normal | <length> 指定字符之间的额外间隙 normal:默认间隔.计算值为0 <length>:用长度值指定字符间隔.可以为负值 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="

CSS Position定位过多是否会影响浏览器渲染速度

一直有个传说就是页面里的Position多了会影响浏览器渲染速度,今天做个测试看看结果如何. 检验的方法: 动态创建一定数量的div > 开始计算时间 > 导入css文件渲染 > onload计算时间,看那种方法延迟最短. 为了统计的数据有意义没有设置上万个节点,以cnmo首页的节点数为例,chrome firefox统计为4315,ie统计为4372,所以设置4500进行测试. 每次结果测试3次,取最低值. 不添加css属性数量 IE8 Chrome Firefox 100 71ms

css float对于之后布局的影响

后面的元素不浮动,即便设置了宽度,表面上只占了一定的宽度,但实际上占了全屏.(所以设置了overflow之后,并且之后的div设置了宽度,再设置margin-left可能不起作用). 高度对浮动的影响如果要实现类似九宫格那种效果,则他们的高度必须保持一致,否则会占用下一格的位置.

[CSS][转载]内层div的margin-top影响外层div

参考内层div的margin-top影响外层div——引出外边距合并 div嵌套导致子区域margin-top失效不起作用的解决方法我使用的是在外层的div中添加 border: 1px solid transparent; 在上面参考方法中,给外层div 添加"overflow:hidden;"也实现了同样的效果.

css:html() text() val()

转http://www.jb51.net/article/35867.htm .html()用为读取和修改元素的HTML标签对应js中的innerHTML .html()是用来读取元素的HTML内容(包括其Html标签),.html()方法使用在多个元素上时,只读取第一个元素 .text()用来读取或修改元素的纯文本内容对应js中的innerText text()用来读取元素的纯文本内容,包括其后代元素;.text()方法不能使用在表单元素上 .val()用来读取或修改表单元素的va

HTML+css基础 Text文本属性

Text文本属性: 1.颜色 color color:red 2.文本缩进 text-indent 属性值数字+px: text-indent:10px: 3.文本修饰 text-decoration 属性值:underline 下划线 none 默认值没有任何线 overline 上划线 4.文本的对齐方式 text-align 属性值 left right center justify(两端对齐) width 宽 height 高属性值都是像素任何一个标签都是以方格的形式呈现

[css]input text ie6/7 border兼容问题

[border:none;]当border为“none”时对IE6/7无效边框依然存在 [border:0;]当border为“0”时,所有浏览器都一致把边框隐藏 [border:0;]把border设为“0”像素虽然在页面上看不见,但按border默认值理解,浏览器依然对border-width/border-color进行了渲染,即已经占用了内存值. [border:none;]把border设为“none”即没有,浏览器解析“none”时将不作出渲染动作,即不会消耗内存值.

css实现背景模糊，但不影响背景上的内容

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

CSS中display对布局的影响以及元素display的默认值

比如div元素,它的默认display属性值为“block”,成为“块级”元素(block-level):而span元素的默认display属性值为“inline”,称为“行内”元素.

CSS 绝对定位时，水平居中而不影响原文档中其它元素

div.absolutemiddle { position: absolute; left: 50%; transform: translate(-50%); /* 平移50%为自身尺寸的一半,实现水平居中 */ }

CSS文字排版

一.font-size 我来试一试:为第一段中的“胆小如鼠”设置字号为:20px,字体颜色为:red. <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>字号.颜色</title> <style type="text/cs

CSS：表格样式（设置表格边框/文字/背景的样式）

使用CSS能够制作出十分精美的表格. 代码整理自w3school:http://www.w3school.com.cn 效果图: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <meta http-equiv="

css 用text-indent但是会影响其他文字排版

热门专题