周总结（CSS文本，display和overflow，盒模型，弹性盒子，定位，单行和多行文本省略，背景属性，隐藏元素的方法）

一.文本属性

1 CSS文本属性
CSS ⽂本属性可定义⽂本的外观。
通过⽂本属性，您可以改变⽂本的颜⾊、字符间距，对⻬⽂本，装饰⽂本，对⽂本进⾏缩进等等。
1.1 文本缩进
text-indent 属性将⻚⾯上的段落的第⼀⾏进行缩进(首行缩进)，这是⼀种最常⽤的⽂本格式化效果。
取值：
：⽤⻓度值指定⽂本的缩进。可以为负值。
：⽤百分⽐指定⽂本的缩进。可以为负值。

p { 
    text-indent:20px; 
}
p { 
    text-indent:20%; 
}

1.2 文本对齐
text-align属性设置⽂本⽔平对⻬⽅式。
取值：
left：内容左对⻬。
center：内容居中对⻬。
right：内容右对⻬。
justify：内容两端对⻬，对最后⼀⾏⽆效
注意：样式应用的最后一行文字不会生效（如果只有一行，那第一行同样是最后一行）

li-01 {
    text-align:left;
}

li-02 {
    text-align:right;
}

li-03 {
    text-align:center;
}

li-04 {
    text-align:justify;
}

1.3 文本修饰
text-decoration 属性设置⽂本装饰线条的位置，综合属性
可以单独设置 text-decoration-line、 text-decoration-color 和 text-decoration-style 属性
text-decoration-line
none 指定⽂字⽆装饰
underline 指定⽂字的装饰是下划线
overline 指定⽂字的装饰是上划线
line-through 指定⽂字的装饰是贯穿线
注：还可以组合多个值，比如 underline 和 overline，在文本上下方同时显示线条
text-decoration-style
solid 线条显示为单行
double 线条显示为双线
dotted 线条显示为点线
dashed 线条显示为虚线
wavy 线条显示为波浪线

.under {
    text-decoration: underline red;
}

.over {
    text-decoration: wavy overline orange;
}

.lineThough {
    text-decoration: line-through;
} 

.none {
    text-decoration: none;
}

.under01 {
    text-decoration-line: overline underline;
}

1.4 单词间距
word-spacing 属性设置英⽂单词之间的间距
           normal：默认间隔
1.5 文本间距
letter-spacing 属性设置字符之间的间距，适⽤于中英⽂⽂本
           normal：默认间隔

1.6 ⽂本换⾏
1.6.1 word-wrap 让文字换行
1.6.1 word-break   自动换行
1.6.3 white-space 不允许文字换行
16.4 text-overflow 当文本溢出包含元素时剪切文字

2 文字阴影text-shadow【css3】
text-shadow 属性向文本设置阴影。
语法：text-shadow: x-shadow y-shadow blur color;
x-shadow 必需。水平阴影的位置。允许负值。
**y-shadow 必需。垂直阴影的位置。允许负值。
**blur 可选。模糊的距离。
**color 可选。阴影的颜色。

二.display和overflow

display 属性规定元素应该⽣成的框的类型
none 不显示元素
block 转换为块元素
inline 转换为行内元素
inline-block 转换为行内块元素
table-cell 转换为table中的td格式，可以设置文字垂直方向的对其方式vertical-align: bottom;

<style>
    p.inline {
        display:inline;
    }
</style>
<p class="inline">
    我是p标签我是p标签我是p标签我是p标签
</p>
<p>
    我是p标签我是p标签我是p标签我是p标签
</p>

overflow 属性规定当内容溢出元素框时发⽣的事情
visible 不变
hidden 超出隐藏
scroll 滚动条显示内容
auto 超出显示滚动条

<style>
    div{
        background-color:#00ffff;
        width:150px;
        height:150px;
        overflow: auto;
    }
</style>

<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>

<div>
    这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
</div>

三.盒模型基本属性

width 宽度
height⾼度
padding 内边距
margin 外边距1.5.1 定义
border 边框
可以按顺序设置如下属性：
         border-width
         border-style
         solid 实线
         dotted 点状线
         double 双实线
         dashed 虚线
         border-color颜色
border-radius 圆角

四.弹性盒子display：flex 表示给当前元素添加弹性盒子
flex-warp：warp   换行
justify-content 水平方向上的对齐方式 
             center   居中
             left     左对齐  
             right    右对齐 
             space-between    两端对齐 
             around     平分（每个元素之间的间距一样）
align-content   竖直方向上的对齐方式                                                                                                             center   居中
             left     左对齐  
             right    右对齐 
             space-between    两端对齐 
             around     平分（每个元素之间的间距一样）

五.定位

1.position: relative;   相对定位（相对于自己原本位置进行定位）
              top 上边的距离
              bottom   下边的距离
              left  左边的距离
              right   右边的距离
2.position: absolute;  绝对定位（相当于页面进行定位，如果其父级也加了定位，则相当于父级进行定位）                                                                                                                                                          top 上边的距离
              bottom   下边的距离
              left  左边的距离
              right   右边的距离             
3.position: fixed;  相对于浏览器窗口进行定位（比如网页右下角的小广告）
             top 上边的距离
              bottom   下边的距离
              left  左边的距离
              right   右边的距离  
4.position: sticky; 粘性定位   
               top 上边的距离
              bottom   下边的距离
              left  左边的距离
              right   右边的距离

补充：单行文本省略和多行文本省略

单行文本省略

<!-- 案例：单行文本省略 -->
<style>
  ul{
    width: 400px;
  }
  li{
    width: 100%;
    float: left;
    /* 不让文字换行 */
    white-space: nowrap;
    /* 溢出隐藏 */
    overflow: hidden;
    /* 添加省略符号 */
    text-overflow: ellipsis;
  }
</style>

<ul>
  <li>中财办副主任：慈善捐赠是自愿行为，不能搞“逼捐”</li>
  <li>念！首位歼-10女飞行员余旭牺牲5周年 曾驾机飞越天安门</li>
  <li>外交部：中美双方正就元首会晤的具体安排保持密切沟通</li>
  <li>今年以来多地出生人口降幅超一成 专家：育龄妇女数量减少是源头</li>
  <li>俄媒：美国驻也门使馆人员被扣为“人质”，美国国务院回应</li>
</ul>

多行文本省略

<!-- 多行文本省略 -->
<style>
  ul{
    width: 200px;
  }
  li{
    width: 100%;
    margin-top: 30px;
    margin-left: 30px;
    /* 标签变为弹性盒子 */
    display: -webkit-box;
     /* 按照垂直方向排序 */
    -webkit-box-orient: vertical;
     /* 保留对应的行数 */
    -webkit-line-clamp: 2;
     /* 多余的行数隐藏 */
    overflow: hidden;
  }
</style>
</head>
<body>
    <ul>
        <li>1.中财办副主任：慈善捐赠是自愿行为，不能搞“逼捐”</li>
        <li>2.念！首位歼-10女飞行员余旭牺牲5周年 曾驾机飞越天安门</li>
        <li>3.外交部：中美双方正就元首会晤的具体安排保持密切沟通</li>
        <li>4.今年以来多地出生人口降幅超一成 专家：育龄妇女数量减少是源头</li>
        <li>5.俄媒：美国驻也门使馆人员被扣为“人质”，美国国务院回应</li>
    </ul>
 </body>

六.背景

background-color 背景颜⾊

background-image 背景图⽚

background-repeat 背景平铺
               repeat 默认值，⽔平垂直⽅向上平铺
              no-repeat 不平铺
             repeat-x ⽔平⽅向平铺
              repeat-y 垂直⽅向平铺

background-attachment    背景固定
              scroll 默认值，背景图像会随着⻚⾯滚动
             fixed 当页面滚动时，背景图像不会滚动

background-size 背景图像的尺寸

精灵图：多个图片组成一个大图，可根据对大图的定位显示出不同的小图的内容，大大减少了向服务器发送请求的次数

七.隐藏元素

1.opacity:0          注意：元素消失，但是还会占据空间

2.display:none     注意：元素消失，不会占据空间

3.transform:scale(0)     注意：元素消失，但是还会占据空间

4.visibility:hidden 隐藏 / visible显示           注意： 元素消失，但是还会占据空间

5.width:0;overflow:hidden; 注意： 元素消失，但是还会占据空间

6.position:absolute; top:-当前元素的高度；left：-当前元素的高度 注意： 元素消失，不会占据空间