文本样式设置盒子模型.pdfVIP

⽂本样式设置盒⼦模型 ( ) / ( ) 1，⽂本样式设置： 段落⾸⾏缩进text-indent 该属性是⽤于设置每个段落⾸⾏缩进数量值的属性，如果是⽤于中⽂布局，⼀般会使⽤“2em”的数值和单位来为每个段落的⾸⾏缩进“两 个字符”。例如： ⽂本装饰性(下划线)text-decoration ⽂本字母⼤⼩写转text-transform 该属性有以下属性值： none（默认）：保持⽂本中英⽂单词的默认⼤⼩写 Capitalize：每个英⽂单词⾸字母为⼤写字母，其它为⼩写字母（⼤驼峰写法） 注意：除了⾸字母发⽣改变外，其他的字母原本是⼤写就是⼤写，原本是⼩写就是⼩写 Uppercase：将所有英⽂单词转换为⼤写字母 Lowercase：将所有英⽂单词转换为⼩写字母 ⽂本的阴影text-shadow 该属性有4个值，具体如下： ⽔平⽅向阴影偏移（h-shadow）：“0”表⽰维持原位，正数为向右偏移，负数为向左偏移。单位为像素“px”。 垂直⽅向阴影偏移（v-shadow）：“0”表⽰维持原位，正数为向上偏移，负数为向下偏移。单位为像素“px”。 阴影模糊距离（blur）：⽤正数表⽰阴影模糊的单位距离，距离越⼤模糊程度越⾼，单位为像素“px”。 阴影的颜⾊（color）：⽀持Web技术中的常⽤颜⾊模式：“颜⾊英⽂单词”、“HEX”、“RGBa”、“HSLa”。 段落⽂本的⾏⾼line-height 单词的间距word-spacing 字符的间距letter-spacing 空格换⾏处理white-space 该属性设置如何处理元素内的空格符和换⾏符，它主要有以下值： normal（默认）：由浏览器处理空格和换⾏ Pre：段落⾥所有的空格符和换⾏符都会被保留 （类似于 标签） Nowrap：段落内的⽂本不会换⾏（类似于没有设置过换⾏的“notepad”） pre-wrap ：段落⾥所有的空格符序列和换⾏符序列都会被保留 （除了在某些编码格式下和“pre”有所差距，⼤多数时候可以说它和“pre”这个值是等价的）,这点类 似于pre，但是它不会去更改浏览器的默认⾏为– 当内容的宽度⼩于窗体的宽度时会出现滚动条的⾏为。 pre-line ：多空格会合并成⼀个（浏览器的默认处理⽅式），但换⾏符会保留 如果你当前的内容是是没有空格分割的⼀连串英⽂，那么它会被浏览器当作是⼀个单词，不会让其换⾏，只会出现⽔平滚动条去适应它。 设置⽂本⽅向direction ltr从左往右 （默认） / rtl 从右往左 ⽂本的剪裁text-overflow overflow常⽤值： auto / hidden / scroll…见下图： Text-overfolw属性包含的常⽤值： clip 裁剪⽂本（从属性意义不⼤，通过overflow：hidden可实现此效果） ellipsis显⽰省略符号来代表被裁剪的⽂本 不过该属性不能单独使⽤，必须要配合⽂本换⾏处理属性“white-space”和内容溢出处理属性“overflow”来使⽤，否则会达不到所期望 的效果。 显⽰省略号的流程见下图： ⽂本长度需要超出边界/不允许内容换⾏/设置超出就隐藏/设置⽂本末尾显⽰省略号 2，css盒⼦模型： A,什么是盒⼦模型？就是将⽹页布局中的元素（能设置宽⾼的元素）进⾏拟物化的⽐喻，⽽⼀个盒⼦是由–内容indent（盒⼦内的物件）/ 内间距padding（物件与盒⼦之间的距离） / 边框border（盒⼦壁） / 外边距margin（盒⼦和其他物体之间的距离）等四个部分组成。 如下图所⽰： B, IE盒⼦模型和W3C盒⼦模型 由于⼀些“客观”的原因，IE浏览器和标准的盒⼦模型有⼀定的差异。 标准的盒⼦模型 “width”和“height”== conent、padding和border； IE浏览器盒⼦模型 “width”和“height == content 盒⼦模型的选择与转换 ⼀⽅⾯为为了兼容IE浏览器，另⼀⽅⾯是IE的盒⼦模型在实际的布局中的确更容易控制。所以我们在实际的开发⼯作中，都是将标准的盒⼦ 模型转换为IE的盒⼦模型。 转换⽅式如下： 将CSS的样式属性“box-sizing”的值设为“border-box”转换成IE的 /“content-box”转换成W3C的。 当然，如果我们要将IE的盒⼦模型转化为标准的盒⼦模型也是可⾏的，即将“box-sizing”的值设置为“cotent-box”，不过业界并不推崇 这样做。 C, 盒⼦的宽度 / ⾼度 / 内间距 / 边