1. 内容修饰样式

1.1 字体样式

1.1.1字体

li{
     font-family:'楷体';
}

1.1.2字号

li{            
        font-size:18px;
  }

1.1.3加粗

li{
       font-weight:bolder;
}

1.1.4颜色

li{
       color:#069;
}

1.1.5斜体

li:nth-of-type(2){
            font-style:italic;
        }

1.2 背景样式

1.2.1背景颜色

ch{
        background-color:#888;
}

1.2.2背景图片

ch{
      background-image:url("./images/1.jpg");
}

1.2.3背景图片位置

ch{
      background-position:-340px -190px;
}

1.2.4边框

ch{
       border: solid 2px red;
}

1.2.5设置圆角边框

ch{
        border-radius:5px;
}

image.png

1.2.6设置背景为圆形

ch{
        border-radius:50%;
}

image.png

1.2.7字体居中

ch{
         text-align:center;
}

image.png

1.2.8字体上下居中

ch{
        line-height:200px;
}

image.png

1.2.9溢出内容处理

ch{
        overflow: hidden;
}

2. 定位样式

2.1 内边距|外边距

任何标签在操作过程中都会有一个默认的边距，会影响网页元素的定位

在操作过程中，选中所有标签，设置它们的内外边距都为0

*{
  margin:0px;
  padding:0px;
}

2.1.1元素外边距

#box{
        /*元素外边距*/
        margin-left:220px;
        margin-top:20px;
}

2.1.2元素内边距

#box{
        /*内边距*/
        padding-left:50px;
        passing-top:20px;
}

2.2标签分类

2.2.1行标签

标签前后不换行，标签不能设置宽度和高度

2.2.2行内块标签

标签前后不换行，标签可以设置宽度和高度

2.2.3块标签

标签前后自动换行，标签可以设置宽度和高度

2.3标签元素的定位

默认定位：一般一个标签的定位样式为：position:static;
相对定位：position:relative;
绝对定位：position:absolute;
固定定位：fixed;

2.3.1默认定位 position:static;

相对于浏览器或者父元素的定位【margin定位】

2.3.2相对定位 position:relative;

相对于父元素进行定位，同时内部的所有标签参考自己定位

 #container{
            width:800px;
            height:2000px;
            background-color:#888;
            margin:auto;
            position:relative;
        }
        #box{
            /*默认定位方式，相对于父元素左上角的坐标进行定位*/

            position:absolute;
            top:0;
            left:0;

            width:200px;
            height:200px;
            background-color:red;
        }

2.3.3绝对定位position:absolute;

脱离HTML文档，独立定位【top|left定位】

#box{
            /*默认定位方式，相对于父元素左上角的坐标进行定位*/

            position:absolute;
            top:0;
            left:0;

            width:200px;
            height:200px;
            background-color:red;
        }

left:0;top:0;父元素默认定位，当前元素相对于浏览器进行定位

2.3.4固定定位 fixed;

一种独立的定位方式，【top|left定位】相对于浏览器的固定位置

广告栏的应用