CSS易出错的部分属性

文本:

1、text-indent 用于定义块级元素中第一个内容行的缩进。

2、white-space 属性设置如何处理元素内的空白。

描述
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。


3、word-wrap  normal|break-word 属性允许长单词或 URL 地址换行到下一行。

( 浏览器默认长单词一行放不下就自动跑下一行了,若下一行也很长就会溢出浏览器,就需要这个属性防止溢出)

4、word-break 属性规定非中日韩文字自动换行的处理方法。

注:word-wrap 是用来决定允不允许单词内断句的,如果不允许的话长单词就会溢出。最重要的一点是它还是会首先尝试挪到下一行,看看下一行的宽度够不够,不够的话就进行单词内的断句。而word-break:break-all则更变态,因为它断句的方式非常粗暴,它不会尝试把长单词挪到下一行,而是直接进行单词内的断句。这也可以解释为什么说它的作用是决定用什么方式来断句的,那就是——用了word-break:break-all,就等于使用粗暴方式来断句了。总之一句话,如果您想更节省空间,那就用word-break:break-all就对了!共同点是都能把长单词强行断句,不同点是word-wrap:break-word会首先起一个新行来放置长单词,新的行还是放不下这个长单词则会对长单词进行强制断句;而word-break:break-all则不会把长单词放在一个新行里,当这一行放不下的时候就直接强制断句了。(引用自http://www.cnblogs.com/2050/archive/2012/08/10/2632256.html)

5、text-overflow 属性规定当文本溢出包含元素时发生的事情。

说明:当块容器overflow为非visible时,定义内联内容溢出其块容器是否截断或者添加(...)及自定义字符 要使得text-overflow属性生效,块容器必须显式定义overflow为非visible值,同时显式或者隐式的定义width为非auto值,white-space为nowrap值。

clip修剪文本。ellipsis显示省略符号来代表被修剪的文本。string使用给定的字符串来代表被修剪的文本。

4、vertial-align 参考手册的解释就不贴了。直接进入说人话模式:先普及基础知识

行高:文本行的基线间的距离。行距(leading):行高与字体尺寸的差。

基线(Base line):指的是一行字横排时下沿的基础线,基线并不是汉字的下端沿,而是英文字母x的下端沿。

行框:line-height 与 font-size 的计算值之差(在 CSS 中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

中线的定义为:中线位于基线的上方,与基线的距离为小写字母x高度(即ex)的一半,而ex同字体尺寸相关,大部分浏览器认为1ex = 0.5em,因此会将基线以上四分之一em处作为中线来对齐。

行高是可继承的,但是继承的是计算值 由于继承的是计算值,因此当元素内的文字字体尺寸不一样的时候,如果设定固定的行高很可能造成字体的重叠。因此可以定义一个没有单位的实数值作为缩放因子来统一控制行高,缩放因子是直接继承的,而不是继承计算值。(引用自http://www.ddcat.net/blog/?p=227)

vertical-align 适用于行内元素和单元格(table-cell)元素  属性值:

顶端对齐(vertical-align : top)是将元素的行内框的顶端与行框的顶端对齐。

文本顶端对齐(vertical-align : text-top)是将元素行内框的顶端同文本行的顶线对齐。

中间对齐(vertical-align : middle)通常使用在图片上,将图片的垂直方向的中线与文本行的中线对齐。

上标(vertical-align:super)使元素的基线(替换元素的底端)相对于父元素的基线升高。

下标(vertical-align:sub)使元素的基线降低,移动的幅度CSS规范中没有规定,由浏览器来决定。

时间: 2024-10-06 19:44:33

CSS易出错的部分属性的相关文章

jQuery选择器与JavaScript易出错知识点

一.jQuery选择器 基本选择器 1.Id(根据给定的ID匹配一个元素.如果选择器中包含特殊字符,可以用两个斜杠转义.) jQuery代码为$("#myclass") 若有特殊字符则 HTML代码为<span id="myclass[1]" jQuery代码为$("#myclass\\[1\\]") 2.Class(一个用以搜索的类.一个元素可以有多个类,只要有一个符合就能被匹配到) jQuery代码为$(".myclass&q

css字体样式(Font Style),属性

css字体样式(Font Style),属性 css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者必需了解的知识.以下是我精心整理的css字体样式属性知识,供大家学习参考: css文本样式 序号 中文说明 标记语法 1 字体样式 {font:font-style font-variant font-weight font-size font-family} 2 字体类型 {font-family:"

[转]图解CSS的padding,margin,border属性(详细介绍及举例说明)

图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).边框距(padding).边界(border)和边距(margin). 对于初学者,经常会搞不清楚margin,background-color,background-image,padding,content,border之间的层次.关系和相互影响

mysql安装及易出错问题解决

.双击.msi 安装包 2.勾选同意,下一步 3.一直 下一步,遇到弹窗选择ok,然后点击Execute 4.check  ok后点击下一步 5.next 6.设置root密码,next 7.无脑next后,来到易出错界面了 - -! (启动服务失败--解决方案:1.卸载完全之前安装的mysql,可能有残留文件导致服务不能启动 2. MySQL安装是出现could not start the service mysql error:0 提示错误,解决方法:  首 先,在管理工具->服务里面将My

CSS多列、用户界面属性

CSS多列 常用属性: column-count 分几列 column-gap 列间距 column-rule 列分割线的样式(写法和border一样) 例如: 一个div分三列,列之间间距为10px,分割线为(可以不设置)5像素红色实线这样写 <style> div{column-count:3; column-gap:10px; column-rule:5px solid red; } </style> 写此样式要加前缀 column-rule 宽度:可选值有thin(细边框)

CSS和JavaScript标签style属性对照表

CSS和JavaScript标签style属性对照表一般情况是把"-"去掉,第二个字母用大写. CSS语法 (不区分大小写) JavaScript语法 (区分大小写) border borderborder-bottom borderBottomborder-bottom-color borderBottomColorborder-bottom-style borderBottomStyleborder-bottom-width borderBottomWidthborder-colo

css超出一行添加省略号属性:text-overflow和white-space

css超出一行添加省略号属性:text-overflow和white-space A-A+ 前端博客?前端开发?CSS?14994View1 文章目录 1.text-overflow: ellipsis; 2.white-space属性 3.word-wrap 通过使用text-overflow和white-space属性来使文本在一行内显示,超出则加省略号,添加如下HTML代码: <p>前端开发博客专注前端开发和技术分享,如果描述超过100像素,则会隐藏,添加省略号</p> CS

使用jquery获取css的top和left属性

使用jquery获取css的top和left属性 因为left和top也都是普通的css属性所以可以使用如下代码来获取 var left = $('#test').css('left'); var top = $('#test').css('top'); 当然这样获取的是一个字符串,如果们想直接取得对象的left和top的像素值,可以通过position方法来获取 var left = $('#test').position().left; var top = $('#test').positi

Css3之基础-3 Css 尺寸单位、尺寸属性与边框属性

一.CSS 单位 尺寸单位 - %  : 百分比 - in : 英寸 - cm : 厘米 - mm : 毫米 - pt : 磅(1pt等于1/72英寸) - px : 像素(计算机屏幕上的一个点) - em : 1em等于当前的字体尺寸,2em等于当前字体尺寸的两倍 颜色单位 - rgb(x,x,x)   : RGB 值,如 rgb(255,0,0) - rgb(x%,x%,x%): RGB 百分比值,如 rgb(100%,0%,0%) - #rrggbb:十六进制数,如 #ff0000 - #