文本（背景）

文本对齐方式

 text-align:center,left,right

 当text-align设置为"justify"，

 每一行被展开为宽度相等，左，右外边距是对齐

 <div style="width: 200px;height:300px;border: 5px solid red;text-align:justify;">

          <p>同学你好！</p>

 </div>

线段设置

text-decoration: none;取消a标签默认下划线

overline设置上划线    line-through设置删除线     underline设置下划线

<a href="" style="text-decoration: none;">我是a标签</a>

<div style="text-decoration: line-through;">

        我是div

</div>

转大小写 缩进

text-transform: uppercase转大写   lowercase转小写   text-indent: 10px;设置首行缩进

<div style="text-transform: uppercase;">

        Hello Word Jack

</div>

字体

font-size字体大小     font-style斜体     font-family字体样式     font-weight粗细

可同时设置 font: italic 700 66px 宋体;

<div style="font-weight: bold;">

        我是div

</div>
<div style="font: italic 700 66px 宋体;">

        我是div

</div>

列表 样式

list-style:none取消列表默认样式

list-style: circle;列表的空心圆，square列表的正方形，upper-roman列表罗马数字，

lower-alpha列表字母，decimal数字

边框

 border-color 修改边框颜色

 border-width 修改边框宽度

 border-style 修改边框线条样式

 ·none:没有边框,即忽略所有边框的宽度(默认值)

 ·solid:边框为单实线

 ·dashed:边框为虚线

 ·dotted:边框为点线

 ·double:边框为双实线

div{
				border: 1px solid red; 
			}

定位

static默认值

relative相对定位，脱离文档流，fixed固定定位

absolute绝对定位,如果父级没有相对定位，

那么他的父级就是浏览器，脱离文档流,

如果父级没有相对或绝对定位会一直往上一级找，直到浏览器

找到父级有相对或绝对定位，根据父级定位

sticky粘性定位

<div style="position: relative;">
    <div style="width: 100px;height: 100px;border: 1px solid red;margin: 100px;
    top:50px;left:100px;position: relative;">
        你好你好
        <div style="width: 30px;height: 30px;border: 1px solid red;position: absolute;
        top:0;left: 0;">
            你好你好
        </div>
    </div>
</div>

Overflow 文本溢出

overflow: hidden;溢出隐藏,visible默认值,scroll添加滚动条,

auto只有内容超出会出现滚动条,overflow-x: hidden;隐藏横向滚动条,

 overflow-y: hidden;隐藏纵向滚动条

<div style="width: 50px;height: 50px;border: 1px solid red;overflow: hidden;">
        我是div我是div我是div我是div
</div>

浮动可以实现居中

 <div style="width: 100px;height: 100px;border: 1px solid red;float: left;
    margin: 50% 0 0 50%;">
</div>