CSS文字样式，盒子模型，背景样式

CSS文字样式：

font-size  改变字体大小

color        改变字体颜色

.a{
            font-size: 30px;
            color: pink;
}

text-align  对齐方式              用于：实现水平居中

                1. center  居中

                2. left    左对齐 默认样式

                3. right   右对齐

                4.  justify  两端对齐  

                    如果让最后一行也实现两端对齐需要加一行代码 text-align-last: justify;

text-align: center;

line-height:      行高           用于：实现垂直居中  （行高 = 盒子高）

line-height: 100px;

text-indent  首行缩进         缩进2个字符时，值等于字体大小*2

text-indent: 60px;

list-style              li    默认样式        none  去掉li的默认样式

list-style: none;

text-decoration:       none                     用于清除a标签的默认下划线

                                underline              定义文本下的一条线

                                overline                定义文本上的一条线

                                line-through          定义穿过文本的一条线（删除线 -- s 或 del 标签同样效果）

a:hover{
            /* 清除a标签下划线 */
            text-decoration: none;
            /* 定义文本下的一条线 */
            text-decoration: underline;
            /* 定义文本上的一条线 */
            text-decoration: overline;
            /* 定义穿过文本的一条线（删除线 -- s 或 del 标签同样效果） */
            text-decoration: line-through;
        }

text-transform:

            text-transform: capitalize;       定义每个单词以大写字母开头

            text-transform: uppercase;     全部字母都大写 

            text-transform: lowercase;      全部字母都小写 

盒子模型：

概述：

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

padding：内边距

                padding: 10px;                                上下左右相同

                                -top                                 上边距

                                -bottom                           下边距

                                -left                                  左边距

                                -right                               右边距

简写:        padding: 10px 20px                        第一个值是 上下 第二个值是 左右

                padding: 10px 20px 30px               上  左右 下

                padding: 10px 20px 30px 40px      上 右 下 左

margin：外间距

                margin: 10px;                                 上下左右相同

                                -top                                上边距

                                -bottom                          下边距

                                -left                                左边距

                                -right                              右边距

简写:        margin: 10px 20px                         第一个值是 上下 第二个值是 左右

                margin: 10px 20px 30px                上  左右 下

                margin: 10px 20px 30px 40px       上 右 下 左

margin 塌陷问题 

                同级之间上下margin 取大值

                嵌套盒子，子盒子加margin-top不生效，需要给父盒子加padding或border。

边框：border    宽度   样式    颜色

                宽度：border: 10px

                样式：border:  solid            实线

                           border: dashed        虚线

                颜色：color

                           transparent： 透明色

单独设置边框：border：设置四边

                                        -top                        上

                                        -bottom                  下

                                        -left                        左

                                        -right                      右

边框圆角：      设置圆形：

                        border-radius: 50%;

                        px固定值 设置小圆角：

                        padding-top: 50px;

背景样式：

background：

                        -color：               定义背景颜色

                        -image：             定义背景图片

                        -repeat：             定义背景图片平铺方式

                        -size：                定义背景图片大小  css3新增属性

行内元素         span a 

行内块元素      img 表单元素（input、select、textarea）

 块级元素         div p h1-h6 ul li hr br 

元素转换：

display：

                inline-block: 设置为行内块元素，宽高生效，不独占一行

                block: 设置为块级元素 ，宽高生效，独占一行

                inline： 设置为行内元素，宽高不生效

                none：隐藏