意义是:DOM顺序跟最终视觉顺序相符,且支持页面的自适应。
视频最后说的,有利于让布局更稳定,不会因为一个元素的改变影响布局
asdfasdasd
111
是 bottom 单词拼错了
margin区域是透明的
我的理解,首先,需要知道css布局有三个大的类模型,流布局、浮动布局和层布局模型。margin定位基本是属于流布局,而position+left是属于层模型的。这些在不同的场合使用。
应该用不到吧,里面添加内容尺寸就不行了。
你代码呢???
老师视频中讲了:父元素为非块状格式化上下文元素会产生margin-top/margin-bottom重叠,而设置了
overflow值除visible外,即hidden/scroll/auto都会触发BFC,使父元素成为块级格式上下文,就不会产生父子margin重叠的问题
这是设置了外面包裹容器的resize
自己写的网页
如果只设置了height没设置overflow的话,图片会全部显示出来,高出div一部分,div的高度不会受影响,设置了overflow:auto的话就会像张老师图中的样子了,会有滚动条出现
V S code
overflow: auto;
没有。。
先看一下html/css的盒子模型,子元素的margin就是子盒子到父盒子的距离啊
可以设置啊 盒子模型那不是讲了吗
font-size:0px;
因为你把左右都设置为0了啊,自然不会有变化,设置大于0的任何数,你就明白了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<style type="text/css" media="all">
.div2 {
position: relative;
border: 1px solid;
width: 600px;
height: 600px;
overflow: auto;
}
.img1 {
position: absolute;
top: 10%;
left: 10%;
margin-top:10%;
margin-left:10%;
/*以下仍然失效 */
margin-right:80%;
/*变得有效*/
margin-bottom:80%;
}
</style>
</head>
<body>
<div class="div2">
<img class= "img1" src="http://photocdn.sohu.com/20150505/mp13579778_1430811186687_4.jpeg"
alt="" width="150" style="">
</div>
</body>
</html>
"padding:50px 0px;",从盒子模型上理解是正确的,但是浏览器世界因为各种内核等原因,浏览器对这些参数的理解并不相同,是否能行要看具体是哪种浏览器以及浏览器的哪种版本,这种方式兼容性不强,只能被少数浏览器正确识别。
"margin:50px 0px;",从盒子模型上理解也是正确的,且这种方法的兼容性要好很多,绝大多数浏览器都能正常显示。
知道了