文本的样式、盒子

 文本样式：

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

 正常：text-transform:none

 大写：text-transform:uppercase

 小写：text-tansform:lowercase

 首字母大写：text-transform:capitalize

隐藏：用户看不到，但搜索引擎可以看到：text-indent: -6541894px;.

text-align用于设置文本的对齐方式

可选值：

      left：左对齐

      right：右对齐

      justify：两边对齐

      center：居中对齐

重要的：text-decoration属性，用来给文本添加各 种修饰。通过它可以为文本的上方、下方 或者中间添加线条

可选值：

      underline    ——    下划线

      overline    ——    上划线

      line-through    ——    删除线

      none    ——    没有线，可以去掉网页链接下划线

盒子    ——    网页中“一切皆是盒子”

盒子的大小由内容区、内边距、边框共同决定

盒子分部：

    内容区(content)  —— 放子元素

    内边距(padding)

    边框(border)

    外边距(margin)

1、模型

        边框颜色：background-color: #bfa;   

       宽：border-width: 10px;    —— 默认值：3（可不写）

       颜色：border-color: red;    —— 默认色：黑（可不写）

       样式：border-style: solid;  

---

每个边距都不一样的设置顺序：

                        当边距有四个时，顺序为： border-width: 10px 20px 30px 40px; （上、右、下、左）

                        当边距有三个时，顺序为： border-width: 10px 20px 30px ; （上、左右、下）

                        当边距有两个时，顺序为： border-width: 10px 20px; （上下、左右）

                        当边距有一个时，顺序为： border-width: 10px; （上下左右）

                        只设置上边框：border-top-width: 100px;

                        只设置下边框：order-left-width: 100px; 

样式、颜色与其格式相同

边框样式可选值：solid：实线 dotted:点  dashed:虚线    double:双线

---

如何把三个合为一个    ——    没有顺序要求

border-color: red;

border-width: 100px;

border-style: solid;

border: 100px red solid; 

2、边框

设置三个边框方法如图：

3、内边距    ——    内容区和边框之间的距离