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具有两种属性编写的时候尽量不要换行
<img src="img/kkk.jpg" /><img src="img/kkk.jpg" /><img src="img/kkk.jpg" />
先定义功能(编写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%边线圆
