CSS常见属性（一）

1.字体 font

        （1）font-* 字体相关的属性，这一类具有继承性（给父元素设置了，子元素或后代元素也会有作用）

        （2）font-style: italic;

        （3）font-weight: bold;

        （4）font-family: 宋体;

2.背景 background

        （1）background-*，背景这一系列的属性不具有继承性

        （2）background-color

        （3）background-image

        （4）background-repeat（背景图片是否平铺）

                  no-repeat 不平铺、repeat 平铺、repeat-x 水平平铺、repeat-y 垂直平铺

        （5）background-position（背景图片的位置）

                         【1】background-position: x y;

                                        x为负数，背景图片水平向左移动，为正数，水平向右移动

                                        y为负数，背景图片重直向上移动，为正数，重直向下移动

                         【2】 top right bottom left center

      /* background-position: -100px -100px; */
      background-position: center center;

         （6）background-size（背景图片的尺寸(cover 把图片自动填充满整合标签)）

/* background-size: 100% 100%; */
/* background-size: cover; */

/* contain 这个属性由原图片的尺寸(宽度*高度)来决定
    如果宽度大于高度 就是以横向填充标签(水平方向)
    如果高度大于宽度 就是以纵向填充标签(垂直方向) */

   background-size: contain;

3.文本 text

        （1）text-* 文本相关的属性，具有继承性

        （2）text-decoration（修饰文本线）

                 line-through 删除线、 underline 下划线 、 overline 上划线

        （3）text-align（设置文本水平对齐方式）

        （4）color（字体颜色）

#盒子模型

4.边框 border

        （1）边框，可以撑开盒子大小。

        （2）一个标签有四个边，每个边可以有大小、样式、颜色组成。

                border-width 边框宽度

                border-style: solid (实线 、虚线、点线)

                border-color 边框颜色

                border:10px solid grenn 简写

/* border-width: 10px; */
/* border-style: solid; */
/* border-color: green; */
/* border: 10px solid green; */

        （3）border-top、border-right、border-bottom、border-left

 /* 上边框 */
 border-top: 30px solid purple;
 /* 右边框 */
 border-right: 30px solid orange;
 /* 下边框 */
 border-bottom: 30px solid blue;
 /* 左边框 */
 border-left: 30px solid green;

          （4）实现三角形图案     

.box-4 {
            /* transparent: 透明 */
            background-color: transparent;
            /* 上边框 */
            border-top: 100px solid transparent;
            /* 右边框 */
            border-right: 100px solid transparent;
            /* 下边框 */
            border-bottom: 100px solid blue;
            /* 左边框 */
            border-left: 100px solid transparent;
            width: 0px;
            height: 0px;
        }
<div class="box box-4"></div>

5.内边距 padding

        （1）内边距： 是指边框与内容之间的间距。可以撑开盒子大小。

        （2）padding-left 、padding-top: 80px 、 padding-right: 40px 、 padding-bottom: 30px;

        （3）简写：

        /* 上  右   下   左 */
  padding: 80px 40px 30px 50px;

6.外边距 margin

        （1）外边距。不会撑开盒子大小。

        （2）元素作用于浏览器或其他元素之间的间距。元素与元素之间的间距。

        （3）margin-left 正数往右边移动，负数往左边移动

                 margin-top 正数往下边移动，负数往上边移动

        （4）margin:0 auto:设置内容水平居中

7.行高 line-height

        （1）属性值： 倍数 / px

                例：line-height: 1.75；

                line-height: 20px;

        （2）遇到一行文本(单行文本)垂直居中，可以设置行高等于标签的高度

        （3）遇到多行文本垂直居中，可以通过内边距设置居中

                例：padding-top: 80px;

                       padding-bottom: 80px;

8.圆角 border-radius

        （1）分别设置不同的圆角：

                border-top-left-radius 左上角

                border-top-right-radius 右上角

                border-bottom-left-radius 左下角

                border-bottom-right-radius 右下角

        （2）例1（border-radius）：

.box {
            width: 200px;
            height: 200px;
            background-color: blue;
            /* 圆角属性 */
            border-radius: 100px;
        }

                

                   例2(分别设置)：

.demo {
            width: 200px;
            height: 300px;
            background-color: green;
            /* 分别设置不同的圆角 */
            border-top-left-radius: 40px;
            border-top-right-radius: 40px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }