07-23
1.解决图片白边问题
/*
两张图片之间的间隙,可以用display:block来去掉
*/
*{
margin:0;
padding:0;
}
img{
display:block;
}
2.定位
/*
定位 position
取值：
relative相对定位
absolute绝对定位
fixed固定定位 参考点永远为文档的(0,0点) 脱离文档流
static静态定位(正常)
定位模型：发生在嵌套的盒子中
定位的步骤：
1、给出定位属性
2、设置位移
left 正数：右移 负数：左移
top 正数：下移 负数：上移
right
bottom
相对定位和绝对定位的区别：
参考点不同：
相对定位参考自身的坐标(0,0)点，而绝对定位参考具有定位属性的父级元素的坐标（0,0）点
脱离文档流问题：
绝对定位会脱离文档流，而相对定位遵循正常的文档流
*/
*{
margin:0;
padding:0;
}
div.father{
width:400px;
height:400px;
border:2pxsolidblue;
/*给出定位属性*/
position:relative;
/*设置位移*/
left:300px;
top:100px;
}
div.xiaosan{
width:300px;
height:300px;
border:2pxsolidblack;
margin-left:50px;
position:relative;
}
div.son{
width:200px;
height:200px;
border:2pxsolidred;
/*给出绝对定位*/
position:absolute;
left:360px;
top:50px;
}
3.定位的层级问题
/*
定位的层级：
z-index 值为数字,代表层级关系，默认值为1
数字越大，层级越高
注意：使用z-index之前必须先设置定位属性
*/
div.one{
width:500px;
height:300px;
background:orange;
position:absolute;
z-index:100;
}
div.two{
width:200px;
height:200px;
background:green;
position:absolute;
z-index:99;
}
4.轮廓线
/*
outline轮廓线
outline:宽度 样式 颜色;
*/
div{
width:300px;
height:300px;
outline:10pxsolidblue;
}
5.box-sizing
/*
box-sizing
content-box
border-box
*/
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
a{
text-decoration:none;
}
ul{
width:234px;
background:#424242;
margin:50pxauto;
}
ul>li{
padding-left:25px;
width:234px;
height:42px;
box-sizing:border-box;
}
ul>li>a{
color:white;
line-height:42px;
}
ul>li>a>span{
float:right;
margin-right:20px;
}
div.one{
width:200px;
height:200px;
padding:10px;
border:2pxsolidred;
/*默认值*/
/* width=content */
/*box-sizing:content-box;*/
}
div.two{
width:200px;
height:200px;
padding:15px;
border:2pxsolidblue;
/* width=border+padding+content */
box-sizing:border-box;
}
网友评论