position(static-relative-absolute-fixed),margin(top-right-bottom-left),top-right-bottom-left
最近写css遇到一些问题,所以准备写下来捋一下思路。
1.position=satic下看margin的使用。(top-right-bottom-left在这种case下无效)
1-1)margin
a,margin值为具体的px
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.container{
border: 1px solid blue;
padding-left: 100px;/*设置父元素的padding为了明显子元素的包含块区域*/
background: darkgoldenrod;
}
.inner{
width: 200px;
height: 200px;
background: red;
margin-left: 100px;/*相对于包含块移动,static的包含块为父元素的content边界以内。准确说是相对于元素自身移动
}
</style>
</head>
<body>
<div class="container">
<div class="inner">
</div>
</div>
</body>
</html>
结果如图,
b,margin值为百分比
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.container{
width: 800px;
border: 1px solid blue;
padding-left: 100px;
background: darkgoldenrod;
}
.inner{
width: 200px;
height: 200px;
background: red;
margin-left: 50%;
}
.half{
width: 500px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="inner">
</div>
</div>
<div class="half"></div>
</body>
</html>
margin仍然是相对于包含块移动(因为包含块包裹着子元素,准确来说是相对于子元素本身移动),移动的值是父元素的宽度的百分比(如,50%),不是父元素这个盒子的宽度。
结果如下图,为了明显移动的情况,我在底部添加了一个宽度50%的div做对比。
2.position=relative.由于top和margin-top的百分比情况下容易导致问题,所以这里讨论时会同时看top和left两个边。
2-1)margin
a,margin值为具体px
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.container{
border: 1px solid blue;
padding-left: 100px;
padding-top: 100px;
background: darkgoldenrod;
}
.inner{
position: relative;
width: 200px;
height: 200px;
background: red;
margin-left: 100px;//relative元素的包含块也是父元素的content边界以内区域
margin-top: 100px;
}
/*.half{*/
/*width: 50%;*/
/*height: 100px;*/
/*background: yellow;*/
/*}*/
</style>
</head>
<body>
<div class="container">
<div class="inner">
</div>
</div>
<!--<div class="half"></div>-->
</body>
</html>
结果如图,margin依然是相对于包含块做移动。准确来说是相对于元素自身移动。
b,margin值为百分比
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.container{
width: 800px;
height: 400px;
border: 1px solid blue;
padding-left: 100px;
padding-top:100px ;
background: darkgoldenrod;
}
.inner{
position: relative;
width: 200px;
height: 200px;
background: red;
margin-left: 50%;
margin-top: 50%;//父元素height=width(400px)+padding-top(100px)=500px.marin-top相对于包含块使子元素向下移动margin-top(父元素宽度的50%,即400px)
}
.half{
width: 400px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="inner">
</div>
</div>
<div class="half"></div>
</body>
</html>
结果如图,margin依然是以包含块左上角为原点移动(准确说是元素自身),不过margin-left/margin-top的值均是父元素宽度的百分比(尤其需要注意margin-top也是相对于父元素的宽度而不是高度,同理padding).不过也并不是绝对的,当设置了writing-mode为纵向书写时,比如-webkit-writing-mode: vertical-lr;此时按百分比书写的margin就会参照容器的高度来计算了
2-2)top-right-bottom-left
a,top和left为具体值(px)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.container{
/*width: 800px;*/
height: 400px;
border: 1px solid blue;
padding-left: 100px;
padding-top:100px ;
background: darkgoldenrod;
}
.inner{
position: relative;
width: 200px;
height: 200px;
background: red;
top:400px;
left: 300px;
opacity: 0.3; }
.half{
width: 400px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="inner">
</div>
</div>
<div class="half"></div>
</body>
</html>
结果如图,注意这里为了显示明显,选的值都是比较特殊的。
top/left也是相对于包含块进行位移。
b,top和left为百分比
1)top/left值为百分比时,以包含块为参考进行移动,移动的值分别相对的是父元素的width和height(width和height指定的是父元素的content区域,即包含块),而不是父元素这个盒子。
2)top/bottom值为百分比时,需要保证父元素的height存在(具体的值或者设置了百分比),不然top/bottom就无效。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.container{
width: 800px;
/*height: 400px;*/ /*如果没有设置height,子元素的top就无效*/
border: 1px solid blue;
padding-left: 100px;
padding-top:100px ;
background: darkgoldenrod;
}
.inner{
position: relative;
width: 200px;
height: 200px;
background: red;
left: 50%;
top:50%; /*因为父元素没设置高度,所以无效*/ }
.half{
width: 500px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="inner">
</div>
</div>
<div class="half"></div>
</body>
</html>
结果如下,由于父元素没有现式设置高,则top:50%设置无效。
3.position=absolute.
absolute元素的包含块是最近的已定位祖先元素的padding边界以内区域。
3-1)margin
a.margin-top/margin-left为具体的值(px)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.container{
position: relative;
width: 800px;
/*height: 400px;*/
border: 1px solid blue;
padding-left: 100px;
padding-top:100px ;
background: rgba(0,0,255,0.3);
}
.inner{
position: absolute;
width: 200px;
height: 200px;
background: red;
margin-left: 100px;
margin-top: -100px;
}
.half{
width: 500px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="inner">
</div>
</div>
<!--<div class="half"></div>-->
</body>
</html>
结果如图,margin相对于元素自身移动
b.margin-top/margin-left为百分比
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.container{
position: relative;
width: 800px;
/*height: 400px;*/
border: 1px solid blue;
padding-left: 100px;
padding-top:100px ;
background: rgba(0,0,255,0.3);
}
.inner{
position: absolute;
width: 200px;
height: 200px;
background: red;
margin-left: 50%;
/*margin-top: -100px;*/
opacity: 0.3;
}
.half{
width: 550px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="inner">
</div>
</div>
<div class="half"></div>
</body>
</html>
结果如图,margin-top/margin-left值为百分比时,相对的是父元素的wdith+padding的百分比(即absolute元素的包含块---父元素的padding边界以内区域。上面我们测试static/relative元素时,相对的是父元素的width的百分比,即relative的包含块)。
同时margin-top/margin-bottom相对的是width+padding,而不是height+padding。
3-2)top-right-bottom-left
a.top/left为具体的值(px)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.container{
position: relative;
width: 800px;
height: 400px;
border: 1px solid blue;
padding-left: 100px;
padding-top:100px ;
background: rgba(0,0,255,0.3);
}
.inner{
position: absolute;
width: 200px;
height: 250px;
background: red;
left:0px;
top:0px; }
.half{
width: 450px;
height: 150px;
background: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="inner">
</div>
</div>
<!--<div class="half"></div>-->
</body>
</html>
结果如图,top/left相对于包含块移动。
b.top/left为百分比
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.container{
position: relative;
width: 800px;
height: 400px;
border: 1px solid blue;
padding-left: 100px;
padding-top:100px ;
background: rgba(0,0,255,0.3);
}
.inner{
position: absolute;
width: 200px;
height: 250px;
background: red;
top: 50%;/*移动了250px*/
/*left: 0;*/
left: 50%;/*移动了450px*/ }
.half{
width: 450px;
height: 150px;
background: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="inner">
</div>
</div>
<div class="half"></div>
</body>
</html>
结果如图,相对于包含块移动。移动的值是相对于父元素的width+padding或height+padding(包含块)的百分比。
4.position=fixed.
4-1)margin
a.margin-top/margin-left为具体的值(px)
与absolute一样,不重复了。
b.margin-top/margin-left为百分比
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style> body{
border: 1px solid red;
width: 50%;
height: 200px;
}
div{
position: fixed;
width: 200px;
height: 100px;
background: darkviolet;
margin-left: 50%;
margin-top:200px;//这里使用百分比比较复杂,所以用具体的值。
}
</style>
</head>
<body>
<div></div>
</body>
</html>
结果如图,以元素自身为参考移动。值是相对于窗口大小viewport的百分比。
4-2)top-right-bottom-left
a.top/left为具体的值(px)
于absolute差不多,不重复了。
b.top/left为百分比
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
body{
border: 1px solid red;
width: 50%;
height: 200px;
}
div{
position: fixed;
width: 200px;
height: 100px;
background: darkviolet;
top: 50%;
left: 50%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
结果如图,相对于包含块(窗口)移动,值是相对于窗口大小viewport的百分比。
总结几条:
1)static/relative的包含块是父级元素的content区域(width和height决定)。
static/relative元素的 margin-left/margin-top/margin-right/margin-bottom,以元素自身为参考移动,值为百分比时,指的是包含块(width)的百分比,margin-top/margin-bottom相对的也是width而不是height。
static元素的top/left/bottom/right.以包含块为参考移动,值为百分比时,指的是包含块(width或height)的百分比。
2)absolute元素的包含块是最近的已定位祖先元素的padding边框以内区域。
它的 margin-left/margin-top/margin-right/margin-bottom,以元素自身为参考移动,值为百分比时,指的是包 含块(width+padding)的百分比,margin-top/margin-bottom相对的也是width+padding而不是垂直方向的height+padding.
它的top/left/bottom/right.以包含块为参考移动,值为百分比时,指的是包含块(width+padding或height+padding)的百分比。
3)fixed的包含块为窗口,大小为viewport.
最新文章
- Fixing DSDT
- 别再为了iOS新系统设备而重新安装一个新版Xcode了.其实我们可以添加版本支持
- PHP面试题之驼峰字符串转换成下划线样式例子
- matlab struct结构体用法
- array new 与 array deletedelete
- poj1456 结构体排序+贪心
- 2016 系统设计第一期 (档案一)jQuery checkbox 取值赋值
- 2876: [Noi2012]骑行川藏 - BZOJ
- nosql数据库选型
- codevs 3094 寻找sb4
- jqeruy的append一个有趣的用法(挪移控件位置)
- saiku中多cube排序问题
- 成为JAVA软件开发工程师要学哪些东西
- CSharp笔记>;>;>;多语言,注册
- python 模块:csv
- try{}里有一个 return 语句,那么紧跟在这个 try 后的 finally {}里的 code 会 不会被执行,什么时候被执行,在 return 前还是后?
- 如何在控制台切换Xcode的版本
- Oracle day02 函数
- Android系统分析之运营商显示流程分析之运营商信息的读取流程二
- Docker从入门到飞升:基础配置安装
热门文章
- Web前端之基础知识
- Codeforces Round #105 (Div. 2) 148C Terse princess(脑洞)
- PHP开发环境&;amp;MySQL下载安装及配置流程
- javascript 左侧菜单
- Android自定义组件系列【14】——Android5.0按钮波纹效果实现
- Container详解
- linux下支持托盘的邮件客户端Sylpheed
- Android 简述touch事件中的MotionEvent
- [Android]新建项目继承Activity不继承ActionBarActivity
- button-xml 中android:clickable=";false"; 属性