1.em详解
参考em详解
常用数值转换
初始化设置
html {font-size: 100%;}
body {font-size: 1em;}
2.雪碧图的使用
雪碧图参考
background-position属性设置背景原图像（由 background-image 定义）的位置，意味着使用这个属性的前提是必须设置背景原图像background-image。
要得到图a的话首先设置好容器的width和height然后只要把background-position: 0px 0px;
要得到图b的话首先设置好容器的width和height然后只要把background-position: -70px 0px;
3.响应式图片
img图片
img{
max-width:100%;
height:auto;
}
背景图片
width: 100%；
background-image: url(img/1.jpg);
background-repeat:no-repeat;
background-size:100% 100%; /*控制缩放设置成百分比*/
background-size：length || 百分比
length：设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"
百分比：以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
4.水平居中的三种方法
4-1. margin:0px atuo; 适用于block元素自身
4-2 text-align：center；适用于inline-block ，但是要用block父元素包装然后在父元素设置
4-3 flex布局 给父容器设置justify-content: center;
5.垂直居中
5-1 高度未知
1.flex布局 align-items: center;
2.使用css3的transform来实现
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
5-2高度已知
1.绝对定位 top：50%； 使margin-top：-number
top: 50%;
margin-top: -number px; /* margin-top值为自身高度的一半 */
position: absolute;
padding:0;
2.奇特的方法适用于响应式布局
position:absolute;
margin:auto;
left:0;
top:0;
right:0;
bottom:0;
3.子元素为行内元素 height:父容器height line-height：父容器height；
parent{
background:#222;
height:200px;
}
/* 以下代码中，将a元素的height和line-height设置的和父元素一样高度即可实现垂直居中 */
a{
height:200px;
line-height:200px;
color:#FFF;
}
6.水平垂直居中
6-1 已知父容器宽高
position:absolute;
margin:auto;
left:0;
top:0;
right:0;
bottom:0;
6-2 已知父容器宽高 （和5-2一样思想 ）
.item
{
position:absolute;
top:50%;
left:50%;
margin-top:-75px;/* 设置margin-left /
margin-top 为自身高度的一半 */
margin-left:-75px;
}
6-3 未知父容器宽高 （和5-1 2一样）
.item
{
position:absolute;
top:50%;left:50%;
transform:translate(-50%, -50%);/* 使用css3的transform来实现 */
}
6-4 未知父容器宽高 flex布局
.parent
{
display:flex;
justify-content:center;
align-items:center;
}
网友评论