移动

div{
    border: 2px solid black;
    text-align: center;/* 对其方式 */
    height: 200px;
    line-height: 200px; 
    text-indent: 2em;
}
1em  ==font-size: ;
/* 伪类选择器 */
span:hover{
    background-color: aqua;
}

1,行级元素 inline
feature :内容决定所占位置,不可以通过css改变宽高
比如span em a del strong
2,块级元素 block
feature :独占一行,可以通过css改变宽高
比如div p ul li ol form address
3,行级块元素 inline-block
feature :内容决定大小,可以改变宽高

span{
    display: inline;
}
div{
    display: block;
}
img{
    display: inline-block;
}

可以更改元素哦
凡是带有inline的元素,都有文字特性,文字特性:编写inline代码时回车换行都会看作成空格(所以图片之间用一行一个img的代码的话会出现想图片与图片之间出现空格)
img具有两种属性编写的时候尽量不要换行

先定义功能(编写css),后选配功能(编写html)

*{
    padding: 0;
    margin: 0;
}

border: 10px solid #f40;
盒子的三大部分
盒子壁 border
内边距 padding
盒子内容 width+height
在border外边的时margin
padding的值
上右下左四个
上左右下三个
上下左右两个

div{
    width: 100px;
    height: 100px;
    padding: 0 100px;
    border: 1px solid #f40;
    background-color: chocolate;
    padding: 0;
}

定位position
body默认的margin是8像素
opacity :0.5 ;0-1的值透明度
层模型
absolute (会往上跑一层下一层就会上去)
1,脱离原来的位置进行定位
2,相对于最近的有定位的父级进行定位,如果没有,那么相对于文档进行定位

.wapper{
    position: absolute;
    left: 100px;
    top: 200px;
    
    width: 100px;
    height: 100px;
    background-color: aqua;
}

relative
1.保留原来的位置进行定位
2.相对于原来的位置进行定位
fixed
相对于屏幕定位
z-index 1第几层
border-radius:50%边线圆