发表于： 2016-08-07 22:41:18
3 1461
今天完成的事：
学习position定位
1.一般不建议对容器设置高度，一般使用overflow:auto;属性设置容器根据内容自适应高度，如果不指定高度或不设置自适应高度，容器将默认为1个字符高度，容器下方的布局元素设置margin-top:属性将无效。
2. 一个div下面放了两个div，这两个div使用了float浮动后，父层div的高度不跟着两个子div的高度变化，始终是一个字符的高度。造成这种情况的原因是两个子div使用了float浮动属性，解决方法有两种：给复层div加overflow:auto;属性即可; .clear{ clear:both}清除一下浮动.
3. 如果用position来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用 absolute。
4. 即使父级有Padding属性，对其也不起作用，说简单点就是：它只坚持一点，就以父级左上角为原点进行定位，父级的padding对其根本没有影响。
父元素relative，子元素absolute，父元素高度没了，成了1个字符高度
明天计划的事：
1.学习定位，浮动的知识
2.学习自适应的知识
今天遇到的问题：
1.尝试写Task5，想用定位完成布局，标题的返回图标就半天搞不定，定义了一个居中的标题，但是用absolute定义返回图片时，图片总是出现在文字中间，而不是整个父元素框的左边；
2. 父元素relative，子元素absolute，父元素高度没了，成了1个字符高度，子元素没有撑开父元素
.father{
position: relative;
width:300px;
background-color: #22292C;
padding-top: 20px;
padding-left: 10px;
}
.kid1{
width:100px;
height:100px;
position:absolute;
background-color: green;
}
</style>
</head>
<body>
<div class="father">
<div class="kid1"></div>
</div>
</body>
收获：
Position没有弄懂，Task5刚开始就进行不下去，没有收获。
返回列表
评论