CSS中margin和position:relative的定位问题
2016-01-21 23:10
543 查看
一、代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .bb{ background: burlywood; height: 50px; margin-left: 100px; width: 100%; } .cc{ background: burlywood; height: 50px; margin-left: 100px; /*此为默认的,等同于不写*/ width: auto; } .dd{ background: burlywood; height: 50px; position: relative; left: 100px; width: 100%; } .ee{ background: burlywood; height: 50px; position: relative; left: 100px; /*此为默认的,等同于不写*/ width: auto; } </style> </head> <body style="position: relative"> <div class="bb"></div> <br> <div class="cc"></div> <br> <div class="dd"></div> <br> <div class="ee"></div> </body> </html>
二、效果图
最左边的时候:最后边的时候:
三、结论
div不明确设置width,那么默认的为width:auto.只有使用 margin-left+auto 定位的时候,才能使div刚好占满整个屏幕。
可以理解的在使用 margin-left+100% 的时候,div会向右边多出margin-left的距离。(因为100%是相对于其父元素而言,即当前的body)
四、问题
无法理解的是使用position:relative的时候,不管width如何设置都不能刚好占满屏幕,why?相关文章推荐
- HTML&CSS 【二】
- 转圈圈动画animation
- CSS格式化排版
- 一、CSS选择符选择标签
- CSS 布局实例系列(一)总结CSS居中的多种方法
- 2016.01.22 前端学习 HTML/CSS
- css中中float,relative,absolute的使用注意的问题
- HTML&CSS 【一】
- CSS box-flex属性
- 纯css3手机页面图标样式代码
- CSS @font-face(CSS 自定义字体)
- CSS---各种分割线
- css3中 resize 、outline-offset、outline align-items属性 inherit和auto的区别
- 一个TextView实现不同部分添加不同样式
- (webstorm的css编写插件)Emmet:HTML/CSS代码快速编写神器
- CSS中!important的使用 转
- CSS文本对齐text-align详解
- CSS3阴影 box-shadow的使用和技巧总结
- Make a website all about you.
- CSS 的overflow:hidden (清除浮动)