文本样式设置&盒子模型

<( < ) / >( > )
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, 盒子的宽度 / 高度 / 内间距 / 边框 / 外边距
基本含义
width: 盒子宽度
Height： 盒子高度
Padding：内边距：盒子内容与盒子边框的距离
Border： 盒子边框
margin: 外边距：盒子边框与其他标签的边框的距离
具体设置：padding/margin 一个值: 上右下左 / 两个值：上下，左右 / 三个值：上，左右，下
Border
border-width 设定边框的宽度。

border-style 设置边框的类型，主要有以下可以设定的值
none，无边框/solid，实现边框/dotted，点线边框/dashed，虚线边框/double，双线边框/groove，3D凹槽边框/ridge，3D凸槽边框/inset，内浮雕边框outset，外浮雕边框
border-color设置边框的颜色，
当然“border”属性的各个分支属性也能单独地对某个方向上的值进行设置。
padding/margin设置
四个方向单独进行控制
div {
margin-left: 1rem;
margin-right: 1rem;
margin-top: 1rem;
margin-bottom: 1rem;

padding-left: 1rem;
padding-right: 1rem;
padding-top: 1rem;
padding-bottom: 1rem;
}
组合值控制
div {
margin: 1rem;
padding: 1rem;
}
当为组合值时的含义：
一个值: 上右下左同时设置
两个值：上下，左右
三个值：上，左右，下
四个值：上右下左分别设置

Border设置
边框的三大属性
①　border-width 设定边框的宽度。
②　border-style 设置边框的类型，主要有以下可以设定的值
③　border-color 设置边框的颜色，
单独设置各属性（所有方向）
div {
border-color: #4b8fca;
border-style: solid;
border-width: 2rem;
}
只设置某个方向上的border，单独控制
div {
border-right-color: #4b8fca;
border-right-style: solid;
border-right-width: 2rem;
}

边框可选类型如下：
①　none，无边框
②　solid，实现边框
③　dotted，点线边框
④　dashed，虚线边框
⑤　double，双线边框
⑥　groove，3D凹槽边框
⑦　ridge，3D凸槽边框
⑧　inset，内浮雕边框
⑨　outset，外浮雕边框

组合值

用组合值设置各属性（所有方向）

div {
border: 0.05rem red solid;
}

各个属性的位置可以调整改变
只设置某个方向上的border，组合值控制
div {
border-right:1rem solid red;
}
1.圆角的盒子“border-radius”
给每个角进行设置圆角
div {
border-top-left-radius: 5px;
border-bottom-right-radius: 10px;
}
给所有角进行设置圆角
div {
border-radius: 5px;
}
2.元素的轮廓“outline”
概述
①　该属性用于设置一个元素的轮廓线.(input点下会有蓝色边线，那就是轮廓)
②　和“border”不一样，“outline”无论在什么“盒子模型”下，都不会占据页面的空间
③　并且它不能分别去设置各个方向的值，即不能对“top”、“right”、“bottom”和“left”方向的“outline”进行分别设置，只能进行统一给所有方向设置。（可以对某个分支属性进行设置）
④　在使用“webkit内核或“blink内核的浏览器中，该属性会在表单元素在获得焦点后自动出现，本意是让用户获得更好的交互体验。
但该设定很多时候反而会影响我们对“Web”页面的风格设置，这个时候我们都是将它的值设置为“none”。
Webkit :
老版本Chrome浏览器、Safari浏览器以及iOS和Android系统自带浏览器
Blink :
以新版的Chrome浏览器和Opera浏览器为代表
⑤　另外，“outline”属性并不受圆角属性“border-radius”的影响。和“border”属性大体一致
outline的分支属性
outline-width 设置轮廓线的宽度
outline-style 设置轮廓线的样式
outline-color 设置轮廓线的颜色
outline-offset设置轮廓线相对元素边框的距离
div {
width: 10rem;
height: 10rem;
margin: auto;
border: 0.05rem red solid;

outline: 1px solid blue; /* 组合值写法 */
outline-offset: 20px;
}