2019-03-25盒子模型 文本样式

文本样式

字体：font-family

来制定标签中文字使用的字体，后面可制定一个也可制定多个字体，当指定多个字体时浏览器会优先是用第一个如果没找到则使用第二个，以此类推

    分类：serif（衬线字体）  sans-serif（非衬线字体）  cursive（草书字体）  monospace（等宽字体）  fantasy（虚幻字体）

    font-style用来指定文本的斜体

        指定斜体：font-style:italic      指定非斜体：fony-style:normal

    font-weight用来指定文本的粗体

        指定粗体：font-weight:bold      指定非粗体：font-weight:normal

    font-variant：指定小型大写字母

        font-variant:small-caps

font   可以一次性同时设置多个字体的样式

    语法：font:加粗 斜体 小型大写 大小/行高 字体

行间距：line-height用于设置行高，行高越大则行间距越大

    行间距=line-height减去font-size

大写化：text-transform用于将元素中的字母全都变成大写

    大写：text-transform:uppercase

    小写：text-transform:lowercase

    首字母大写：text-transform:capitalize

    正常：text-transform:none

文本的修饰   text-decoration：有五个值

    none（没有修饰)    underline（下划线）    overline（上划线）

    line-through（删除线）    blink（文本闪烁）

letter-spacing（设置字符间距）    word-spacing（设置单词间距）    这两个属性都可以指定一个长度或百分数作为值，正数代表的是增加距离负数代表的是减少距离

text-align（对齐文本）：默认值是left（左对齐）还有right（右对齐）justify（两边对齐）center（居中对齐）

text-indent（首行缩进）：需要指定一个长度，只对一行生效，单位一般用em    比如空两格：2em

盒子模型：

分为几个部分：content（内容区）    padding（内边距）    border（边框）    margin（外边距）

内容区指的是盒子中放置内容的区域，也就是元素中的文本内容，子元素都是存在于内容区；如果没有为元素设置内边框和边框则内容区大小默认和盒子大小是一致的；通过width和height两个属性可以设置内容区的大小；width和height属性只适用于块元素

内边距是指元素内容区与边框以内的空间；默认情况下width和height不包含padding的大小；使用padding属性来设置元素的内边距；比如：padding:10px 20px 30px 40px;这样会设置元素的上·右·下·左四个方向的内边距    padding:10px 20px 30px;分别指上·左右·下四个方向的内边距    padding:10px 20px;分别指定上下·左右四个方向的内边距    padding:10px;分别指定上下左右四个方向的内边距    padding-top/padding-right/padding-left/padding-bottom分别指定四个方向的内边距

边框是元素可见框的最外部；可使用border属性来设置盒子的边框；比如border:1px red solid;分别指定了边框的宽度·颜色·样式；也可使用border-top/left/right/bottom分别指定上下左右四个方向的边框；和padding一样默认width和height并包括边框的宽度

边框的样式：

    none（没有边框）    dotted（点线）    dashed（虚线）    solid（实线）    double（双线）    groove（槽线）    ridge（脊线）    inset（凹边）    outset（凸边）

margin（外边距）用法和padding类似提供了margin-top/right/left/bottom四个方向；当将左右外边距设置为auto时浏览器会将左右外边距设置为相等；比如margin:0 auto可使元素居中

我们不能为行内元素设置width·height·margin-top和margin-bottom，这时我们可以通过修改display来修改元素的性质；block（设置元素为块元素）    inline（设置元素为行内元素）    inline-block（设置元素为行内块元素）    none（隐藏元素，元素将在页面中完全消失）

visibility（用于元素是否可见）隐藏一个元素隐藏其在文档中所占的位置会依然保持不会被其他元素覆盖；visible（可见的）    hidden（隐藏的）

overflow（控制内容溢出的情况）；visible（默认值）    scroll（添加滚动条）    auto（根据需要添加滚动条）    hidden（隐藏超出盒子的内容）